Chromeでデバッグ！～デベロッパーツールの使い方～

Chrome デベロッパーツールとは

Chromeデベロッパーツールは、Chromeブラウザに元々ついている機能です。Chromeで、[F12]キーを押すと、開くことができます（Macは、[Command]＋[Option]＋[I]）。

デベロッパーツールの画面解説

初期状態について

デベロッパーツールでは、現在表示しているHTML・CSSなどを編集したり、JavaScriptを実行することができます。

デベロッパーツールを開いた直後は、ブラウザの下部に表示され、Elementsが選択されている状態になっています。

デベロッパーツールの表示位置は、バツ印隣のアイコンから修正できます。

Elementsの画面

Elementsの画面は、HTMLの編集画面・CSSの編集画面・コンソール画面の3つから成り立っています。

HTML編集画面

HTMLの編集ができます。

CSS編集画面

CSSの編集ができます。

コンソール画面

エラーを確認したり、JavaScriptを実行することができます。

コンソール画面を非表示にする

コンソール画面は、初期状態だと常に表示された状態になっています。HTMLやCSSの画面をもっと広げてみたい場合は、「Hide drawer」ボタンをクリックして非表示にしてしまいましょう。

※コンソール画面のみを大きく表示するには、「Console」をクリックします

HTMLを編集する

HTMLを編集するには、HTML編集画面のところで作業します。

虫眼鏡マークで編集したい部分まで移動する

編集したい部分を選択するには、HTMLの編集画面から探すよりも、虫眼鏡マークを使う方が便利です。虫眼鏡マークは、下記の手順で使うことができます。

テキストを変更する

テキストを変更するには、そのテキストをHTML編集画面でダブルクリックして編集します。修正した後は、エンターキーを押すと反映されます。

HTMLを丸ごと編集

HTMLを丸ごと編集するには、編集したいタグの上で右クリックして、「Edit as HTML」を選択します。編集後、画面の他の部分をクリックすることで反映されます。

※ HTMLを編集中は、新しいHTMLの記述を増やすこともできます。

まとめ

• デベロッパーツールとは、Chromeブラウザで直接HTMLやCSS,JavaScriptを編集できるツール
• Elementsの画面でHTMLやCSSを編集できる（編集の仕方は次回）
• コンソール画面は、非表示にできる
• 編集したい部分のHTMLは、虫眼鏡で探す
• テキストはダブルクリックで編集
• HTMLを直接編集するには、右クリック→「Edit as HTML」から

今回は、デベロッパーツールの画面構成と簡単なHTMLの修正の仕方についてお話ししました。デベロッパーツールを使って、サクサクっとHTMLやCSSを試し修正してみましょう！

次回へ続く