2013年3月21日、第37回のHTML5とか勉強会はNTTアドバンステクノロジ株式会社 さんに会場をお借りして開催しました。
今回は「ビギナー向けデバッグツール特集」をテーマとして、Chrome、Safari、Firefox、Internet Explorerに付属している各開発者ツール、またAdobe Edge Inspectについて取り上げました。
本稿では、その内容についてレポートします。
Chrome DevTools for beginners
Chromeの開発者ツールについてhtml5j.org の吉川さん から紹介いただきました。
Chromeの開発者ツールは、Chromeの右クリックメニューにある「要素の検証」等で起動することができます。
まずは基本的な設定の方法をいくつか紹介しました。
ツールの左下にあるボタンをクリックか長押しすると、ツールの表示位置をブラウザの下部か、右側か、もしくは別ウィンドウで表示するかを選択することができます。また、3月30日現在、ChromeのCanaryビルドで右側にツールを表示させると、スタイルなどが下部に表示されるようになり見やすくなっています。
ツールの右下にあるボタンをクリックすると、設定メニューが現れます。ここでは「キャッシュを無効する」「 Ajaxの通信をログ表示する」といった細かな設定を行うことができます。
Chromeの開発者ツールにはとても多くの機能がありますが、本講演ではその中のElementsパネルの機能を中心に解説しました。Elementsパネルでは、HTMLの要素やスタイルの内容の確認や編集を行うことができます。
ElementsパネルのHTML要素の上にマウスをのせると、ページ上のどの要素が対応しているかを確認することができます。また、虫眼鏡のアイコンをクリックすると「インスペクタモード」になり、インスペクタモードでページ上の要素をクリックするとElementsパネルの中の対応するHTML要素に飛ぶことができます。
デバッグしたい要素を見つけた後は、Elementsパネルの中の要素をダブルクリックするか、F2キーを押すことで編集を行うことができます。「 h」キーを押して要素の属性をhiddenにしたり、「 Del」キーで要素を削除したりなど、ショートカットも充実しています。
スタイルもHTMLと同様にリアルタイムに編集を行うことができます。数値の変更を行うときは上下キーで値を増減できますが、さらに次のようなショートカットもあります。
「Shift」キーを押しながらだと±10ずつ増減
「Alt」キーを押しながらだと±0.1ずつ増減
講演の終盤ではモバイルのデバッグ方法について紹介しました。
モバイルのデバッグには、モバイル環境をエミュレートする方法とリモートデバッグを行う方法があります。Chromeでは設定のOverridesメニューでUser AgentやScreen resolution、Geolocationなどを書き換えることでエミュレートを行うことができます。
また、次の要領でAndroid端末のリモートデバッグをすることができると示しました。
Chrome for Androidで動作
Androidの開発環境（Android SDK）をインストール
USBデバッグで接続
コマンド実行
$> adb forward tcp:9222 local abstract:chrome_devtools_remote
Chromeでlocalhost:9222を表示
最後に、「 Chromeの開発者ツールを使うと開発効率が飛躍的に向上するので、ぜひ使ってみてほしい」と述べ、講演を締めくくりました。
詳しくは資料 と動画 をご覧ください。
本講演はビギナー向けでしたが、3月28日（機材トラブルにより4月2日に再録）に開催されたGoogle Developers Live（Chrome+HTML5 Developers Live Japan #3）において中級者向けの使い方を吉川さんが解説しました。こちらのイベントの資料 と動画 もあわせてご覧ください。
Debug in Safari
続いてhtml5j.org の中島さん から、Safariの開発ツールを紹介いただきました。
Safariの開発ツールの使い方は概ねChromeと同じということで、本講演ではChromeの開発ツールと異なる部分を中心に説明がありました。
SafariではChromeの開発ツールと比較して、次のような点で異なります。
JS/CSSの編集ができない
カラーピッカーが出ない
minifyされたJSの展開ができない
touchイベントがエミュレートできない
日本語が含まれると行番号がずれる（CSSで修正可能）
以上のように、Chromeで可能なことがSafariではできない場合がいくつかあるとのことです。
しかし、Safariには次のような便利な機能があると示しました。
スニペットエディタとはHTMLのリアルタイムプレビューができるツールで、レイアウトを新たに組みたいときなどにすぐに試せる便利な機能です。
また、Safari 6とiOS 6の組み合わせではリモートデバッグを簡単に行うことができます。まずiOS端末側で「設定>Safari>詳細」でWebインスペクタをオンにし、iOS端末とMacをUSBで接続します。後はiOS端末でSafariを開き、Mac側のSafariの「開発」メニューでデバイスを選択すれば、iOS端末のリモートデバッグを行うことができます。
さらにデバッグや表示確認を行う際は、iOSシミュレータを使うと便利であると紹介しました。iPhoneやiPadなどの各iOSデバイスや、OSのバージョンを選択してシミュレートを行うことができます。
講演の終盤ではSafariの隠されたデバッグツールについて言及しました。
ターミナル上で次のコマンドと実行すると、Safariに「Debug」というメニューが追加されます。
defaults write com.apple.Safari IncludeInternalDebugMenu 1
これにより様々な統計情報の取得や、細かな設定を行うことができるようになります。
まとめとして、「 JavaScriptやCSSのデバッグをする場合は他のブラウザがおすすめだが、iOS端末のデバッグにはSafariはとても便利である」と講演を締めくくりました。
資料 と動画 もあわせてご覧ください。
Firefoxでデバッグ
次にMozilla Japan の浅井さん より、Firefoxのデバッグツールを紹介いただきました。
Firefoxの開発者ツールは右クリックメニューの「要素を調査」から開くことができます。この開発者ツールはメニュー、説明やエラーメッセージなどがすべて日本語で表示されています。
ツールのスタイルパネルの「計算済み」というタブにある「？」というアイコンをクリックすると、MDN（Mozilla Developer Network） のCSSのリファレンスに飛びます。このサイトではCSSのプロパティの説明や、例文、各ブラウザでの実装状況などを確認することができます。
またFirefoxの開発者ツールには「3Dビュー」というボタンがあり、これを押すとDOM構造を3Dで可視化させることができます。
浅井さんは『テクノロジーの無駄遣い』と表現していましたが、とても面白い機能ですね。興味がある方はこちら やこちら のサイトを「3Dビュー」でご覧ください。
続いてコマンドラインを説明しました。「 開発ツールバー」で表示されるコマンドラインを使うと、さまざまな処理をCUIで行うことができます。補完も効くため、「 h」と入力し「tab」キーを押せばhelpと補完され、コマンドの一覧を得ることができます。
次のようにscreenshotというコマンドを使用すると、指定のDOM要素のみのスクリーンショットを取ることができます。
screenshot --selector <セレクタ>
また、スクラッチパッドというツールでは、JavaScriptを実行し結果を検証することができます。スクリプトの範囲を選択して実行ということもできるため、コードをいくつも実行するというときにとても便利な機能とのことです。
講演の後半ではFirefox OSのデバッグ方法を紹介しました。
Firefox OSのシミュレータとして、Firefox OS Simulatorというアドオンが用意されています。
また、Building Firefox OS というサイトでは、CSSがダウンロードできるようになっており、例示されているHTMLコードを使うとすぐにFirefox OS向けのアプリケーションのデザインが作れるようになっているとのことです。
詳しくは資料 と動画 をご覧ください。
今から使える！ Internet Explorer 10 F12 開発者ツール
続いてMicrosoft の物江さん より、Internet Explorerの開発者ツールについて紹介いただきました。
Internet Explorerの開発者ツールはInternet Explorer上で「F12」を押すことで起動できます。このツールはInternet Explorer 8以降に標準搭載されているとのことです。
Internet Explorerの開発者ツールもすべて日本語化されています。
ツールの中にはHTMLやCSSというタブがあり、そこで現在のページのHTMLやスタイルを編集すると、リアルタイムに結果を確認することができます。また「Ctrl-S」で編集した結果をすぐに保存することもできます。アイコンがWindowsでよく見るものが使用されているため、直感的で分かりやすいです。
スクリプトタブの中では、スクリプトのステップ実行や、変数やオブジェクトの内容の確認を行うことができます。構成ボタンの「JavaScriptの書式設定」を選択すると、minifyされたJavaScriptにインデントを入れて表示することができます。
ドキュメントモードというメニューでは、歴代のInternet Explorerのレンダリングルールでページを表示することができます。ただしレンダリングエンジンは現在のブラウザのものとなるため、実際の昔のInternet Explorerの表示とはならないとのことです。
また検証メニューでは、現在のページのHTMLやCSSが正しく書かれているかを調べることができます。検証処理自体はツール内ではなく、W3Cなどが提供するサービスのページに転送し、そこで検証を行っているとのことです。
イメージメニューには、現在のページで使われている画像を一覧で表示できる「イメージレポート」という機能があります。画像のURLやサイズ、ファイルサイズやalt属性の値を見ることができます。
詳しくは物江さんが書いた記事 をご覧ください。動画はこちら になります。
Adobe Edge Inspectを利用してデバッグ
最後にアドビ システムズ の轟さん より、Adobe Edge Inspectを使用してのデバッグ方法について解説していただきました。
Adobe Edge Inspectはモバイルサイトをリモートで検証するためのツールです。同一ネットワーク上に母艦となるPCとモバイルデバイスがあれば、無線で接続するだけで使うことができ、複数デバイスを一度に扱うことができます。
Edge Inspectの特徴として、次の3つが挙げていました。
リモートでブラウジング
リモートでデバッグ
リモートでスクリーンショット
接続されたモバイルデバイスは、母艦PCのブラウザ上の画面遷移を追従します。また、ブラウザの開発者ツールでスマートフォン上のWebページの検証を行うことができます。デモでは、開発者ツール上でHTMLを書き換えた結果が、リアルタイムでモバイルデバイスに反映されていました。
さらに、一度に接続しているすべてのデバイスのスクリーンショットを取り、それを母艦PCに送信することもできます。スクリーンショットのpngファイルとともに、デバイスや表示Webサイトの情報が記されたtxtファイルも一緒に送られるため、デバイスとスクリーンショットの対応が取りやすくなっています。
現時点で母艦PCのブラウザはChromeにのみ対応しているとのことです。
講演の後半では、Edge Inspect以外のツールを紹介しました。
Edge Reflowというツールは、レスポンシブWebデザインをコーディングせずに作れるというツールで、現時点ではプレビュー版のみとのことです。Edge Inspectと連携することで、Edge Reflowで開発中の画面をモバイルデバイスでリアルタイムに確認することができます。
Edge Inspectは同時接続数が1つのみという機能制限がありますが、無償で使用することができます。Edge AnimateやEdge Codeなど、その他の無償で提供されているツールについても紹介がありました。
詳しくは資料 と動画 をご覧ください。
最後に
レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら、twitter（@sakkuru ）まで気軽につぶやいていただければと思います。
本勉強会は毎月第3水曜日、または第3木曜日に開催していますので、興味を持たれた方はぜひ参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。
開催のアナウンスはhtml5jのML で行われますので、こちらをご確認ください。また、コミュニティサイト も公開していますので、ぜひこちらもご覧ください。
