FOUR WINDS TECH BLOG

WEBサイト制作・WEBアプリケーション開発が得意な会社の技術ブログ

トップ > フロントエンド > 【Google Chrome】デベロッパーツールの使い方(基本編)

【Google Chrome】デベロッパーツールの使い方(基本編)

フロントエンド

HTML, CSS, JavaScriptをコーディングする際に、ちょっとしたケアレスミスで意図したように表示されなかったり実行されなかったりすることがあります。

そのような場合にHTML, CSS, JavaScriptだけを読んで問題を解決するのは少し効率が悪いかもしれません。

コーディングした内容が実際にどのようにブラウザで処理されるか確認をするためにデベロッパーツールを利用することで、効率よくコーディングを進めることができます。

この記事ではGoogle Chromeのデベロッパーツールの基本的な使い方について紹介します。

各機能の詳細は量が多いので別の記事で紹介しています。

  1. 【Google Chrome】デベロッパーツールの使い方（デバイスツールバー編）
  2. 【Google Chrome】デベロッパーツールの使い方（Elements編）
  3. 【Google Chrome】デベロッパーツールの使い方（Console編）
  4. 【Google Chrome】デベロッパーツールの使い方（Sources編）
  5. 【Google Chrome】デベロッパーツールの使い方（Network編）
  6. 【Google Chrome】デベロッパーツールの使い方（Performance編）
  7. 【Google Chrome】デベロッパーツールの使い方（Memory編）
  8. 【Google Chrome】デベロッパーツールの使い方（Application編）
  9. 【Google Chrome】デベロッパーツールの使い方（Security編）
  10. 【Google Chrome】デベロッパーツールの使い方（Lighthouse編）
  11. 【Google Chrome】デベロッパーツールの使い方（Settings編）

デベロッパーツールとは

デベロッパーツールはブラウザに標準で付属している、開発者向けのデバッグツールです。

HTML, CSSの確認やDOM構造の確認、JavaScriptのデバッグからWEBページの改善点の提案まで、様々な機能が含まれています。

この記事ではGoogle Chromeのデベロッパーツールを紹介しますが、ほとんどの機能は他のブラウザのデベロッパーツールでも利用できます。

デベロッパーツールを使うには

デベロッパーツールは、ブラウザのメニューから［表示 > 開発 / 管理 > デベロッパーツール］を選択するか、次のショートカットキーで表示できます。

OS ショートカットキー
Windows10 F12
macOS ⌘ + ⌥ + I

デベロッパーツールのレイアウト

f:id:four-winds:20210131203526p:plain

①要素を選択する

Elementsタブでフォーカスする要素を選択できます。

②デバイスツールバーを表示する

後述のデバイスツールバーを表示できます。

③タブ

クリックすると表示するタブを切り替えられます。

④エラーと警告

Consoleに表示されるエラーと警告の件数が表示されます。

クリックするとConsoleタブが表示されます。

⑤設定

デベロッパーツールの設定を変更できます。

⑥デベロッパーツールメニュー

クリックすると次のようなメニューが表示されます。

f:id:four-winds:20210131204447p:plain

Dock side

クリックするとデベロッパーツールの表示位置を変更できます。

左から順に、別ウィンドウ・左側・下・右側に表示されます。

Show console drawer

クリックすると以下のようにコンテンツエリア下部にConsoleドロワーが表示されます。

f:id:four-winds:20210131204831p:plain

機能はConsoleタブと同等です。

Search

読み込んだリソースの中から指定のキーワードで検索を実行できます。

Run command

様々なコマンドを実行できます。

macOSでは［⌘ + ⇧ + P］Windows10では［Ctrl + Shift + P］で実行することもでき、コマンドでChromeの設定などを変更できるので左記のショートカットキーと組み合わせて利用することで操作を効率化できます。

Open file

読み込んだリソースの中から指定のキーワードを含むファイルをSourcesタブに表示できます。

More tools

その他のツールが表示されます。

f:id:four-winds:20210131205813p:plain

⑦デベロッパーツールを閉じる

クリックするとデベロッパーツールを閉じます。

⑧コンテンツエリア

選択したタブの内容が表示されるエリアです。

デバイスツールバー

【Google Chrome】デベロッパーツールの使い方（デバイスツールバー編）で紹介しています。

Elements

【Google Chrome】デベロッパーツールの使い方（Elements編）で紹介しています。

Console

【Google Chrome】デベロッパーツールの使い方（Console編）で紹介しています。

Sources

【Google Chrome】デベロッパーツールの使い方（Sources編）で紹介しています。

Network

【Google Chrome】デベロッパーツールの使い方（Network編）で紹介しています。

Performance

【Google Chrome】デベロッパーツールの使い方（Performance編）で紹介しています。

Memory

【Google Chrome】デベロッパーツールの使い方（Memory編）で紹介しています。

Application

【Google Chrome】デベロッパーツールの使い方（Application編）で紹介しています。

Security

【Google Chrome】デベロッパーツールの使い方（Security編）で紹介しています。

Lighthouse

【Google Chrome】デベロッパーツールの使い方（Lighthouse編）で紹介しています。

Settings

【Google Chrome】デベロッパーツールの使い方（Settings編）で紹介しています。

さいごに

デベロッパーツールは非常に多機能ですべてを使いこなすには時間をかけて学ぶ必要があるかもしれません。

作業内容によって利用する機能は異なりますが、HTM, CSS, JavaScriptのコーディングをする場合次の機能をよく利用します。

  • デバイスツールバー
  • Elements
  • Console
  • Sources
  • Network
  • Lighthouse

こちらの機能だけでも使えるようになると、効率よくコーディングを進めることができる思うのでぜひお試しください。