「スマホサイトのチェックが面倒」「JavaScriptのデバッグが大変」そんなときに便利なのが、Google Chromeの「デベロッパーツール」です。Chromeデベロッパーツールを使いこなすと、Web制作の面倒な作業を効率化できます。
この連載では、nanapiのフロントエンドエンジニアである手塚 亮さんが、コーダーやデザイナー、ディレクターの仕事の「時短」に役立つChromeデベロッパーツールの活用法を紹介します（編集部）。
※本記事は執筆時点で最新のChrome 40を使用しています。
レスポンシブの表示確認は大変
レスポンシブWebデザインのWebサイトをコーディングしているときに面倒なのが、「ウィンドウサイズごとの表示結果の確認」ですね。端末によって異なる画面サイズをいちいち調べて、ウィンドウサイズを合わせて確認していてはかなり手間がかかります。
そんなとき、Chromeデベロッパーツールの「Device Mode」が使えます。
Device Modeの起動方法
Google Chromeを起動してChromeデベロッパーツールを開きます。Chromeデベロッパーツールは、MacではCmd + Option + Iキー、WindowsではCtrl + Shift + Iキーを押すか、ページ上で右クリックして「要素の検証」で起動できます。
枠で囲われている部分がChromeデベロッパーツールになります
Device Modeを有効にします。上記画面のスマートフォンのボタンを押すか、Macなら Cmd + Shift + Mキー、WindowsではCtrl + Shift + Mキーを押すと、Device Modeが有効になります。
ピンクの枠で囲まれている部分がDevice Modeのメイン画面
このままだと画面が上下に分割されていて作業しづらいので、「Dock to main window」ボタン（上記画面の青枠部分）を押して、「Developer Tools Bar」を右側に配置しましょう。
Device Modeを使ってデバイスごとの表示結果を確認しましょう。以下のサンプルページでは、メディアクエリーで400px以下では背景が白、767px以下では背景が水色、768px以上では背景が赤色になるように設定しています。
Device Modeの画面では、左上の「Device」から端末の種類を選べます。Deviceから「Apple iPhone 6 Plus」を選びます。
Device Modeの枠がiPhone 6Plusのサイズになり、幅が414pxになります。
続いて、「Device」で「Apple iPad 3 / 4」を選択してみましょう。
Device Modeの枠がiPad 3 / 4のサイズになり、幅が1024pxに設定されたため、背景が赤色になりました。上の画面の青色の枠内を見ると、無効になったメディアクエリーに打ち消し線がかかり、どのメディアクエリーが有効なのか確認できます。
Device Modeには一般的なデバイスは初期設定で登録されているので、レスポンシブWebデザインの確認が簡単にできます。また、より細かく確認したい場合は、ビューポートのサイズを直接入力したり、表示領域をドラッグしたりしても変更できます。
ユーザーエージェントの振り分けも簡単にデバッグしたい
画面サイズではなく、ユーザーエージェント（UserAgent）情報を利用してJavaScriptでデバイスごとに処理を分ける場合も、Device Modeで簡単にデバッグできます。
Device Modeを使ってJavaScriptを検証
先ほどは画面サイズ（ビューポート）だけに注目しましたが、実はDevice Modeを有効にして「Device」から端末名を選択すると、ブラウザーがWebサーバーに送信するユーザーエージェント情報も変更されています。
ページを更新して、ユーザーエージェントに応じたJavaScriptが実行されるか確認してみましょう。例として、AndroidもしくはiOSの場合にテキストが表示されるJavaScriptで検証します。
ユーザーエージェントに応じてJavaScriptが実行されました。このようにDevice Modeを使えば、簡易的なエミュレーターとして、デバイス別の処理をデバッグできます。
Device Modeでは、ウィンドウサイズとユーザーエージェントをエミュレーションするだけで、実際の機種での表示（レンダリング）をエミュレーションするものではありません。最終テストではなく、開発中の簡易的なチェックに利用しましょう。
紹介した機能まとめ
今回紹介した機能をまとめます。
Device Mode
デバイスのウィンドウサイズやユーザーエージェントを簡単にエミュレーションできる機能です。先ほどデバイスを選択したメニューの横のNetworkメニューを変更すると回線速度のエミュレーションなどもできます。Device Mode有効時にEscキーを押すと追加メニューが出てくるので、Emulationパネルを選ぶとデバイスの傾き・加速度などのエミュレーションも可能です。
デフォルトでさまざまなデバイスのウィンドウサイズやユーザーエージェント情報が登録されているので、使う前の準備が不要なのも特徴です。
また、Firefoxでも似たようなResponsive Design Viewという機能もありますが、ウィンドウサイズのエミュレーションのみとなっています。
◆
次回は、細かい修正での手戻りを減らして作業効率を格段に向上させる機能を紹介します。
