Post on 30-Sep-2020
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
まとめ
標準ツールが充実
クライアントかサーバーかネットワークか切り分けよ