Chromeデベロッパーツールの使い方まとめ【開き方やコンソール、ショートカットなど】

こんにちは、現在フリーランスのエンジニアとして7年ほど活動しているしょーごと申します。

みなさん「Chromeデベロッパーツール」または「検証ツール」という言葉を聞いたことがあるでしょうか？

デベロッパーツールを知らずにコーディングを行うことは不可能ですし、正しく使えていなかったり、意外な便利機能が搭載されていたりするので、

本記事を通して正しく使っていただければと思います。

今回は以下の機能を紹介していきます。

デベロッパーツールの機能

HTML／CSSコードのチェック、デバッグ
レスポンシブ確認
コンソールでエラーチェッ
SEOチェック
フォント確認
ネットワーク
画像の保存
スクリーンショット/キャプチャ
検索欄でコード検索

しょーご

この記事を書いたのは
しょーご（@samurabrass）

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

Chromeデベロッパーツールとは？
デベロッパーツールの開き方・ショートカット
デベロッパーツールの主な機能
デベロッパーツールの機能①HTML/CSSコードのチェック、デバッグ
デベロッパーツールの使い方②レスポンシブ確認
- Responsiveで大画面でも確認する
デベロッパーツールの機能③コンソールでエラーチェック
デベロッパーツールの機能④SEOチェック（Lighthouse）
- サイトの改善施策出し
デベロッパーツールの機能⑤フォント確認
デベロッパーツールの機能⑥ネットワーク
デベロッパーツールの機能⑦画像の保存
デベロッパーツールの機能⑧スクリーンショット/キャプチャ
デベロッパーツールの機能⑨検索欄でコード検索
デベロッパーツールをコーディングで使い倒そう
おすすめの拡張機能も入れておきましょう！

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

Chromeデベロッパーツールは、Google Chromeブラウザに組み込まれた、開発者向けのツールセットです。

これを使うと、ウェブサイトの内部構造を調べたり、パフォーマンスを分析したり、エラーをデバッグしたりすることができます。

デベロッパーツールの開き方・ショートカット

Chromeデベロッパーツールの開き方は2種類あります。

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

右クリック→検証
ショートカットでCtrl+Shift+I（MacではCommand + Option + I）

特にChromeデベロッパーツールはショートカットで開くのが基本です。是非慣れてください。

デベロッパーツールの主な機能

デベロッパーツールで今回紹介する機能・できることは以下のとおりです。

デベロッパーツールの機能

HTML／CSSコードのチェック、デバッグ
レスポンシブ確認
コンソールでエラーチェッ
SEOチェック
フォント確認
ネットワーク
画像の保存
スクリーンショット/キャプチャ
検索欄でコード検索

実際にやってみたほうが早いので、今デベロッパーツールを起動してみましょう！

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

右クリック→検証
ショートカットでCtrl+Shift+I（MacではCommand + Option + I）

デベロッパーツールの機能①HTML/CSSコードのチェック、デバッグ

まずはコードのチェックやデバッグ方法を学んでいきましょう。

デベロッパーツール内の左上のアイコンをクリックします。

すると、ホームページ上の各要素を選択することができます。

カーソルを合わさった箇所は色が変わり、一つ一つの要素がどのようソースーコードで構成されているのかが分かります。

ユースケース①　CSSで色を変えてみる

例えばこのボタン

なんとなく「青色」にしたらどうなるだろうと変えてみるとします。

まずはボタンにフォーカスを当ててソースコードを確認します。

すると、ボタンの色は.top-image-btn-color aというところにあたっているようです。

なので、ここを変えてあげればいいです。

デベロッパーツールでカラーコードをblueにした結果、ボタンを青色にすることができました。

ユースケース②　HTMLの変更

例えばボタンのテキストを「コーディング教材ページへ」に変えたいとします。

まさひろくん

テキスト変えてみたらどうなるかな〜

という場合にソースコードをいちいち触って確認するのは億劫そうです。

その場合も変更したい部分をダブルクリックすれば変更可能になります。

こちらの方がしっくりきそうであれば、ソースコードも変更すればいいと思います。

デベロッパーツールでの変更は反映されない

疑問として

まさひろくん

デベロッパーツールで行った変更ってコードに反映されるのでしょうか？

という疑問があるかと思いますが、ブラウザのHTML,CSSをいじっているに過ぎないので、本番公開されているサイトを検証ツールでいじっても基本的には問題ありません。

なので、

ソースコードを確認するほどじゃないけど、色とか余白を変えて表示確認してみたい
サイトの気になる部分を検証で覗いてどういうコードになってるか確認する
自分の書いたCSSがちゃんとあたっているか確認する
おしゃれなサイトのコードやライブラリを覗いて参考にする

みたいなときによく使います。

デベロッパーツールの使い方②レスポンシブ確認

デベロッパーツールではレスポンシブ表示の確認をすることができます。以下のアイコンをクリックすると。。。

スマホ表示を確認することができます。

タブレットなども確認可能です。

このようにレスポンシブやデバイス幅を確認することができます。

特にタブレット周りは崩れがちなので、要注意です！

しょーご

ちなみに、実機iPhoneとは表示が異なります。iPhone実機を使ってローカル環境で表示確認できるので、必ず確認するようにしてください！！

また、PCとタブレット、スマホ表示を一括で確認することができるResponsive Viewerを使うことで、もっと便利にレスポンシブ確認ができるようになるので、気になる方は見てみてください。

Responsiveで大画面でも確認する

ゆうきくん

僕のPCは小さいので、1920pxとかの大画面での確認ができないのですが。。。

という方でも、デベロッパーツールの「Responsive」を使用すればOKです。

画面の縮尺を75%とかに変えれば、2000px近くのサイズも検証することができます。

同時にブラウザ幅をかえて連続的な表示の確認もしましょう。

世の中には様々なブラウザ幅やデバイスで使っている人がいるので、変な表示になっている部分は極力なくしたほうがいいです。

クライアントさん

なんかここバグってるみたいです！

と結構指摘されることになります笑

しょーご

ちなみに残念ながら、この「検証ツールのiPhone,iPad」と「実際のiPhone,iPad」では表示が違う場合のほうがはるかに多いです。なので実機で確認するかエミュレーターが必要になったりします、難しいですね。

デベロッパーツールの機能③コンソールでエラーチェック

デベロッパーツールのコンソールは、恐らく日頃デベロッパーツールを使っている人でも知らない方がいるかもしれません。

検証>Consoleの部分です。ここにエラーが出ていないか確認します。

確認する際はブラウザのシークレットウィンドウで開きましょう。ブラウザの拡張機能がエラー吐いたりして邪魔なためです。

デベロッパーツールの以下の位置にコンソール(Console)は存在します。

見てみると、いくつかエラーが出ていますね。

(index):920 Uncaught ReferenceError: _ is not defined
    at (index):920

ここに　Webサイトで起こっているエラーがまとめて表示されているので、エラー文を一つ一つ呼んで問題を解消していく作業が必要になります。

しょーご

ちょっとこのサイト問題がありますね…

このコンソールエラーは見る人が見たらかなり分かりやすいので、納品や他人への表示チェック依頼の前に潰しておくことが最低限のマナーになります！

余談ですが、ここではJavaScriptを実行することができるので、console.logの結果を見たりできます。変数の中身を見るときとか便利ですね。

例えば以下のコードをconsoleに入れると、横スクロールの場所を特定できたりします。

// ウェブページの幅を取得
var w = document.documentElement.clientWidth;

// 全ての要素を取得
var elements = document.querySelectorAll("*");

// 要素をループして、指定の条件を満たすものを探す
elements.forEach(function(v) {
  v.style.outline = '1px solid red';
  if (w < v.clientWidth) {
    console.log(v);
  }
});