Google Chrome開発者ツールの使い方｜初心者向けに基本機能を解説

学習ロードマップ

開発者ツールをご存じでしょうか？私は1日5回は開発者ツールをしています。

Webサイトを見ているときに、「この文字の大きさはどうなっているのか」「画像がうまく表示されない理由は何か」「ページの表示が遅い原因はどこにあるのか」と思うことがあります。

そのようなときに便利なのが、Google Chromeの開発者ツールです。

開発者ツールを使うと、WebページのHTMLやCSSを確認したり、JavaScriptのエラーを見たり、通信状況を調べたりできます。Web制作やブログ運営、プログラミング学習をしている人にとって、よく使う機能のひとつです。

Google Chrome開発者ツールとは

Google Chrome開発者ツールとは、Chromeブラウザに標準で入っているWebページ確認用のツールです。

特別なソフトを追加しなくても、Chromeを使っていればすぐに利用できます。

主に次のようなことができます。

  • HTMLの構造を確認する
  • CSSの内容を確認・一時的に変更する
  • スマホ表示を確認する
  • JavaScriptのエラーを確認する
  • 画像やCSS、JavaScriptなどの読み込み状況を確認する
  • ページ表示速度の確認に使う

Webサイトの見た目や動作を調べたいときに使いやすいツールです。

開発者ツールの開き方

Google Chromeで開発者ツールを開く方法はいくつかあります。

操作方法内容
右クリックページ上で右クリックして「検証」を選ぶ
WindowsF12 または Ctrl + Shift + I
MacCommand + Option + I
メニューから開くChrome右上のメニューから「その他のツール」→「デベロッパーツール」を選ぶ

初心者の場合は、確認したい部分を右クリックして「検証」を選ぶ方法が分かりやすいです。

クリックした場所に近いHTMLが開くため、どの部分がどのコードに対応しているか確認しやすくなります。

ElementsでHTMLとCSSを確認する

開発者ツールでよく使うのが、Elementsです。

Elementsでは、表示中のWebページのHTML構造やCSSを確認できます。

たとえば、見出しの文字サイズや余白、画像のサイズ、ボタンの色などを調べたいときに使います。

使い方は簡単です。

  1. 確認したいページをChromeで開く
  2. 調べたい場所を右クリックする
  3. 「検証」をクリックする
  4. ElementsでHTMLとCSSを確認する

右側には、その要素に適用されているCSSが表示されます。

CSSの数値や色を一時的に変更すると、画面上の表示もその場で変わります。

ただし、ここで変更した内容は自分のブラウザ上で一時的に反映されるだけです。実際のWebサイトのデータが書き換わるわけではありません。

そのため、「この文字サイズにしたら見やすいか」「この余白を変えたらどう見えるか」といった確認に使えます。

スマホ表示を確認する

開発者ツールでは、スマホやタブレットで見たときの表示も確認できます。

開発者ツールを開いたあと、画面上部にあるスマホとタブレットのようなアイコンをクリックすると、デバイス表示の確認モードに切り替わります。

WindowsではCtrl + Shift + M、MacではCommand + Shift + Mでも切り替えできます。

この機能を使うと、次のような確認ができます。

  • スマホ幅で文字が読みにくくないか
  • 画像が画面からはみ出していないか
  • ボタンが押しやすい大きさになっているか
  • メニューが正しく表示されるか
  • 横スクロールが発生していないか

ブログやWebサイトは、パソコンよりスマホで読まれることも多いため、公開前にスマホ表示を確認しておくと便利です。

Consoleでエラーを確認する

Consoleでは、JavaScriptのエラーや警告を確認できます。

サイトのボタンが動かない、メニューが開かない、フォームが送信できないといった場合、Consoleにエラーが出ていることがあります。

Consoleを確認する手順は次のとおりです。

  1. 開発者ツールを開く
  2. 上部の「Console」をクリックする
  3. 赤色のエラー表示がないか確認する

赤色で表示されているものは、JavaScriptなどのエラーであることが多いです。

エラー文には、どのファイルの何行目で問題が起きているかが表示される場合があります。

プログラミング学習中であれば、Consoleはよく使います。JavaScriptの動作確認にも使えるため、簡単なコードを入力して結果を見ることもできます。

console.log("テスト");

このように入力すると、Console上に「テスト」と表示されます。

Networkで読み込み状況を確認する

Networkでは、Webページを開いたときに読み込まれるファイルや通信状況を確認できます。

画像、CSS、JavaScript、フォント、外部サービスへの通信などが一覧で表示されます。

Networkは、次のような場面で役立ちます。

  • 画像が表示されない原因を調べたいとき
  • ページの表示が遅い原因を確認したいとき
  • CSSやJavaScriptが正しく読み込まれているか確認したいとき
  • エラーになっている通信を確認したいとき

使い方は次のとおりです。

  1. 開発者ツールを開く
  2. 「Network」をクリックする
  3. ページを再読み込みする
  4. 読み込まれたファイル一覧を確認する

Statusに404が表示されている場合は、ファイルが見つかっていない可能性があります。

Statusに200が表示されている場合は、正常に読み込まれている状態です。

ページが重いと感じる場合は、画像サイズが大きすぎないか、読み込みに時間がかかっているファイルがないかを確認できます。

よく使う機能まとめ

Google Chrome開発者ツールには多くの機能がありますが、最初から全部を覚える必要はありません。

まずは、次の機能を覚えておくと使いやすいです。

機能主な使い方
ElementsHTMLやCSSを確認する
ConsoleJavaScriptのエラーを確認する
Network画像やファイルの読み込み状況を確認する
デバイス表示スマホやタブレットの表示を確認する
SourcesJavaScriptやCSSファイルの中身を確認する
ApplicationCookieやストレージなどを確認する

Web制作やブログ運営であれば、最初はElements、Console、Network、スマホ表示の4つを使えれば十分です。

まとめ

Google Chrome開発者ツールは、WebページのHTML、CSS、JavaScript、通信状況、スマホ表示などを確認できる便利なツールです。

Web制作、ブログ運営、プログラミング学習をしている人にとって、開発者ツールはよく使う機能です。

最初は、右クリックから「検証」を開き、ElementsでHTMLとCSSを見るところから始めると使いやすいです。

慣れてきたら、Consoleでエラーを確認し、Networkで読み込み状況を確認してみましょう。

開発者ツールを使えるようになると、Webページの仕組みが分かりやすくなり、サイト修正や学習にも役立ちます。

タイトルとURLをコピーしました