SPAデバッグ入門 Powered by Rabbit 2.2.0

SPAデバッグ入門

Masafumi Yokoyama勉強会@Sinatra札幌

2016-06-19

SPAデバッグ入門 Powered by Rabbit 2.2.0

さいきんのおしごと

Firefox

AngularJS

Rails

SPAデバッグ入門 Powered by Rabbit 2.2.0

SPAデバッグ入門

SPAデバッグ入門 Powered by Rabbit 2.2.0

SPAとは

Single Page Applicationページ遷移なし

AjaxやWebSocketなどを使って通信

SPAデバッグ入門 Powered by Rabbit 2.2.0

デバッグとは

バグを見つける

直す

SPAデバッグ入門 Powered by Rabbit 2.2.0

デバッグとは

バグを見つける

直す

SPAデバッグ入門 Powered by Rabbit 2.2.0

バグを見つける

デバッグツール

事例

SPAデバッグ入門 Powered by Rabbit 2.2.0

バグを見つける

デバッグツール

事例

SPAデバッグ入門 Powered by Rabbit 2.2.0

デバッグツール

Firefox/Google Chrome標準添付

F12で出てくるやつ

標準添付のツールが充実してきたので、Live HTTP HeadersやHttpFox、Firebugなどは不要になってきている

SPAデバッグ入門 Powered by Rabbit 2.2.0

デバッグツール

Firefoxの開発ツールを例にいくつか紹介

SPAデバッグ入門 Powered by Rabbit 2.2.0

開発ツール

インスペクタ

Webコンソール

ネットワークモニタ

SPAデバッグ入門 Powered by Rabbit 2.2.0

開発ツール

インスペクタ

Webコンソール

ネットワークモニタ

SPAデバッグ入門 Powered by Rabbit 2.2.0

インスペクタ

要素を調査

DOMを調べる要素(element)があるか

属性(attribute)があるか

https://developer.mozilla.org/ja/docs/Tools/Page_Inspector

SPAデバッグ入門 Powered by Rabbit 2.2.0

要素

<a href="..."></a>

SPAデバッグ入門 Powered by Rabbit 2.2.0

属性

href="..."

SPAデバッグ入門 Powered by Rabbit 2.2.0

要素を調査

デモ

SPAデバッグ入門 Powered by Rabbit 2.2.0

開発ツール

インスペクタ

Webコンソール

ネットワークモニタ

SPAデバッグ入門 Powered by Rabbit 2.2.0

Webコンソール

JavaScriptなどのログを記録console.log

JavaScriptのコードを実行してWebページと対話

https://developer.mozilla.org/ja/docs/Tools/Web_Console

SPAデバッグ入門 Powered by Rabbit 2.2.0

Webコンソール

デモ

SPAデバッグ入門 Powered by Rabbit 2.2.0

開発ツール

インスペクタ

Webコンソール

ネットワークモニタ

SPAデバッグ入門 Powered by Rabbit 2.2.0

ネットワークモニタ

ネットワークリクエストの詳細を表示

HTTPステータス

リクエスト/レスポンス

https://developer.mozilla.org/ja/docs/Tools/Network_Monitor

SPAデバッグ入門 Powered by Rabbit 2.2.0

ネットワークモニタ

デモ

SPAデバッグ入門 Powered by Rabbit 2.2.0

WebSocketモニタ

WebSocket接続のやり取りのモニタリングはアドオンで可能

WebSocket Monitorhttps://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/

SPAデバッグ入門 Powered by Rabbit 2.2.0

バグを見つける

デバッグツール

事例

SPAデバッグ入門 Powered by Rabbit 2.2.0

事例

かいはつしゃはそうしんボタンをおした

しかしなにもおこらなかった

SPAデバッグ入門 Powered by Rabbit 2.2.0

:-O

SPAデバッグ入門 Powered by Rabbit 2.2.0

切り分ける

どこでエラーになっているかクライアント

サーバー

ネットワーク

SPAデバッグ入門 Powered by Rabbit 2.2.0

そうび

ネットワークモニタ

Webコンソール

サーバーのログ

SPAデバッグ入門 Powered by Rabbit 2.2.0

かいはつしゃはネットワーク

モニタをつかった

SPAデバッグ入門 Powered by Rabbit 2.2.0

かいはつしゃはネットワーク

モニタをつかった

リクエストは未送信だった

エラーが返ってきていた

送信したまま返ってきていなかった

SPAデバッグ入門 Powered by Rabbit 2.2.0

かいはつしゃはネットワーク

モニタをつかった

リクエストは未送信だった

エラーが返ってきていた

送信したまま返ってきていなかった

SPAデバッグ入門 Powered by Rabbit 2.2.0

リクエストは未送信だった

クライアントでエラーが起きている

Webコンソールを使って調査

SPAデバッグ入門 Powered by Rabbit 2.2.0

かいはつしゃはWebコンソールをつかった

JavaScriptにログを仕込む

Webコンソールにログが出る

SPAデバッグ入門 Powered by Rabbit 2.2.0

かいはつしゃはネットワーク

モニタをつかった

リクエストは未送信だった

エラーが返ってきていた

送信したまま返ってきていなかった

SPAデバッグ入門 Powered by Rabbit 2.2.0

エラーが返ってきていた

ステータスコードを見る

SPAデバッグ入門 Powered by Rabbit 2.2.0

ステータスコードを見る

400番台ならクライアントが悪そうリクエストパラメータを確認

サーバーのログを見る

500番台ならサーバーが悪そうサーバーのログを見る

SPAデバッグ入門 Powered by Rabbit 2.2.0

かいはつしゃはネットワーク

モニタをつかった

リクエストは未送信だった

エラーが返ってきていた

送信したまま返ってきていなか

った

SPAデバッグ入門 Powered by Rabbit 2.2.0

送信したまま返ってきていな

かった

ネットワーク不調の可能性WiFi有効になってる？

ping通る？

SPAデバッグ入門 Powered by Rabbit 2.2.0

おまけ

法人向けFirefoxサポートで得た知見

SPAデバッグ入門 Powered by Rabbit 2.2.0

おまけ

DOM Inspector

ブラウザツールボックス

SPAデバッグ入門 Powered by Rabbit 2.2.0

DOM Inspector

Firefox本体のUIのDOMを見れるメニュー

タブ

SPAデバッグ入門 Powered by Rabbit 2.2.0

DOM Inspector

デモ

SPAデバッグ入門 Powered by Rabbit 2.2.0

ブラウザツールボックス

ブラウザ上で発生したすべての通信を一覧できるすべてのタブ

アドオン

SPAデバッグ入門 Powered by Rabbit 2.2.0

ブラウザツールボックス

用途の例: バックグラウンドで余計な通信が発生していないかの確認

SPAデバッグ入門 Powered by Rabbit 2.2.0

ブラウザツールボックス

デモ

SPAデバッグ入門 Powered by Rabbit 2.2.0

まとめ

標準ツールが充実

クライアントかサーバーかネットワークか切り分けよ