デベロッパーツールとは？できることや基本的な使い方を解説

Web担当者であれば、デベロッパーツールについても知っておきましょう。

デベロッパーツールとは、Google Chromeに標準搭載されている、開発者向けの検証ツールです。

存在は知っていますが、ちゃんと使ったことはないですね…。何ができるツールなんですか？

じゃあ、基本的な内容をわかりやすく解説しますね！

この記事では、「このツールで何ができるの？」「使い方がわからない」とお悩みの人に向けて、概要や機能、起動方法や各タブでできることなど、基礎知識をわかりやすく解説します。

この記事で学べること

• デベロッパーツールの概要
• 起動方法
• 各タブの概要
• Elementsパネルの使い方
• デバイスモードの使い方

サイト運営の現状課題
把握できてますか？

課題がわからないまま
施策を進めていませんか？
「簡易チェックシート」で
現状の課題を整理して
今後の対策を明確にしましょう！
（初心者の方でもすぐに見直せます！）

• サイト運営の全体像を俯瞰して確認できる
• 現状の課題がどこにあるか明確になる
• 今後やるべき施策の優先順位がつけやすい
• 初心者でも分かりやすい項目設定
• PDF形式だからいつでも手元で確認可能！

まずは現状把握から始めましょう！

課題を整理することで、
施策の効果を最大化する
ことにつながります！

無料配布中

無料ダウンロードは
こちらから

デベロッパーツールとは

デベロッパーツールの概要

デベロッパーツールとは、Google Chromeに標準搭載されている、開発者向けの検証ツールです。

Webサイトを閲覧する際には使用しませんが、開発者がWebサイトのチェックを行う際に使用します。

似たような機能のツールは、Microsoft Edgeやsafariなどのブラウザにも搭載されていますが、今回は最も有名なGoogle Chromeのデベロッパーツールについて解説します！

主な機能

開発者やデザイナーといったエンジニアにはもちろん、Web担当者にも欠かせない、さまざまな機能を搭載しています。

主な機能として挙げられるのは以下です。

• HTMLやCSSの検証
• 画面幅の異なるスマートフォンやタブレットなどでの見え方の確認
• JavaScriptのデバッグ
• エラーの確認
• Webサイトを構成するデータやファイルの確認
• SEOで重要なコアウェブバイタルの確認

さまざまな機能があるんですね！

デベロッパーツールの起動方法

まずは、基本的な起動方法を知っておきましょう。

Windows

Windowsで起動する場合は、Google Chromeの右上「⋮」をクリックし、「ツール」→「デベロッパーツール」をクリックします。

また、「Ctrl」＋「Shift」＋「i」のショートカットキーでも起動可能です。

Mac

Macで起動する場合は、Google Chromeの右上の「⋮」をクリックし、「ツール」→「デベロッパーツール」をクリックします。

また、「command」＋「option」＋「i」のショートカットキーでも起動可能です。

表示場所の変更方法

表示場所を変更するには、デベロッパーツール内の右上にある、「⋮」をクリックしてください。

最上部の「Dock side」の、別ウインドウ表示・左側表示・下側表示・右側表示の4つの表示位置の中から、好みの表示場所を選択しましょう。

日本語表示にする方法

以前は、英語でしか表示されませんでしたが、2021年9月にリリースされた「Google Chrome 94」にアップデートすることで、日本語表示が可能になりました。

日本語に変更するには、デベロッパーツールの歯車アイコンをクリックしてください。

「Settings」→「Preferences」の中ほどにある「Language」で、日本語を選択しましょう。

「×」をクリックして元の画面に戻り、「Reload DevTools」をクリックして再起動したら、日本語で表示されます。

デベロッパーツールの各タブの概要

「Elements」とか「Console」とか書かれている部分がタブですか？

そうです！タブを選択することで、機能を使い分けることができます。

それぞれのタブの主な機能を簡単に解説します。

Elements

Webページの内容をHTMLで確認できます。「DOM」と「CSS」を操作し、レイアウトやデザインの調査・編集が可能です。

Console

JavaScriptのエラーやログを確認できます。簡易的なJavaScriptコードの実行も可能です。

Source

HTMLファイルなどのリソースを確認できます。またJavaScriptのデバッグも行えます。

Network

Webページ内でブラウザが実行した通信内容を確認できます。

Performance

読込速度が低下する原因や、コアウェブバイタルに影響を与える原因を調べられます。

Application

読み込まれたCookieや画像、アプリケーションキャッシュやローカルストレージなどの確認・編集・削除が可能です。

Lighthouse

ページ品質評価テストが実施できます。パソコンとモバイルにわけて検証でき、非公開状態のWebページでも実行可能です。

Recorder

Google Chromeで開いたWebページ内の、入力やクリックなどの操作を記録したうえで、再実行やパフォーマンスの調査ができます。

Performance insights

「Performance」よりも手軽に、Webサイトのパフォーマンスの調査・分析が可能です。

Elementsパネルの使い方

次は、よく利用するElementsパネルの使い方について知っていきましょう！

Elementsパネルとは

HTMLとCSSの検証に用いられるのが、Elementsパネルです。例えば、表示に問題が生じた場合の原因調査や、新規のデザインを取り入れる前のテストなどに使われます。

「ブラウザ表示中のページ」「HTMLソース」「CSSスタイル」で構成されています。

HTMLを仮で編集する方法

STEP 1

編集したいテキストやタグでダブルクリックすると、編集画面に変わります。

また、テキストやタグで右クリックし、「Edit as HTML」を選択することでも、編集画面に変わります。

CSSを仮で編集する方法

STEP 1

編集する箇所のHTMLを確認します。

STEP 2

右側の「Styles」タブで確認します。

STEP 4

プロパティの候補が表示されますので選択します。

デバイスモードの使い方

デバイスモードとは

デバイスモードとは、スマートフォンやタブレットでのWebページの見え方を、パソコンのブラウザ上でシミュレーションできる機能です。

スマートフォンの普及により、多くのユーザーがモバイル端末でWebサイトを閲覧しているため、スマートフォンやタブレットに向けた最適化が欠かせません。

スマートフォンやタブレットがなくても、パソコンのブラウザ上で異なる画面サイズの表示を確認しながらHTMLとCSSの調整ができるため、モバイル向けやレスポンシブデザインのWebページの制作に役立ちます。

デバイスモードでできること

表示するデバイスの切り替え

デバイスモードは、「Elements」タブのすぐ左にある、スマートフォンのようなアイコンをクリックすると起動します。

最上部のデバイス選択メニューで、表示させたいデバイスを選択することで切り替えられます。

レスポンシブモード

固有のデバイスの画面サイズではなく、縦横の大きさを自由に変更するには、レスポンシブモードを活用します。

最上部のデバイス選択メニューで、「Responsive」を選び、任意の数値を入力しましょう。また、右・右下角・下に表示されるハンドルをドラッグしても、数値の変更が可能です。

よくある質問

まとめ

デベロッパーツールは、開発者やデザイナーといったエンジニア向けの検証ツールですが、Web担当者も活用できる、さまざまな機能を搭載しています。

自サイトはもちろん、競合サイトがどのように作られているかの確認など、幅広いシーンで活用できます。

本記事で紹介した機能以外にも多くの機能がありますので、少しずつ身につけていきましょう。