Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。
はじめに
メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。
しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。
そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。
DevToolの開き方
まずは DevTools の開き方です。Chrome 上で以下のコマンドを実行すると開くことができます。
- DevTool を開く:
cmd(ctrl) + alt + i - 検証状態で DevTools を開く :
cmd(ctrl) + shift + c
デバイスモード
DevTools の左上のツールバーのデバイスモードをクリックしてください。
画面の表示領域が小さくなるのでデバイスモードになったことがわかるとおもいます。
デバイスモードの内容
デバイスモードは以下の構成になっています。
デバイスモードにはいろいろな機能がありますがここでは筆者がよく使う機能に絞って紹介していきます。
エミュレートしたいデバイスを選択する
現在「Responsive」と書かれている部分をクリックすると数種類のデバイス名が表示されます。
選択するとそのデバイスの UA 、 画面幅 、デバイスピクセル比 、 入力方法（タッチ） がブラウザに反映され、そのデバイスでの表示を擬似的に確認することができます。
ただ、デバイスのすべてを再現することはできなく、反映されているのは選択したデバイスの一部の性質のみです。
あくまで擬似的なものなので、より詳細な確認をする場合には実機を使う必要があります。
ビューポートのスクリーンショットを撮る
バグの報告をする際やデザインの確認をする際などの場合にスクリーンショットを撮りたい場合があると思います。
その場合には Chrome のスクリーンショットを撮る機能を使うと便利です。
OSのスクリーンキャプチャ機能でも問題ない場合もありますが、この機能を使うと簡単にコンテンツ全体をピッタリ撮影することができます。
また、 Chrome 59 からはページ全体の（ブラウザの高さの問題で隠れている部分も含まれている）スクリーンショットを取る機能 も加わりました。
「Capture full size screenshot」を選択すると以下のようなページ全体のスクリーンショットを撮ることができます。
高さの都合上 footer の一部を削除しています。
デバイスのフレームを表示
iPhone や Andoroid 端末の一部でデバイスのフレームを表示することができます。
メニューにある「Show device frame」を選択すると一部の端末ではフレームが表示されます。
この機能を使用することで実際のデバイスでどのように見えているかの実感がよりつかみやすくなります。
また、この状態でスクリーンショットを撮るとフレームを含んだコンテンツのスクリーンショットを撮ることができます。
キーボードやナビゲーションバーの表示
Nexus 5 など一部のデバイスを選択している場合にはナビゲーションバーやキーボードを表示することができます。
メニューバー内の右端にあるデバイスを回転させるアイコンをクリックすると、対応しているデバイスではドロップダウンが表示されそこから表示することができます。
擬似的なものなのでキーボードを操作したり種類を変更したりすることはできませんが、レイアウトにどのような影響があり、ユーザーの目にどう映るのかを確認するのには効果的です。
回線速度のエミュレーション
モバイル端末ではその特性上、回線が安定していません。
開発中はデスクトップかつ回線が安定している環境ということが多いと思います。そのため、開発中にデスクトップで確認したときは問題がないのに、モバイル端末で見ると読み込みが非常に遅くなってしまっているというケースはよく聞く話しです。
DevTools には回線速度を遅らせる設定をすることができ、回線が安定していない状態でのエミュレーションを行うことができます。
ツールバーに表示されている「Online」を選択するとドロップダウンが表示されここから回線速度を選択することができます。
デフォルトでは「Online」となっていますが、他の項目を選択しページをリロードすると、設定された回線速度での読み込みがエミュレートされます。
あくまで Chrome 側で通信を遅らせているだけなので擬似的なものにはなりますが、回線が安定しない環境でレンダリングにどのような影響があるのかを簡単に把握することができます。
また、回線速度のエミュレーションは、Network パネルなど他の場所でも設定することもできます。普段はこちらで回線速度を設定することが多いです。
CPUのエミュレーション
モバイル端末も年々スペックが向上していますが、回線速度と同様に気になるのが CPU の速度の違いです。
特に昨今の JavaScript が多用されている複雑な Web アプリケーションの場合は JavaScript の解析・実行に CPU を使用してしまい、非力なデバイスでは時間がかかります。
JavaScript の負荷が高くなると他の処理ができずにブラウザが固まったように感じ、ユーザー体験が悪化する原因の一つとなってしまいます。
DevTools には CPU を非力な状態にするための機能が搭載されています。Performance パネルの歯車アイコンをクリックすると、先程の回線をエミュレートする機能や CPU のエミュレートを行う機能が表示されます。
ここで CPU を変更し、タイムラインを記録すると CPU がその分遅くなります。
ただ、この機能も回線のエミュレートと同様に厳密ではないです。特に設定方法が「○倍遅くする」と設定するため、使用しているマシンのスペックに依存します。あくまで目安として使用してください。
リモートデバッグで実機を接続して確認する
ここまで紹介してきた機能はあくまで Chrome DevTools が提供するエミュレーション機能です。細かい挙動の違いや再現できない実機の特性ももちろん存在します。
現在の Chrome では実際に実機で確認するために Android 上の Chrome と通信してデバッグを行うことができるリモートデバッグ機能が搭載されています。
実際にリモートデバッグを行う方法は様々なところで紹介されているのでここでは割愛しますが、実機で起こっている JavaScript のエラーの確認やデバッグが、デスクトップの Chrome と同様に DevTools で行う事ができます。
特にエラーが起きている端末などでデバッグしたい場合に役立ちます。
ここからはモバイル端末に限らず、web アプリ開発全般で使える機能を紹介します。
圧縮ファイルの展開
本番環境では JavaScript ファイルは圧縮しているためデバッグが難しい場合がよくあると思います。
その場合、DevTools の機能で展開したファイルにすることができます。
Sources パネルで圧縮されたファイルを開いている状態で左下にある {} マークをクリックすると圧縮されているファイルを展開できます。
この機能を使うことで圧縮されているJavaScriptファイルも簡単にデバッグできるようになります。
すべてのファイルを対象に文字列検索
現在開いているページで読み込まれている全ファイルを対象に文字列検索を行うことができます。
DevTools の下半分に表示されているパネルの三点メニューから Search を選択すると Search パネルを表示することができます。
この機能を使うことで検索した文字列がどのファイルで使われているかを簡単に検索することができます。
ファイルの検索
開いているページで読み込まれている JavaScript ファイルのデバッグを行いたいときに、ファイル名で検索して Sources パネルで開くことができます。
DevTools にフォーカスが当たっている状態で cmd(ctrl) + o を押すとファイル名で検索可能な検索ボックスが表示されます。
この検索ボックスにファイル名を入力することで簡単に希望のファイルを Sources パネルに表示することができます。
まとめ
Chrome DevTools には開発に役立つ機能が多く備わっています。
こういった機能を知っておくと開発の速度が向上するだけでなく、モバイル端末により近い環境で開発・デバッグを行うことができ、モバイル端末に優しいコンテンツを開発することができるでしょう。
使えそうな機能があればぜひ開発に取り入れてみてください。
明日14日は SRE チームの @masartz さんです。引き続きお楽しみください！
メルカリではフロントエンドエンジニアを募集しています！一緒に働ける仲間をお待ちしております。
