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端末のリモートデバッグをすることができると示しました。

1. Chrome for Androidで動作
2. Androidの開発環境（Android SDK）をインストール
3. USBデバッグで接続
4. コマンド実行
   

   $> adb forward tcp:9222 local abstract:chrome_devtools_remote
   

5. 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には次のような便利な機能があると示しました。

• スニペットエディタ
• iOS端末のリモートデバッグ

スニペットエディタとは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はとても便利である」と講演を締めくくりました。

資料と動画もあわせてご覧ください。