Chrome DevToolsを使いこなそう! Web開発に必須なブラウザ開発ツールによるデバッグの基本

開発者ツール(DevTools)とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。

Chrome DevToolsを使いこなそう! Web開発に必須なブラウザ開発ツールによるデバッグの基本

皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。

前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ(以下、ブラウザ)の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール(Developer Tools)のお話をさせてもらいます。

ブラウザの開発者ツールとは

開発者ツールとは、ブラウザに搭載されているデバッグツールです。英語で一般的に「DevTools」と表記されているため、本稿でも以降はDevToolsと表記します。

DevToolsは、WebページやWebアプリケーション開発(いわゆるフロントエンド開発)において、なくてはならないツールであり、現在主流となっているブラウザには基本的に標準で搭載されています。

1

WebブラウザGoogle Chromeの開発者ツール(DevTools)

DevToolsが標準搭載されるまで、Firefoxの拡張機能であるFirebugが最も有名で、かつ唯一無二のデバッグツールでした。しかし、現在ではFirefox本体のDevToolsとして取り込まれ、開発とメンテナンスの終了が告知されています(下記のスクリーンショット参照)

2

3Firebug公式サイト

DevToolsの役割

DevToolsの主な役割は、Web開発におけるデバッグです。WebページおよびWebアプリケーションは、非常に多岐にわたる技術の集合体となっています。具体的に言えば、一般的なWebページに使われている技術だけでも、下記のものが挙げられます。

言語
HTML、CSS、JavaScript
データ管理
Cookie、Local Storage、Session Storage、Web SQL、IndexedDB
プロトコル
HTTP(S)
データ通信
XHR(Ajax)

例えば、一般的なプログラミング言語を用いた開発であれば、その言語用のデバッグツールを使ってデバッグを行います。しかし、Webページは使われる技術が多く、それぞれが重なりあって影響を及ぼしているため、単独のデバッグツールだけでは役に立ちません。そこで登場したのがDevToolsです。

DevToolsは、ブラウザがWebページを表示するまでに行われる処理を記録して、いろいろな情報を取得したり、データを変更したりできます。これにより、開発者はそれまで勘でしか判断できなかったブラウザの表示結果を、データで正しく認識できるようになり、何がどのような影響を与えているのかを把握できるようになりました。

つまり、Webページが正しく表示されないときは、DevToolsを見れば原因を特定できるようになったのです。

DevToolsの具体的な使用例

さまざまな情報を取得できるDevToolsですが、その情報を使ってどんなことができるのでしょうか? 私がこれまで行ってきた開発経験から、具体的な使用例を挙げてみましょう。

ここからの解説で使用するDevToolsは、筆者が現在利用しているGoogle Chrome(バージョン59に搭載されているものです。

表示崩れの原因を特定する

最も頻繁に行ってきたのは、Webページの表示崩れの原因特定です。

表示崩れを発見したときは、Elementsパネル要素調査ツールを使います。意図しない表示になってしまっているHTML要素に適用されているCSSを調べ、何が足りないのか、または何が余計なのかを把握して修正を行います。

JavaScriptのデバッグ

近年、JavaScriptのテスト環境もだいぶ整ってきましたが、それでもブラウザ上でのデバッグはまだまだ欠かすことができません。

Consoleパネルを使ってプリントデバッグを行ったり、Sourcesパネルからブレークポイントを設定してステップ実行したりして動作確認を行いながらコーディングを行います。

表示速度をチューニングする

ページの表示速度は、UXに大きな影響を及ぼすだけでなく、Googleのランキングにも反映されることが知られており、そのための調査ツール(PageSpeed Tools)も公開されています。

4PageSpeed Tools | Google Developers56

本格的に表示速度の改善(パフォーマンスチューニング)を行う場合は、DevToolsのNetworkパネルPeformanceパネルを使います。

[Network]パネルではページコンテンツのダウンロードと表示完了までのタイミングが、[Performance]パネルではページ上で実行されるスクリプト(JavaScript)処理の種類と実行時間がそれぞれ測定できるため、測定結果からパフォーマンスに悪影響を与えている要素を見つけて改善していきます。

DevToolsの概要

DevToolsは、ブラウザのコンテキストメニューから「検証」や「要素を調査」などで起動できます。キーボードショートカットは、macOSではcommandoptionIで、WindowsではF12(またはShiftCtrlIです。

起動したDevToolsは、下図のように表示されます。ウィンドウの上部には、ElementsからAuditsまで9つのパネル名があり、選択することで切り替え可能です。それぞれ便利な機能が備わっていますので、後ほど詳しく説明していきます。

7

DevToolsを起動したところ

パネルの切り替え以外の操作です。まず、左上の2つのアイコンは、左からそれぞれ「要素調査モード」と「デバイスモード」に切り替えるボタンになっています(下図)

8

「要素調査モード」と「デバイスモード」への切り替えボタン

要素調査モードをオンにすると、マウスでクリックしたHTML要素を[Elements]パネルに表示して、スタイルなどの情報を見たり編集したりできます。

デバイスモードをオンにすると、下図のようにChrome上でモバイル端末のエミュレートを行い、モバイル端末での表示を確認できます。

9

「デバイスモード」でモバイル端末をエミュレートする

右上の[]メニューをクリックすると、下図のメニューが表示されます。ここでは、DevToolsの表示位置をブラウザの左ペイン(デフォルト)から右や下に切り替えたり、ウィンドウから切り離すことができます。

10

表示(ドッキング)位置を変更できる

また、このメニューにある「Hide console drawer」という項目を選択、あるいはEscキーを押すと、上のDevToolsを起動した図で「What's New」が表示されている画面下のコンソールドロアー(console drawer)の表示・非表示を切り替えることができます。

9つのパネルを使いこなそう!

ここからは、DevToolsのウィンドウ上部にある「Elements」「Console」「Sources」「Network」「Performance」「Memory」「Application」「Security」「Audits」という9つのパネルの機能を順に解説していきます。

Elementsパネル

11
エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く