みんな使っている Chrome DevTools。 Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。
ここでは、その中から10個とりあげてみます。 Chrome DevTools の画面の開き方など基本的なことには触れないので 参考情報 を見てください。
1. Cookieの表示・削除、JavaScript・Flashなどの有効・無効の切替
まずは DevTools を使わなくてもできることから。 Cookie を確認したり、noscript タグの表示を確認するのに、いちいち設定画面を開いていませんでしたか？（自分もそうでした...） URL の隣にある (i) や [保護された通信] をクリックすると出てくるメニューを使うと簡単に確認や設定変更ができます。他にもいろいろと設定は変えられるので、画像を OFF にしてテキストブラウザの気分を味わうこともできますね！
[caption id="attachment_3860" align="aligncenter" width="791"]
Cookie の表示・削除、JavaScript・Flash などの有効・無効の切替[/caption]
2. 隠し設定の変更・隠し機能の表示
こちらも DevTools ではありませんが、URL に chrome://flags と入力すると隠し設定が変更できるようになっています。 Chromium Projects や WICG/interventions などで議論されている将来の機能追加や仕様変更をいち早く試すことができたりしますが、設定を変更して遊んだ後は [すべてデフォルトに戻す] ボタンを押すのを忘れずに。そうしないと「なぜか自分の Chrome だとサイトがきちんと表示されない」という事態が発生します...
[caption id="attachment_3866" align="aligncenter" width="791"]
chrome://flags[/caption]
Chrome で使える特別な URL は他にもたくさんあり、URL に chrome://chrome-urls と入力すると一覧を見ることができます。
[caption id="attachment_3867" align="aligncenter" width="791"]
chrome://chrome-urls[/caption]
3. 表示に使われているHTMLを確認する・HTMLの表示場所を確認する
これはよく知られている機能です。 DevTools の [Elements] を開いた状態で左上の矢印をクリックすると、サイトの表示が HTML のどの Element に対応するのか、Element がサイト上のどこに表示されるのか確認できます。 ここで Tips を1つ。右側で選択した Element が左側のページ表示で見切れているときは、右クリックして [Scroll into View] を選ぶと、表示するまでスクロールします。
[caption id="attachment_3868" align="aligncenter" width="791"]
表示に使われているHTMLを確認する・HTMLの表示場所を確認する[/caption]
4. コンソールを使って JavaScript の変数確認
[Console] では JavaScript の変数値を確認することができます。ここではカーソルのある Element 上での実行結果が表示されるため、iframe 内部の変数の確認もできます。 また、コマンドライン API リファレンス にあるように、コンソールにはいろいろと便利な関数が用意されていて、セレクターで要素を選択したり、データを表形式で表示する、といったこともできます。
[caption id="attachment_3870" align="aligncenter" width="791"]
コンソールを使って JavaScript の変数確認[/caption]
5. 圧縮されている JavaScript を整形してデバッグ
本番環境でしか起こらない問題を調べようとしたら、JavaScript が圧縮（minify）されていた...ってこと、ありますよね。 [Sources] で {} のボタンを押すと圧縮を解除できます。圧縮を解除した状態で、ブレークポイントを置いてデバッグすることもできます。
[caption id="attachment_3871" align="aligncenter" width="791"]
圧縮されている JavaScript を整形してデバッグ[/caption]
6. DOM が変更されたタイミングでブレークポイント
他の人から引き継いだコードだと「HTML のこの部分をどの JavaScript が更新しているかわからない」ことってありますよね。 DOMブレークポイントを使えば見つけられます。[Elements] の画面では変更された部分の色が変わるので、ブレークポイントを置きたい Element にカーソルを置いて右クリックから [Break on...] で表示される [subtree modifications] [attribute modifications] [node removal] のどれかを選択。次に変更されたタイミングでデバッグ画面になります。
[caption id="attachment_3872" align="aligncenter" width="791"]
DOMが変更されたタイミングでブレークポイント[/caption]
7. リダイレクトしてもログが残るようにする
ネットワークの調査をしているときに、リダイレクトやページ移動する前のログを見たいことってありますよね。[Network] で [Preserve log] にチェックを入れるとページ移動する前のネットワークログが残るようになります。
[caption id="attachment_3874" align="aligncenter" width="791"]
リダイレクトしてもログが残るようにする[/caption]
8. ネットワーク帯域幅制御や User Agent の変更
[Network conditions] では、帯域幅やキャッシュの有効・無効、User Agent の変更ができます。User Agent は [device toolbar] でも変更できますが、こちらの方が選択肢が多く Windows の Edge や IE、Opera も選択できるようになっています。 また、完全に表示されるまでの表示途中のスクリーンショットを連続して撮ることもできます。
[caption id="attachment_3875" align="aligncenter" width="791"]
ネットワーク帯域幅制御や User Agent の変更[/caption]
9. 全ファイルを検索
[Search] では、サイトで使われている全ファイルを検索ができます。正規表現での検索や大文字・小文字の区別もできます。
[caption id="attachment_3876" align="aligncenter" width="791"]
全ファイルを検索[/caption]
10. スマホ・タブレットの枠付きでスクリーンショットを撮る
上司から「スライドのここにスマホとタブレットの絵を入れといて！」って言われた人、スマホやタブレットの枠を自分で作っていませんか？ [Show device frame] でデバイスの枠を表示させて [Capture screenshot] で枠付きの画像を保存できます。資料作成が楽になりますね！
[caption id="attachment_3877" align="aligncenter" width="791"]
スマホ・タブレットの枠付きでスクリーンショットを撮る[/caption]
