Chromeデベロッパーツールの使い方とショートカットキーまとめ

ウェブ制作のフロントエンド開発において、ブラウザのデベロッパーツール（または開発ツール）は今や必須のツールと言えます。Chrome以外にもSafariやFirefoxにもほぼ同等の機能が付いており、開発になくてはならないものとなっています。

とはいえ、周りを見渡すとChromeのデベロッパーツールを使っている人が大半ではないかと思います。というわけで、今回はChromeのデベロッパーツールの主な機能とショートカットキーを備忘録としてまとめてみました。

目次

1. Chromeのデベロッパーツールの使い方
   1. デバイススールの表示・非表示
   2. 表示位置の変更
   3. デバイスの変更
   4. 主なショートカットキー
2. Elementsツールパネル
3. Consoleツールパネル
4. Sourcesツールパネル
5. Networkツールパネル
6. Performanceツールパネル
7. その他のツールパネル
8. まとめ

1. Chromeのデベロッパーツールの使い方

早速、Chromeのデベロッパーツールの使い方を解説していきたいと思いますが、まずはツールの表示にまつわる機能から扱っていきたいと思います。

1-1. デバイスツールの表示・非表示

デベロッパーツールを画面に表示させるには主に3つの方法があります。

1. メニューバーから表示：「表示」→「開発 / 管理」→「デベロッパーツール」をクリック
2. 右クリックで表示：ページ内の任意の場所で右クリックし、コンテキストメニュー内の「検証」をクリック
3. ショートカットキーで表示：「⌘ + ⌥(Option) + i」キーを同時押し

もう一度同じ動作をするか、デベロッパーズツール内の右上の「×（クローズ）ボタン」をクリックすることで非表示にすることができます。

1-2. 表示位置の変更

デベロッパーツールは、必要に応じて表示位置を変更できます。両サイドや画面下部だけでなく、別ウィンドウとして表示させることもできます。表示位置を変えたい場合は、下図の画面キャプチャにある通り、右上の縦に並ぶ「三点リーダー」をクリックします。

1-3. デバイスの変更

デベロッパーツールはPC以外の各種デバイスの表示シミュレーションを行うことも可能です。下図の画面キャプチャにある「デバイスツールバー表示ボタン」をクリックすることで表示切り替えができます。デバイスの切り替えは、機種名が表示されたプルダウンから行うことができます。

なお、デバイスをPCに戻すときはもう一度「デバイスツールバー表示ボタン」をクリックすればOKです。また、PCからスマホなどのデバイスに切り替えた場合には、リロードしないと正しく表示されないこともあるので注意してください。

実は、表示デバイスは標準で設定されているもの以外にも沢山プリセットされており、デベロッパーツールパネル右上のギアの形状をした「設定ボタン」から追加することができます。

1-4. 主なショートカットキー

主なショートカットキーは以下の通りです。

2. Elementsツールパネル

Elementsツールパネルはページ内の選択されたDOMエレメントのhtmlソースを確認したりスタイルを調べたりする時などに使います。最も使用頻度の高いツールと言えるかと思います。ツールパネルに表示されたスタイルを変更したり、また新たなプロパティーを追加したりして、表示スタイルをシミュレーションすることができます。まさにフロントサイドの開発にはなくてはならないツールです。

Elementsツールパネルを表示させる方法は既に述べた通りですが、個人的には該当箇所で右クリックし「検証」をクリックして開くことが多いです。「検証」中は、デベロッパーツールパネル内、及びブラウザ表示領域共に、選択されている要素が色分けされハイライトされます。

また、ツールパネルの最下部には、選択されたDOMエレメントのwidth、height（ブルー）、margin（オレンジ）、border（イエロー）、padding（グリーン）が色分けされて表示されているので、それぞれの値を確認したいときには参照してみましょう。

3. Consoleツールパネル

ConsoleツールパネルはJavaScriptの警告やエラーを確認したり、デバッグ目的でconsole.log出力させた内容などを確認したりすることができます。

またデベロッパーツールパネル内に表示されている「>」の後にJavaScriptを追記して動作を確認することも可能です。

4. Sourcesツールパネル

Sourcesツールパネルはページ内で読み込まれている様々なソースの状態を確認したい時などに使用します。特にJavaScriptのリアルタイムデバッグに使うと便利です。

例えば、あるJavaScriptをデバッグしているとします。変数の状態を知るために、要所要所でconsole.logで変数の値を出力させてデバッグするという方法もとれますが、Sourcesツールパネル内で該当スクリプトのソースを表示させ、ブレークポイントを設定してその時々の変数の値を確認しつつ、該当スクリプトを実行してデバッグするということができます。

ブレークポイントの設定は簡単で、Sourcesツールパネル内で該当スクリプトのソースを表示させてから、行数番号をクリックすることによりブレークポイントを設定することができます。ちなみにブレークポイントは複数箇所設定することもできます。設定後にリロードすると、該当スクリプトの処理をブレークポイントで一時的に停止させることができます。次のブレークポイントまで実行させる場合は、下図の画面キャプチャ内に表示されている青色の「▶︎」ボタンをクリックすることで次のブレークポイントまでの処理を進めることが可能です。

console.logで変数の値を出力させてデバッグするよりも便利な場合は多々あるので、是非使いたい機能です。

5. Networkツールパネル

Networkツールパネルはページ内の各パーツ（画像、スタイルシート、JavaScript）などの読み込み時のステータスや読み込み時間などの確認を行うことができます。ページ読み込み時のボトルネックを確認して、読み込みレスポンスを改善したい場合などに役立てることができます。

6. Performanceツールパネル

Performanceツールパネルは、ページ読み込みの際の詳細なパフォーマンス計測を実施したい時に使います。計測したいページを表示してパネル左上の「●（レコード）ボタン」をクリックすることで、読み込み状況をタイムライン上で再現することができます。

上図のタイムラインをよく見ていただくと、小さくページのサムネイルが表示されているのですが、その部分を確認することで、ページ描画がどのように進行していくかを具体的に確認できます。特に、ページ読み込み時のガタつきを確認したい場合、またjQueryのアニメーションがスムーズに描画されているか確認したい場合などに大変便利です。

7. その他のツールパネル

…というわけで、よく使われる機能を中心に各種ツールパネルの機能概要を説明してきましたが、他にもデフォルトのツールパネルとして「Memory」「Application」「Security」があり、各種調査に使うことができます。

実はこれら以外にもオプションとしてさらに多くのツールパネルが用意されており、必要に応じて各種調査に使うことができます。中にはほとんど知られていない機能もあるかと思いますが、興味があれば使ってみてもよいかもしれませんね。

8. まとめ

今回は、ウェブ制作のフロントエンド開発において、もはや必須のツールとなったChromeのデベロッパーツールの主な機能をまとめてみました。記事には書ききれないほど機能がてんこ盛りで、使いこなすのが難しいくらいですが、各自必要に応じで使いこなせれば良いのではないかと思っています。参考にしていただければ幸いです。