ブラウザの開発者ツールの基本的な使用方法について。
F12キーで開発者ツールを起動できる。
各タブの用途
Elementタブ
DOM、つまり、画面資源のHTMLを見ることができる。
CSSの確認・検討などはこのタブで行う。
HTMLから要素を右クリック ＞ Copy ＞ Copy Xpath を選択すると、要素のパスを取得することができる。実際に開発で特定の要素に対し処理を行いたいときにはこのパスを使用すると便利。
Consoleタブ
画面資源の挙動でエラーが発生した場合は、その情報を見ることができる。
画面資源では、サーバー上にログを残すことが難しい。コンソールタブに出力されている内容が、実質的なログにあたる。
しかし、このログはローカル端末上、しかもリアルタイムでしか確認できない。APIと比べデバッグが困難であり、昨今SPAが台頭しているが大きな課題となっている。
コンソールタブはエラーログの確認のみでなく、ブラウザに向けてリクエストを送り、情報を得ることもできる。これについては後述。
Networkタブ
ブラウザが通信したリクエストレスポンスを見ることができる。おそらく開発者が一番よく使用するタブ。
コールしたAPIが一覧表示されるので、見たいAPIをクリックすると詳細が表示される。
ただし、Networkタブを開いた状態からリクエストを送らなければいけない点に注意する。
Tomcatまでリクエストが届かず、apacheでエラーを履いている場合は、ResponseにはApacheが作成したエラー画面のHTMLが返却される。この画面はNetworkタブ内のPreviewタブで視覚的に見ることができる。
通信速度を変更する
開発のテストにあたり、通信速度が低速でも問題が起きないかを確認したい場合がある。
Networkタブ内にある、Wifiマークのアイコンをクリックすると、3G回線や、オフラインなどに変更することができる。
Applicationタブ
ブラウザ上のストレージに保存されている値を見ることができる。主に以下の情報を見るときに使用する。
- ローカルストレージ
- Cookie
- セッション
- キャッシュ
Sourceタブ
サイトの画面資源のディレクトリ構成を見ることができる。
ただし、一般公開されているサイトは基本的にはコンパイル後の資源となっており、これを見ても特別情報は得られない。
開発環境の資源であれば、サイト側で設定すれば（Angulerならangular.jsonとかで設定する）、コンパイル前の資源をブラウザで見ることができるようになる。
この設定をしていれば、ブレークポイントを仕込むなど、画面資源をデバッグできるようになる。
コンソールタブでできること
ブラウザは、アプリはもちろんブラウザ固有の情報をオブジェクト構造を持っている。
そのため、コンソールタブでjavascriptを送信すればそれらの情報を得たり、ブラウザの情報を改変したりすることができる。
DOMの操作
javascriptでHTMLにアクセスすれば、現在表示しているページの値を取得したり、改変したり、フォームに値を入力することができる。
いつも同じページの複雑な入力フォームに特定の値を入力する場合など、あらかじめjavascriptのテキストとして持っておけば、そのテキストをコンソールに入力することで一括入力できたりする。
例えば、ページ内にid=”sampleId”と指定されているテキスト入力Boxがあったとして、以下を入力すればテキストボックスに任意の値を入力することができる。
document.getElementBuId('sampleId').value='任意の値';
デバイス情報の取得
同じアプリケーションを使用しても、EdgeとChromeで挙動が異なることがある。
これは、ブラウザの種類やバージョンによって、対応しているクラスやメソッドの種類が多少変わるためである。
そんな時にはアクセスしてきているデバイスのブラウザが何なのかを判定し、処理を分けたりすることがある。
この情報はwindowオブジェクトのuserAgentという値から判定する。コンソールで以下を入力することで取得することができる。
window.navigator.userAgent
windowオブジェクトからは、そのデバイスの位置情報やディスプレイサイズなど、多くの情報を取得できるので必要に応じて調べてみると良い。
参考：MDN：Window
ストアを表示
特にSPAでは画面開発中のデバッグで、今、画面のストアにどんな値が格納されているかを格納されているかを確認したい場合が多々ある。
window.$$queriesAppendix
フルスクリーンキャプチャ
※デベロッパーツールではなくブラウザ標準機能
■Edgeの場合
ブラウザ右上の三点リーダ ＞ Webキャプチャ
コメント