はじめに
会社で vue.js で作成された画面を修正する際、開発者ツールをうまく使っていなかったので、フロントを開発するうえで役に立つブラウザの開発者ツールについて記載します。
開発者ツール
概要
ブラウザに搭載されている現在開いているページ情報等を確認したり、デバックするためのツールです。
以降によく使う4つの機能を紹介します
機能
要素
ページの DOM、CSS 情報を確認、変更できます。
DOM の確認
例として「説明文」というところを確認した場合を図1に示します。
A をクリックし、選択モードになってから、 B を押下すると図1のようになります。
右側の画面に DOM 情報が出ています。
「説明文」という部分には li タグで定義されていることが判ります。
DOM 部分は右クリックで「」からHTMLを編集することも可能です。「説明文2」というList を追加した場合の例を図2に示します。
CSS の確認
赤く反転している部分について図3に示します。
赤く反転している部分は marker-red というクラスが反映されており、marker-red というクラスには background-color というスタイルが定義されていることが判ります。
また、赤丸部分のチェックを外すと一時的にスタイルの無効化ができます。図4にスタイルを変えた場合のイメージを示します。
また、自由にスタイルを追加することができます。例として font-size: を追加する例を図5に示します。
実際の作業では DOM を確認してあたっているクラスや ID の確認をします。
また、修正確認のためにスタイルを変更し、どの DOM にどんなスタイルを当てれば目的を達成できるか確認します。
コンソール
処理中に出力したログメッセージやエラー、簡易にjavascript を試したりできます。
処理中井発生したエラーメッセージ等の確認
表示されるメッセージ例を図6に示します。
上記のように、あるリソースを読み込もうとして 500エラーが発生してしまっている件や、あるファイルの66行目でシンタックスエラー（書き方が間違っている）が発生していることが判ります。
うまく動かない場合、ここを見てエラーが発生していないのかを確認し、対応します。
簡易にJavaScriptの実行
図6に簡易に動かしてみた例を示します。
うまく動かない場合、おかしそうなコードを個々で確認することが多いです。
ソース
ページ中に読み込んでいる各ファイルとその中身を確認できます。javascript ファイルではブレイクポイントを設定して、処理の途中で止めて変数の値を確認できます。
ネットワーク
ページ表示に使用している各ファイルの読み込みに掛かっている時間と累計時間を確認できます。
おわりに
慣れていると当たり前に使ってしまい、何が困っているのかわからないことがあります。
当たり前のことをどう伝えて他のメンバーの効率化を助けるかも重要ですね。
コメント