Chromeでよく使う開発者ツールの機能13選｜利用時の注意点は？

システム
エンジニア

Chromeの開発者ツールにはどのようなものがありますか。

プロジェクト
マネージャー

たくさんのツールが用意されています。よく使う開発者ツールをご紹介しましょう。

Chromeの開発者ツールとは

Chromeの開発者ツールは、Googleが作成したブラウザ上で編集や検証などが行える開発ツールのことです。DevTools （デベロッパーツール）とも呼びます。

画面上で右クリックし、表示されたメニューの中にある検証をクリックすると起動することができます。ショートカットキーでは、macの場合、command、option、Iキーで、Windowsの場合、F12キーで起動させることができます。

SafariやFirefoxなど、他のOSにも開発者ツールは搭載されていますが、今回はChromeの開発者ツールについて説明いたします。

どんなことができるのか

Chromeの開発者ツールは、WebサイトのHTMLやCSSの編集、他のWebサイトのコードの確認、様々な画面サイズに合わせた表示の確認などに使用されます。

開発者ツールは、最初からChromeに搭載されており、便利な機能が豊富に入っています。基本的な使い方を覚えることで開発の効率化に役立つため、ぜひ覚えましょう。

Chromeの開発者ツールで主に使われている機能13選

Chromeの開発者ツールは、情報量も多く、豊富な機能が揃っています。最初から全ての機能を知ることは大変ですが、基本的な使い方から覚え、開発に利用していくと良いでしょう。

今回はサイトの編集や検証などで主に使用する機能についてご紹介いたします。

Chromeの開発者ツール機能1：［Timeline］パネル

Timelineパネルは、Webページの読み込み後やユーザーの操作後など、ユーザーインターフェイスで起きたイベントのパフォーマンスを計測し、分析をすることができます。

何も表示されていない状態が初期状態で、Recordボタンをクリックすると情報が記録され、イベント名やイベントの種類、処理の時間などで、フィルターを使った分析も行うことができます。

Chromeの開発者ツール機能2：［Resources］パネル

Resourcesパネルは、Webサイトのページを構成しているデータやファイルなどを確認することができます。

HTML、CSS、画像などのファイルやデータベース、キャッシュされたファイルなどを一覧で確認することができます。

Chromeの開発者ツール機能3：［Elements］パネル

Elementsパネルは、左右にHTMLとCSSが表示され、Webページを構成するHTML要素やスタイルの確認、編集を行うことができます。

CSSは、Styles、Computed、DOM Breakpoints、EventListeners、Properties、Accessibilityの区分に分けられています。Stylesタブのelement.styleで、カラーの横にある四角部分をクリックするとカラーピッカーが表示されて色の変更をすることができます。

Chromeの開発者ツール機能4：［Audits］パネル

Auditsパネルは、Webサイトを検証し、最適化をするための提案をしてくれます。

ネットワークやパフォーマンスの検証の他、現在表示しているページや再読み込みした際のページの検証などを行い、改善案が表示されます。パフォーマンスの品質保持のために役立つ機能の一つです。

Chromeの開発者ツール機能5：［Profiles］パネル

Profilesパネルは、CPUやメモリの情報を確認でき、CollectJavaScriptCPUProfile、TakeHeapSnapshot、RecordHeapAllocationsの3つの情報を収集することができます。

ラジオボタンで選択ができ、CollectJavaScriptCPUProfileは、JavaScriptコードのCPU情報を収集することができ、TakeHeapSnapshotは、クリックした時点でのメモリーの状況を一覧で確認することができます。

またRecordHeapAllocationsは、時間軸でオブジェクトの詳細情報を確認することができます。

Chromeの開発者ツール機能6：［Network］パネル

Networkパネルは、Webページをリクエストしてからダウンロードするまでにかかる処理時間や通信速度などの通信内容を表示することができ、通信項目によってHeaders、Preview、Response、Cookies、Timingの５つのタブに分かれています。

リクエストテーブルは、HTTPステータスコードを示すStatus列、応答時間や遅延が短い順などで並べ替えができるWaterfall列、HTTPリダイレクトなど呼び出すリソースの起点を示すInitiator列、本文とレスポンスヘッダの合計サイズを表すSize列などに分かれています。

また、Disablecache のチェックボックスをオンにするとキャッシュクリアができ、ClearBrowserCookiesを選択するとクッキーの削除ができます。

Chromeの開発者ツール機能7：［Console］パネル

Consoleパネルは、Webページ内で起きているエラーを抽出し、メッセージを表示することができます。デバッグや警告、エラーなど、ログメッセージを表示させるためのメソッドをJavaScriptのコード内に記載することで、ログを出力することができます。

また、同じメッセージが繰り返して表示される場合は、新しい行にインスタンスが何個も出力されるのではなく、連続して繰り返された数がスタックされた左に表示されます。

Chromeの開発者ツール機能8：［Sources］パネル

Sourcesパネルは、ブレークポイントを使ってコードを一時停止させ、JavaScript をデバッグしたり、ローカルファイルに接続してDevToolsライブエディタを使ったりすることができます。

ブレークポイントには、条件付きコード行、イベントリスナーに対するコード行、例外のコード行など、いくつかの種類があります。

また、ブレークポイントの管理は、Breakpointsから行うことができます。ブレークポイントの横にあるチェックボックスをオフにすると無効化され、右クリックすると表示されるRemove Breakpointを選択すると、ブレークポイントを削除することができます。

Chromeの開発者ツール機能9：デバイスモード

デバイスモードとは、デバイスモードアイコンをクリックすると、ブレークポイントが一覧で表示され、様々なデバイスに合わせたスタイルの確認や編集に活用できる機能です。

ChromeにはiPhoneやAndroid、iPadなどメディアクエリ設定がされており、選択するだけプリセットさせた解像度やユーザーエージェント文字列が適応されます。

Chromeの開発者ツール機能10：モバイル仕様への表示切り替え

Chromeの開発者ツールは、デバイスモードを使用することでモバイル仕様への表示を切り替えることができます。

デバイスモードのResponsiveの表示下に、各端末名が表示され、選んだ端末によってエミュレータで確認することができます。また、モバイル仕様への表示を切り替えることで、ポインタがタッチ用の黒い円で表示されるようになります。

スマホやタブレットなど、レスポンシブデザインに対応する際に便利な機能です。

Chromeの開発者ツール機能11：機能俯瞰

Chromeの開発者ツールは、複数のパネルとConsole、Search、Emulation、Renderingなどのタブが隠されたドロワー、虫眼鏡アイコン、デバイスモード・アイコンなどで構成されています。

これまでに説明したパネルの他に、ローカルストレージなどのリソースを調査する際に使用するApplicationパネルや、Performanceパネルより詳細なメモリリークの追跡などの情報を確認できるMemoryパネルなどがあります。

また、Emulationタブには、位置情報を使用するアプリケーションのテストに使用する機能などもあり、開発には便利な機能が揃っています。

Chromeの開発者ツール機能12：デベロッパツールの拡張や詳細表示

Chromeの開発者ツールには、機能の拡張や詳細表示から使用できる便利な機能もあります。

例えば、新しいタブ追加をし、URLに特定の文字が含まれていると、検知したRequestがコンソールにメッセージを表示させる機能を拡張したり、テキストエンコーディングの拡張機能を追加し、Consoleのメッセージの文字化けを解決することなどができます。

また、Webサイトの上から下までのコピーしたキャプチャがほしい時には、詳細機能でページ全体のスクリーンショットをダウンロードすることもできます。

Chromeの開発者ツール機能13：虫眼鏡

開発者ツールの中にある虫眼鏡アイコンとクリックすると、サイト上でカーソルがフォーカスされた部分の色が変わり、コードのどの部分かを表示させてくれます。

色が変わっている部分の要素がどのように構成させているか、スタイルはどのように設定されているかわかるため、コードの確認や値変更を行う際に便利な機能です。

Chromeの開発者ツールが主に活躍する場面2選

Chromeの開発者ツールについて主な機能をご紹介いたしましたが、次は実際にどのような場面でどのように機能が使われるかについてご紹介していきます。

今回は主に活躍する2つの場面をご説明いたします。

主に活躍する場面1：ウェブサイトの修正やリニューアル

Chromeの開発者ツールは、Webサイトの修正やリニューアルの際にブラウザ上で簡単に確認することができるため便利です。

サイトに不具合があり修正したい場合は、コンソールパネルで原因を検証したり、サイトの一部分をリニューアルしたい場合は、エレメントパネルからソース編集やCSSの文字サイズや色、配置、背景色などのレイアウトを編集したりすることができます。

主に活躍する場面2：プログラミングの勉強の時

プログラミンを勉強する際に、模写をする方も多いでしょう。見本のサイトをみてコードを書く際、分からないコードやスタイル部分は開発者ツールを使うことで確認することができます。

マウスをホバーした部分のタグは青くなり、選択されている要素に関わるスタイルシートが表示されます。element.styleにはインラインに書かれたCSSが表示され、取り消し線はCSSが適応されていないことを示します。

Chromeの開発者ツールを使用する際の注意点3選

Chromeの開発者ツールが活躍する場面についてご紹介いたしましたが、次に、特に開発者ツール初心者の方が実際に使い始める上で気をつける点についてもご紹介いたします。

様々な機能の中から開発の用途に合わせてた使い方や利用する際に気を付けることなど、実際に利用していく上で注意する点についてご説明いたします。

開発者ツール使用時の注意点1：編集中にリロードされる

開発者ツールは編集中にリロードをしてしまうと、編集していた部分が消えて無効になってしまいます。

Chromeの開発者ツールを使って編集をしただけでは、実際のWebサイトに編集内容は反映されていません。実際へ反映したい場合は、元のファイルを書き換え保存する必要があります。

開発者ツールで編集する際は、途中で更新をして編集内容が消さないように気をつけましょう。

開発者ツール使用時の注意点2：全部英語で書かれている

Chromeの開発者ツールは、Webサイトの編集や仕組みを理解する上で重要なツールになります。

しかし、日本語化されてはおらす、メッセージなども英語で書かれています。プログラミングも英語を使用するため、早めに使い慣れておくと良いでしょう。

開発者ツール使用時の注意点3：覚えることがたくさんある

Chromeの開発者ツールは、便利な機能が豊富ですが、表示の意味や使い方、活用方法など覚えることがたくさんあります。

基本的な機能や便利な機能を覚え、コードの確認やエラーの検証など、用途に合わせた適切な機能の使い方を覚えていきましょう。

システム
エンジニア

Chromeの開発者ツールを使いこなせれば、効率的に開発できるのですね。

プロジェクト
マネージャー

注意点もありますが、Chromeの開発者ツールは機能性も高く、機能を拡張することも可能なツールですでの、ぜひ活用してください。

Chromeの開発者ツールの使い方を覚えよう！

今回はChromeの開発者ツールの基本的な機能について紹介しました。Chromeの開発者ツールは、Webサイトの修正やリニューアル、プログラミングの勉強の際に活躍する機能が揃っています。

Chromeの開発者ツールは機能性も高く、さらに機能を拡張することも可能です。利用することでWebサイトの作成を効率的に行うことができるツールです。ぜひ活用してみましょう。