デベロッパーツールとは?開き方から基本の使い方まで一挙解説

デベロッパーツールはいくつかある検証ツールの1つです。検証ツールは開発現場に欠かせないものですが、デベロッパーツールにもコーダー・プログラマーにとって必須の機能が詰まっています。

本記事ではコーディングやプログラミングを始めたばかりの人向けに、デベロッパーツールの基本の使い方を解説します。デベロッパーツールを開くと難しそうなことばかり書かれていますが、初心者にも役立つ機能が満載なので、ぜひ一緒に手を動かして試してみてください。

デベロッパーツールとは

デベロッパーツールとは、Google Chromeに標準搭載されている検証ツール(デバッグツール)です。HTML&CSSの初心者の学習を助けるものから、サイト運営者が自サイトのパフォーマンスを高めるためのものまで、デベロッパーツールには多様な機能が備わっています。

デベロッパーツールの開き方

まずはデベロッパーツールを開いてみましょう。Google Chromeのどこかを右クリックします。

そして画像で赤矢印で示した「検証」をクリックしましょう。すると下半分に新しいエリアが現れます。ここがデベロッパーツールです。

なお、デベロッパーツールはショートカットキーでも開くことができます。よく使うので、覚えておくと良いでしょう。

・Mac・・・「command」+「option」+「i」

・Windows・・・「Ctrl」+「Shift」+「i」

表示場所の変更方法

また、画像では画面下半分に開いていますが、好みに合わせて表示場所を変更することができます。次の画像の赤矢印で示した場所をクリックします。

すると次のように、表示場所を選択するメニューが表示されます。そこから好きな場所を選びましょう。

表示範囲の調整方法

また、もし表示範囲が狭い(または広い)と感じたら、次のように調整することができます。

HTMLをシミュレーション

デベロッパーツールでHTMLをシミュレーションする場所は、次の画像中の青枠で囲んだ部分です。

この範囲も調整が可能です。

サイトの一部のHTMLを確認する

サイトのHTMLがどうなっているかを知りたい場合、まず次の画像の矢印で示した場所を選択します。

すると「セレクトモード」に切り替わり、サイト上の要素の選択が可能になります。この状態でカーソルを移動させると、カーソルが乗った位置の要素に色が付き、クリックするとデベロッパーツール側で該当箇所がハイライトされます。

今回は、Google ChromeのダウンロードボタンのHTMLを確認してみましょう。まずは、セレクトモードのまま「Chromeをダウンロード」にカーソルを合わせます。すると以下のように、ダウンロードボタンの範囲に色が付きます。

この状態でクリックすると、デベロッパーツール側でダウンロードボタンのHTMLがハイライトされます。

ハイライトされた場所を見ると、buttonタグ(<button>)が使われていることが分かります。

サイトのHTMLをテスト的に書き換える

では、次にダウンロードボタンを非表示にしてみましょう。ハイライトされたHTMLを右クリックすると、メニューが開きます。

そして、赤枠で囲んだ「Edit as HTML」を選択します。すると次のように編集可能モードに切り替わります。

今回は<button>を全て消してみましょう。

この状態で編集エリア以外のどこか適当な場所をクリックします。そして、ブラウザを確認して見ましょう。すると以下の通り、「Googleが開発したブラウザ」の下にあった青いダウンロードボタンが消えているのが分かります。

なお、編集した内容はページをリロードすることで元に戻ります。

CSSをシミュレーション

次はCSSをシミュレーションしてみましょう。またダウンロードボタンを編集するので、一度ページをリロードして元に戻します。

デベロッパーツールでCSSが確認できるのは、次の画像のうちオレンジの枠で囲んだエリアです。

サイトの一部のCSSを確認する

ではダウンロードボタンのボタンのCSSを見てみましょう。再度セレクトモードでダウンロードボタンのエリアを選択します。すると、HTMLで該当箇所がハイライトされたように、CSS側にもダウンロードボタンのCSSが表示されます。

少し分かりづらいですが、「button」がセレクタになっています。

サイトのCSSをテスト的に書き換える

CSSもHTML同様、テスト的に編集することができます。基本的に書き換えたい箇所をクリックすることで編集可能モードになります。

ではダウンロードボタンの背景色を変更してみましょう。編集する場所は画像の赤枠で囲んだ部分です。background-colorプロパティが使われています。

色を変えるためには、「#1967d2」と書かれた場所をクリックします。すると編集モードになるので、通常のCSSを記述するように、好きな色を選びます。今回は背景色を黒に変更しましょう。

「black」に変更してEnterを押すと、ブラウザ上の表示が次のように黒いダウンロードボタンに変わります。編集したセレクタは右上のボタンにも対応しているため、画面中央のボタン同様に黒くなっています。

デベロッパーツール上の記述をCSSファイルにコピーする

デベロッパーツールのCSSはコピーすることができます。そのため、「デベロッパーツールシミュレーション」→「CSSファイルに貼り付け」という流れで開発が行われることもよくあるのです。

方法は通常のコピー&ペーストと同じ要領です。今回は下の赤枠で囲んだ部分をコピーします。

そして、任意のCSSファイルを開いてペーストすると、CSSの記述に則った状態できれいに表示されます。

スマホの表示を確認する

デバイスが多様化している現在、サイトはレスポンシブデザインであることが重要な要素です。通常サイト制作はパソコンで行われますが、スマホやタブレットでの表示を確認したい場合もあります。そこで用いられるのが、デベロッパーツールのデバイスモードです。デバイスモードを使うことで、様々な画面サイズでの表示を確認できます。

デバイスモードへの切り替えは、次の画像の矢印で示した部分をクリックします。

すると次のように、様々な方法で画面サイズを変更することができます。

まとめ

デベロッパーツールはコーダーやプログラマーにとって必須のツールです。本記事では基礎的な操作方法は解説しましたが、数ある機能の氷山の一角に過ぎません。自分なりにいろいろ試しながら、デベロッパーツールを使いこなせるコーダー・プログラマーを目指しましょう。