さまざまなWebブラウザと開発者向けデバッグツール

各Webブラウザの動作や表示の違いを確認するため、Webクリエイターに重宝されてきたWeb開発ツール。古くはWebブラウザのプラグインやエクステンションなどの拡張機能として提供され、Webクリエイターの開発ツールとして大きな役割を担ってきました。今回は、主要なWebブラウザで標準搭載されている開発者向けのツールをご紹介します。

Webクリエイター必携、さまざまな開発ツール

WebサイトやWebアプリケーションに必要とされる技術は年々複雑化しています。開発ツールを使いこなすことは、Webクリエイターの必須スキルとなりつつあります。Webブラウザの種類や動作端末も増え、開発ツールなしでは効率のよい作業は難しくなってくるでしょう。

古くはWebブラウザのプラグインやエクステンションなどの拡張機能として提供され、Webクリエイターの開発ツールとして大きな役割を担ってきました。今日では主要なWebブラウザが、標準で開発者向けの機能を搭載しています。開発者向けの機能の一例として、次のような機能があります。

■DOMツリーの確認・操作

Webページを構成するDOMを階層化して表示します。DOMツリー上の要素や属性値、要素に紐付いているスタイルを変更すると、Webブラウザ上の表示もオンザフライで書き換わります。

■ストレージの確認・操作

Webページで利用しているストレージ(IndexedDB, クッキー, アプリケーションキャッシュなど)の確認や削除を行うことができます。

■ネットワークリクエストの監視

Webページ上で発生したネットワークリクエストを監視し、リクエストの種類や応答時間を記録、可視化します。開発ツールによっては、リクエストの詳細情報(リクエストヘッダ、レスポンス内容など)も表示できます。

■JavaScriptのデバッグ

JavaScriptのコード中にブレークポイントを設定し、任意のタイミングで変数の値やスコープの範囲を確認できます。開発ツールによっては、1行1行スクリプトを実行する「ステップ実行」や、ミニファイされたJavaScriptを読みやすくする機能がサポートされています。

■コンソール

Webページに関する情報(ログ、警告、エラー)の表示や、JavaScriptコードの実行を行う作業領域です。

細かな使い勝手は異なりますが、現在リリースされている主要なWebブラウザでは、これらの機能が標準的にサポートされています。Webブラウザによっては、さらに使い勝手を改良したものや、別のアプローチで開発者向けに便利な機能を提供しているものもあります。

今回は「Internet Explorer」「Google Chrome」「Safari」「Firefox」で標準機能として提供されている開発者ツールを、簡単にご紹介します。

ここでの動作環境は次のとおりです。

●Windows 7
・Internet Explorer 11 (Release Preview)

●Mac OS X
・Google Chrome 30.0.1599.101
・Safari 6.0.5
・Firefox 24.0

最新バージョンのInternet Explorer 11は、Windows 8.1に同梱されています。Windows 7向けとして、執筆時点でRelease Previewが提供されています。

Internet Explorerの開発者向けツールは、F12キーで起動することから「F12 開発者ツール」と呼ばれています。

OS	ショートカットキー
Windows	F12

Internet ExplorerのF12 開発者ツールで提供されている機能は、次のとおりです。

機能の名前	概要
DOM Explorer	・DOMツリーの表示、オンザフライ編集 ・CSSスタイルの表示、オンザフライ編集 ・ボックスモデルの可視化、編集 ・各種プロパティ値の確認 ・イベントリスナの確認
コンソール	・Webページに関する情報の記録 ・JavaScriptの実行
デバッガー	・JavaScriptの表示 ・ブレークポイントの設定、ステップ実行 ・変数/オブジェクトの監視 ・例外の捕捉
ネットワーク	ネットワーク操作(HTTPリクエスト、クッキー、WebSocket)の記録・監視
UIの応答	・イベントごとのパフォーマンスを計測 ・レンダリングの種類ごとのパフォーマンスを計測
プロファイラー	JavaScriptで定義された関数や処理に要している時間を計測、確認
メモリ	・ヒープの監視、記録
エミュレーション	・viewportのエミュレート ・User Agentの変更 ・画面サイズ、向きの変更 ・位置情報のシミュレート

Internet Explorerは、バージョン8からF12 開発者ツールが利用できるようになりました。最新のバージョンであるInternet Explorer 11では、あらたに「GUIの応答」「メモリ」「エミュレーション」に関するデバッグツールがサポートされています。

古いバージョンのInternet Explorerは独特の挙動が多々あり、表示や動作の互換性を合わせるために多くのHackが誕生しました。バージョンを重ねるにつれ、より多くのWeb標準仕様に対応し、開発者ツールの機能も豊富になりました。ユーザはもちろん、Webクリエイターにとっても「やさしい」Webブラウザに進化しつつあると言えるでしょう。

Google Chromeには開発者向けのツールとして「デベロッパーツール」が付属しています。Google Chromeの設定メニューより、ツール > デベロッパーツールを選択して起動します。ショートカットキーを用いて起動することもできます。

OS	ショートカットキー
Windows	Ctrl + Shift + I
Mac OS X	Cmd + Option + I

Google Chromeのデベロッパーツールで提供されている機能は、次のとおりです。

OS	ショートカットキー
Elements	・DOMツリーの表示、オンザフライ編集 ・CSSスタイルの表示、オンザフライ編集 ・ボックスモデルの可視化、編集 ・各種プロパティ値の確認、編集 ・DOMブレークポイントの設定 ・イベントリスナの確認
Resources	ローカルデータ(IndexedDB, Web SQL, クッキー, アプリケーションキャッシュ, Web Storage)の確認、編集
Network	ネットワーク操作(HTTPリクエスト、クッキー、WebSocket)の記録・監視
Sources	・JavaScriptの表示、編集 ・ブレークポイントの設定、ステップ実行 ・変数/オブジェクトの監視 ・例外の捕捉
Timeline	・イベントごとのパフォーマンスを計測 ・レンダリングの種類ごとのパフォーマンスを計測 ・ヒープの監視、記録
Profiles	JavaScriptで定義された関数や処理に要している時間を計測、確認
Audits	・ネットワークに関連する改善点の調査、提案 ・Webページのパフォーマンスに関連する改善点の調査、提案
Console	・Webページに関する情報の記録 ・JavaScriptの実行
Mobile Emulation	・touchイベントのエミュレート ・viewportのエミュレート・User Agentの変更 ・CSS Media Typeのエミュレート

Google Chromeのデベロッパツールでは、DOMツリー上でブレークポイントの設定が可能な点や、開発者ツールの動作を定義するための設定画面が用意されているなど、細部にまでこだわったUIが特徴です。

このほか、提供されている開発者向けツールの中で特徴的なものとして、Auditsが挙げられます。Auditsでは、ボタンを押すだけで、Webページのパフォーマンスに関連する改善点や、ネットワークに関連する改善点の調査、提案を行います。

なお、Google Chromeは半強制的にアップデートが行われる仕組みになっています。使っていくと、ある日突然新しいWeb開発者向けのツールが表示されるようになったり、使い方が変更されることがあります。Google ChromeをメインのWebブラウザや開発ツールとして利用する場合は、Google Chrome Blogのチェックを忘れずにしておきましょう。

Safariには開発者向けのツールが付属していますが、初期状態では非表示となっています。Safariの設定メニューより、詳細 > メニューバーに"開発"メニューを表示にチェックを入れ、開発メニューを表示します。

以後、開発メニューが表示されるようになります。開発メニューより、Webインスペクタを表示を選択して起動します。

OS	ショートカットキー
Windows	Ctrl + Shift + I
Mac OS X	Cmd + Option + I

Safariの開発者向けツールで提供されている機能は、次のとおりです。

OS	ショートカットキー
Resources and the DOM	・DOMツリーの表示、オンザフライ編集 ・CSSスタイルの表示、オンザフライ編集 ・ボックスモデルの可視化、編集 ・各種プロパティ値の確認 ・イベントリスナの確認
Timelines	ネットワーク操作(HTTPリクエスト、クッキー、WebSocket)の記録・監視
Debugger	・JavaScriptの表示 ・ブレークポイントの設定、ステップ実行 ・変数/オブジェクトの監視 ・例外の捕捉
The Console	・Webページに関する情報の記録 ・JavaScriptの実行

Safariでは、開発者向けのツールがサイドバーを合わせて最大3ペインに表示できます。関連する情報をまとめて横並びに表示できることで、Resources and the DOMでのデザイン微調整時に効果を発揮します。Debuggerでは、コールスタックとスクリプト本文、変数の値をわかりやすくデバッグできます。

また、Webブラウザの[戻る][進む]に相当する機能が用意されており、それぞれの機能をまたいで1個前にみていたデバッグウィンドウの表示といった操作が可能です。

Firefoxでは、Web開発メニューから各種開発用のツールを起動します。

OS	ショートカットキー
Windows	Ctrl + Shift + I
Mac OS X	Cmd + Option + I

Firefoxの開発者向けツールで提供されている機能は、次のとおりです。

OS	ショートカットキー
Webコンソール	・Webページに関する情報の記録 ・JavaScriptの実行
スタイルエディタ	・CSSの表示、オンザフライ編集 ・CSSの有効、無効切り替え
デバッガ	・JavaScriptの表示 ・ブレークポイントの設定、ステップ実行 ・変数/オブジェクトの監視 ・例外の捕捉
プロファイラ	JavaScriptで定義された関数や処理に要している時間を計測、確認
ネットワークモニタ	ネットワーク操作(HTTPリクエスト、クッキー、WebSocket)の記録・監視
リモートデバッグ	USBで接続したAndroid版Firefoxで実行しているコードのデバッグ
Firefox OS Simulator	Firefox OSアプリをデスクトップ環境で実行、デバッグ
レスポンシブデザインビュー	レスポンシブデザインに対応したWebサイトの表示確認
スクラッチパッド	複数行に対応したJavaScriptの実行環境
ブラウザコンソール	・ブラウザ全体に関する情報の記録 ・JavaScriptの実行
開発ツールバー	・Graphical Command Line Interfaceの起動 ・Webコンソール、ページインスペクタ起動のショートカット
3Dビュー	・DOMツリーの構造を3Dで階層的に表示
Paint Flashing Tool	Webブラウザ上で再描画が発生した箇所を可視化

Firefoxは著名Web開発ツール「Firebug」が動作するWebブラウザです。今日では、Firefox本体にも豊富な開発者ツールが付属しています。標準的なWeb開発ツールに加えて、先進的な試みを多く行っているのが特徴です。

特徴的な開発ツールとして、「3Dビュー」「Paint Flashing Tool」が挙げられます。「3Dビュー」では、現在表示しているWebページのDOM構造を3Dで表示します。視覚効果を用いることで、要素が複数重なりあっているWebページの階層をわかりやすく確認できます。

「Paint Flashing Tool」では、Webブラウザ上で再描画が発生した箇所を可視化できます。サーバと常時通信を行い、画面を高頻度に書き換えるようなWebページにおいて、動作の遅い箇所を特定するのに役立ちます。

各Webブラウザに搭載されている開発ツールのマニュアル

Webブラウザに搭載されている開発者向けのツールを使用する際は、それぞれのベンダが公開している開発者向けのドキュメントや、開発ツールのマニュアルなども一読しておきましょう。ツールの使い方のみならず、アプリケーションの動作や仕組み、知識を体系的に学習することが可能です。

Using the F12 developer tools (Windows)

Chrome DevTools ― Google Developers

Safari Web Inspector Guide: About Safari Web Inspector

Firefox Developer Tools | MDN

Web開発者向けのツールは進化が速く、日本語に翻訳されたドキュメントはそう多くありません。ほとんどの情報が英語で書かれていますが、英語だからと言ってあきらめるのではなく、辞書やGoogle Translateなどの翻訳ツールを使って、最新のWeb開発ツールを体験してみましょう。

富田宏昭 Hiroaki Tomida
「株式会社キクミミ」でFileMakerやオープンソース言語などを用いた、Webアプリ開発 企業の業務改善のためのシステム開発や環境構築を行っている。主な著書に「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門」(マイナビ)など。