Google Chrome版Firebug:デベロッパーツール取扱説明書

第1回 詳説:デベロッパーツールの使い方

この記事を読むのに必要な時間:およそ 3 分

こんにちは,Google Chrome ExtensionsのAPI ExpertChromium-Extensions-Japan管理人を担当している,太田と申します。いつもはクロスブラウザで連載していますが,今回はGoogle Chromeのデベロッパーツールについて紹介します。

昨今のJavaScript,HTML,CSSブームの背景には,開発環境,特にFirebugに代表されるようなデバッグツールの目覚しい発展が大きく貢献していると思われます。その反面,高機能化するデバッグツールの各種機能を使いこなすことが難しくなってきているという現実もあります。そこで,今回から全4回でGoogle Chromeに搭載されているデベロッパーツールの使い方とそれを利用したデバッグ・チューニングのノウハウをお届けしたいと思います。第1回はデベロッパーツールの機能紹介と基本的な使い方を解説します。

なお,以前クロスブラウザJavaScript入門第2回 完全版:ブラウザとデバッグ環境にて各ブラウザの開発環境について紹介しています。各ブラウザそれぞれの開発環境が用意されているので,あわせてチェックしてみてください。

WebKit版FirebugのWebInspector

HTML/CSS/JavaScriptのデバッグツールといえば,Firebugが草分けでありデファクトスタンダードと言っても過言ではないでしょう。そんなFirebugを意識して作られたのがWebKitのWebInspectorです。WebInspectorのリリース当初はLive DOMビューア程度の機能しかありませんでしたが,現在ではJavaScriptデバッガのDroseraなどと統合され,Firebugにも勝るとも劣らない機能を備えた統合デバッグ環境へと成長しています。

Google ChromeではそのWebInspectorにデベロッパーツールという名前が付けられており,デフォルトで利用することができるようになっています。

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

まずはデベロッパーツールの起動方法です。デベロッパーツールは基本的にタブに対して1つのコンソールが付属する形になっていますので,まずデバッグしたいページをタブで開きます。続いて,マウス操作から起動する場合は,Chrome 5では右上のページアイコンから[開発]→[デベロッパーツール]を選択,Chrome 6では右上のレンチアイコンから[ツール]→[デベロッパーツール]を選択してください。もしくは,ページ内の適当な箇所で右クリックをすると,コンテキストメニューの一番下に「要素を検証」という項目があるはずです。その項目を選択してもデベロッパーツールが起動し,さらにマウスの下にある要素がハイライトされます(ただし,起動時はハイライトに失敗することがあるようです。起動してから再度「要素を検証」を選択すると確実にハイライトできると思います)。なお「デベロッパーツール」ではなく「JavaScriptコンソール」を選択しても同じくデベロッパーツールがコンソールタブが開いた状態で起動します。

またショートカットから起動する場合は,Windowsでは Ctrl+Shift+i(デベロッパーツール),Ctrl+Shift+j(JavaScriptコンソール)を,Macの場合は option+command+i(デベロッパーツール), option+command+j(JavaScriptコンソール)で起動することができます。

次の画像は右クリックからタイトルについて「要素を検証」してみたところです。

要素の検証

要素の検証

このように,デベロッパーツールはウィンドウの下に表示されます。そして,

デベロッパーツールのパネル

デベロッパーツールのパネル

この部分がデベロッパーツール内のタブであり,以下に示すそれぞれのパネルに切り替えることができます。

  • Elementsパネル(HTML・CSSの確認と編集)
  • Resourcesパネル(ネットワークの監視)
  • Scriptsパネル(JavaScriptのデバッグ)
  • Profilesパネル(JavaScriptのパフォーマンスチェック)
  • Storageパネル(Cookie, localStorageの確認・編集)
  • Timelineパネル(レンダリングを含めたパフォーマンスチェック)
  • Auditsパネル(YSlowのようなパフォーマンスチェックツール)
  • Consoleパネル(JavaScriptのコマンドラインツール)

またその右にあるのは検索ボックスで,ソースコード等からキーワードで検索を行うことができます。

また,デベロッパーツール下部の

<デベロッパーツールのフッター

デベロッパーツールのフッター

を見ると,左下のはデベロッパーツールを別ウィンドウに切り離すことができます。その右のはコンソールの表示非表示を切り替えます。さらにその右のは一度クリックするとマウスが要素選択モードになり,ページ側の要素をクリックしたときにその要素がハイライトされるようになります(一度ページ側をクリックするとそのモードは解除されます)。

コンソールを表示した場合は次のようになります。

コンソールの表示

コンソールの表示

コンソールの機能については後述します。

Elementsパネルの使い方

では,Elementsパネルの使い方から見ていきましょう。

HTMLツリービュー

まずは先程から登場しているHTMLツリービューです。HTMLツリービューではHTMLの構造を表示できるだけでなく,その場で編集することも可能です。編集モードに入るにはマウスでダブルクリックするか,次のように右クリックメニューから「属性の追加(Add Attribute)」「HTMLとして編集(Edit as HTML)」「HTMLタグとしてコピー(Copy as HTML)」「要素を削除(Delete Node)」などの操作を行うことができます(Chrome本体の開発状況により,日本語化されている場合とされていない場合があります。以降では日本語化されていない状態の画面で説明しています)。

画像

「Edit as HTML」を選択すると,次のようにその場で編集して,その場でその変更を確認することができます。

画像

なお,この編集はEnter(return)キーなどで確定されるまで実際の画面には反映されません。

画像

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入