SPAデバッグ入門

author

Masafumi Yokoyama

content-source

勉強会@Sinatra札幌

date

2016-06-19

allotted-time

40m

theme

nyankosakana

さいきんのおしごと

SPAデバッグ入門

SPAとは

デバッグとは

デバッグとは

バグを見つける

バグを見つける

デバッグツール

デバッグツール

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

開発ツール

開発ツール

インスペクタ

{::note} developer.mozilla.org/ja/docs/Tools/Page_Inspector {:/note}

要素

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

属性

href="..."

要素を調査

デモ

開発ツール

Webコンソール

{::note} developer.mozilla.org/ja/docs/Tools/Web_Console {:/note}

Webコンソール

デモ

開発ツール

ネットワークモニタ

{::note} developer.mozilla.org/ja/docs/Tools/Network_Monitor {:/note}

ネットワークモニタ

デモ

WebSocketモニタ

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

バグを見つける

事例

:-O

切り分ける

そうび

かいはつしゃはネットワークモニタをつかった

かいはつしゃはネットワークモニタをつかった

かいはつしゃはネットワークモニタをつかった

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

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

かいはつしゃはネットワークモニタをつかった

エラーが返ってきていた

ステータスコードを見る

かいはつしゃはネットワークモニタをつかった

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

おまけ

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

おまけ

DOM Inspector

DOM Inspector

デモ

ブラウザツールボックス

ブラウザツールボックス

ブラウザツールボックス

デモ

まとめ