Chrome DevTools（ディベロッパーツール）の使い方まとめ

普段ウェブサイトを修正する時に Chrome DevTools のような開発者ツール、ディベロッパーツールを使うのは当たり前になってきています。自分の勉強も含めて、使い方についてまとめました。

起動

まず起動しましょう。F12で起動できますが、ファンクションキーは微妙に押しずらかったりするのでCtrl + Shift + Iで起動するか、要素選択状態から始められるCtrl + Shift + Cもおすすめです。

設定

起動後に、右上にある︙ マークから各種設定を行えます。

Dock side … DevTools の位置を変更できる
Hide console Drawer … 後述する Console ブロック表示切替え
Search … 現在のページで読み込んでいるソースファイル全体から文字列検索を行う
Run command … DevTools で使えるコマンドを実行する。マウスを使いたくない人向け
Open file … 現在のページで読み込んでいるソースファイルを開く。
More tools … なんか色々できる（
Shortcuts … ショートカットの確認
Settings … 各種設定

この中でよく使うのは、Search、Open file ですかね。
特に Search は全ファイルから文字列を検索できるので、この id とか class どこで使ってるかな？みたいな時にサクっと検索できるのがありがたいです。Search はCtrl + Shift + Fでも使えます。

console drawer と同じ位置に結果が表示される

Settings はとりあえず Theme を Dark にして、DevTools をダークテーマにしとくとカッコいいです。

各パネル

DevTools の上部にあるパネルの説明です。

Elements

HTML が表示されます。load 後に Javascript が動作した後のコードなので、Ctrl + Uで表示したソースコードとは異なります。もし Javascript 動作前のコードが見たい場合はそちらを見てください。

要素選択

DevTools の左上にあるを押すと、要素選択状態になります。この状態でページ上にある要素をクリックすると、Element パネルの HTML の方も対象までジャンプします。この機能を使うことが非常に多いのですが、Ctrl + Shift + Cでも同じ状態になるので便利です。

また、HTML ソースコードの方で右クリックすると、その要素の修正を行えます。

Add Attribute / Edit Attribute … 属性の追加と編集
Edit as HTML … 要素の HTML を修正できる
Delete element … 要素削除
Copy … 色んな形式でコピーできる
Hide element … 要素を非表示にできる。削除と違ってソースコードからは消えないので、復活もできる。
Force state … 要素の状態を強制的に変更できる。hover 状態の時に要素がどうなるか確認したい時に便利
Break on … その要素の変更や削除があった時に、処理を止めることが出来る
Expand recursively … 子要素を全て展開する
Collapse Children … 子要素を全て閉じる
Scroll into view … 要素までスクロール移動する
Focus … 謎（
Store as global variable … 要素の DOM を仮の変数に代入する

Edit as HTML なんかはたまに使います。名前の変更でよく割り当てられるF2でも同じことができます。属性は属性名をダブルクリックすればそのまま編集できるので、コンテキストメニューから選ぶよりも早いです。

要素はドラッグして移動できるので、順番を変えたり、他の要素の子要素にとして入れたりすることが簡単にできます。

Styles スタイルの確認と変更

Styles パネルから、リアルタイムに CSS の修正をすることができます。今どんなスタイルが当たっているのか一括で見たい時は、Styles パネルの隣にある Computed パネルを見ます。プロパティ名をクリックすると、どのスタイルが優先されているか、どのファイルのどの行に記述があるか確認できます。

数値の変更

スタイルを調整する時に、10px, 11px, 12px … というように数値を変更することがあると思います。いちいち打ち込むのは面倒ですが、↑↓キーを押すと 1 ずつずらすことができます。一気に数値を増減させたい時は下記も使うと便利です。

Ctrl + ↑↓ … 10 単位
Ctrl + Shift + ↑↓ … 100 単位
Alt + ↑↓ … 0.1 単位

Event Listeners

選択している要素にくっついているイベントの一覧を確認できます。また、イベント名を押すとどのファイルでそのイベントが追加されているのか確認できます。また、イベントの詳細にホバーした時に表示される remove を押すと、イベントを削除することが出来ます。
エラーの検証等でイベント実行途中で処理を止めたいといった時は、後述する Souces パネルでの内容を確認して下さい。

Console

console の使用は Javascript を扱うなら必須になってきます。ページ内のエラーを探すのにも便利です。またconsole.log()を使った時の出力先です。

Javascript を書く

直接コードを記述できます。

Sources

現在のページで読み込んでいるソースファイルの中身を閲覧できます。また、Javascript のブレイクポイントを設定したり、処理のステップ実行を行うことができます。

続きはまた追記します。

起動

設定