SPAデバッグ入門¶ ↑
- author
-
Masafumi Yokoyama
- content-source
-
勉強会@Sinatra札幌
- date
-
2016-06-19
- allotted-time
-
40m
- theme
-
nyankosakana
さいきんのおしごと¶ ↑
-
Firefox
-
AngularJS
-
Rails
SPAデバッグ入門¶ ↑
SPAとは¶ ↑
-
Single Page Application
-
ページ遷移なし
-
AjaxやWebSocketなどを使って通信
デバッグとは¶ ↑
-
バグを見つける
-
直す
デバッグとは¶ ↑
-
バグを見つける
-
直す
バグを見つける¶ ↑
-
デバッグツール
-
事例
バグを見つける¶ ↑
-
デバッグツール
-
事例
デバッグツール¶ ↑
-
Firefox/Google Chrome標準添付
-
F12で出てくるやつ
-
標準添付のツールが充実してきたので、Live HTTP HeadersやHttpFox、Firebugなどは不要になってきている
デバッグツール¶ ↑
Firefoxの開発ツールを例にいくつか紹介
開発ツール¶ ↑
-
インスペクタ
-
Webコンソール
-
ネットワークモニタ
開発ツール¶ ↑
-
インスペクタ
-
Webコンソール
-
ネットワークモニタ
インスペクタ¶ ↑
-
要素を調査
-
DOMを調べる
-
要素(element)があるか
-
属性(attribute)があるか
{::note} developer.mozilla.org/ja/docs/Tools/Page_Inspector {:/note}
要素¶ ↑
<a href="..."></a>
属性¶ ↑
href="..."
要素を調査¶ ↑
デモ
開発ツール¶ ↑
-
<s>インスペクタ</s>
-
Webコンソール
-
ネットワークモニタ
Webコンソール¶ ↑
-
JavaScriptなどのログを記録
-
console.log
-
JavaScriptのコードを実行してWebページと対話
{::note} developer.mozilla.org/ja/docs/Tools/Web_Console {:/note}
Webコンソール¶ ↑
デモ
開発ツール¶ ↑
-
<s>インスペクタ</s>
-
<s>Webコンソール</s>
-
ネットワークモニタ
ネットワークモニタ¶ ↑
-
ネットワークリクエストの詳細を表示
-
HTTPステータス
-
リクエスト/レスポンス
{::note} developer.mozilla.org/ja/docs/Tools/Network_Monitor {:/note}
ネットワークモニタ¶ ↑
デモ
WebSocketモニタ¶ ↑
WebSocket接続のやり取りのモニタリングはアドオンで可能
-
WebSocket Monitor
-
{::note} addons.mozilla.org/en-US/firefox/addon/websocket-monitor/ {:/note}
バグを見つける¶ ↑
-
<s>デバッグツール</s>
-
事例
事例¶ ↑
-
かいはつしゃはそうしんボタンをおした
-
しかしなにもおこらなかった
:-O¶ ↑
切り分ける¶ ↑
-
どこでエラーになっているか
-
クライアント
-
サーバー
-
ネットワーク
そうび¶ ↑
-
ネットワークモニタ
-
Webコンソール
-
サーバーのログ
かいはつしゃはネットワークモニタをつかった¶ ↑
かいはつしゃはネットワークモニタをつかった¶ ↑
-
リクエストは未送信だった
-
エラーが返ってきていた
-
送信したまま返ってきていなかった
かいはつしゃはネットワークモニタをつかった¶ ↑
-
リクエストは未送信だった
-
エラーが返ってきていた
-
送信したまま返ってきていなかった
リクエストは未送信だった¶ ↑
-
クライアントでエラーが起きている
-
Webコンソールを使って調査
かいはつしゃはWebコンソールをつかった¶ ↑
-
JavaScriptにログを仕込む
-
Webコンソールにログが出る
かいはつしゃはネットワークモニタをつかった¶ ↑
-
<s>リクエストは未送信だった</s>
-
エラーが返ってきていた
-
送信したまま返ってきていなかった
エラーが返ってきていた¶ ↑
-
ステータスコードを見る
ステータスコードを見る¶ ↑
-
400番台ならクライアントが悪そう
-
リクエストパラメータを確認
-
サーバーのログを見る
-
500番台ならサーバーが悪そう
-
サーバーのログを見る
かいはつしゃはネットワークモニタをつかった¶ ↑
-
<s>リクエストは未送信だった</s>
-
<s>エラーが返ってきていた</s>
-
送信したまま返ってきていなかった
送信したまま返ってきていなかった¶ ↑
-
ネットワーク不調の可能性
-
WiFi有効になってる?
-
ping通る?
おまけ¶ ↑
法人向けFirefoxサポートで得た知見
おまけ¶ ↑
-
DOM Inspector
-
ブラウザツールボックス
DOM Inspector¶ ↑
-
Firefox本体のUIのDOMを見れる
-
メニュー
-
タブ
DOM Inspector¶ ↑
デモ
ブラウザツールボックス¶ ↑
-
ブラウザ上で発生したすべての通信を一覧できる
-
すべてのタブ
-
アドオン
ブラウザツールボックス¶ ↑
-
用途の例: バックグラウンドで余計な通信が発生していないかの確認
ブラウザツールボックス¶ ↑
デモ
まとめ¶ ↑
-
標準ツールが充実
-
クライアントかサーバーかネットワークか切り分けよ