Text
Page: 1
SPAデバッグ入門 Masafumi Yokoyama 勉強会@ Sinatra 札幌 2016-06-19 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 2
さいきんのおしごと Firefox AngularJS Rails SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 3
SPAデバッグ入門 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 4
SPAとは Single Page Application ページ遷移なし AjaxやWebSocketなどを使って通信 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 5
デバッグとは バグを見つける 直す SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 6
デバッグとは バグを見つける 直す SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 7
バグを見つける デバッグツール 事例 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 8
バグを見つける デバッグツール 事例 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 9
デバッグツール Firefox/Google Chrome標準 添付 F12で出てくるやつ 標準添付のツールが充実してきたの で、Live HTTP Headersや HttpFox、Firebugなどは不要になっ てきている SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 10
デバッグツール Firefoxの開発ツールを例にいく つか紹介 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 11
開発ツール インスペクタ Webコンソール ネットワークモニタ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 12
開発ツール インスペクタ Webコンソール ネットワークモニタ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 13
インスペクタ 要素を調査 DOMを調べる 要素(element)があるか 属性(attribute)があるか https://developer.mozilla.org/ja/docs/Tools/ Page_Inspector SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 14
要素 <a href="..."></a> SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 15
属性 href="..." SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 16
要素を調査 デモ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 17
開発ツール インスペクタ Webコンソール ネットワークモニタ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 18
Webコンソール JavaScriptなどのログを記録 console.log JavaScriptのコードを実行して Webページと対話 https://developer.mozilla.org/ja/docs/Tools/ Web_Console SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 19
Webコンソール デモ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 20
開発ツール インスペクタ Webコンソール ネットワークモニタ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 21
ネットワークモニタ ネットワークリクエストの詳細 を表示 HTTPステータス リクエスト/レスポンス https://developer.mozilla.org/ja/docs/Tools/ Network_Monitor SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 22
ネットワークモニタ デモ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 23
WebSocketモニタ WebSocket接続のやり取りのモ ニタリングはアドオンで可能 WebSocket Monitor https://addons.mozilla.org/en-US/firefox/addon/ websocket-monitor/ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 24
バグを見つける デバッグツール 事例 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 25
事例 かいはつしゃはそうしんボタン をおした しかしなにもおこらなかった SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 26
:-O SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 27
切り分ける どこでエラーになっているか クライアント サーバー ネットワーク SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 28
そうび ネットワークモニタ Webコンソール サーバーのログ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 29
かいはつしゃはネットワーク モニタをつかった SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 30
かいはつしゃはネットワーク モニタをつかった リクエストは未送信だった エラーが返ってきていた 送信したまま返ってきていなか った SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 31
かいはつしゃはネットワーク モニタをつかった リクエストは未送信だった エラーが返ってきていた 送信したまま返ってきていなか った SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 32
リクエストは未送信だった クライアントでエラーが起きて いる Webコンソールを使って調査 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 33
かいはつしゃはWebコンソ ールをつかった JavaScriptにログを仕込む Webコンソールにログが出る SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 34
かいはつしゃはネットワーク モニタをつかった リクエストは未送信だった エラーが返ってきていた 送信したまま返ってきていなか った SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 35
エラーが返ってきていた ステータスコードを見る SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 36
ステータスコードを見る 400番台ならクライアントが悪 そう リクエストパラメータを確認 サーバーのログを見る 500番台ならサーバーが悪そう サーバーのログを見る SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 37
かいはつしゃはネットワーク モニタをつかった リクエストは未送信だった エラーが返ってきていた 送信したまま返ってきていなか った SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 38
送信したまま返ってきていな かった ネットワーク不調の可能性 WiFi有効になってる？ ping通る？ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 39
おまけ 法人向けFirefoxサポートで得た 知見 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 40
おまけ DOM Inspector ブラウザツールボックス SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 41
DOM Inspector Firefox本体のUIのDOMを見れ る メニュー タブ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 42
DOM Inspector デモ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 43
ブラウザツールボックス ブラウザ上で発生したすべての 通信を一覧できる すべてのタブ アドオン SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 44
ブラウザツールボックス 用途の例: バックグラウンドで 余計な通信が発生していないか の確認 SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 45
ブラウザツールボックス デモ SPAデバッグ入門 Powered by Rabbit 2.2.0
Page: 46
まとめ 標準ツールが充実 クライアントかサーバーかネッ トワークか切り分けよ SPAデバッグ入門 Powered by Rabbit 2.2.0
