Chrome DevTools の知っておくと便利かも機能

長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。
様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。
この記事は Corome DevTools 公式 を参考にしています。

日本語化

英語が苦手な方は日本語化しましょう。

手順

1. DevTools を開いたら、歯車マークをクリック
   

2. Language で日本語を選択
   

3. [Reload DevTools] をクリックして DevTools のリロードをする
   

要素の状態を強制

指定の要素を :hover や :focus などの状態に強制的にすることができます。
そうすることで指定状態時のスタイルを確認することができます。

手順

1. 要素タブをクリックする
   

2. 状態を変更したい要素を選択する
   今回は Google の検索フォームを選択
   

3. [:hov] をクリックする
   

4. 強制したい状態のチェックボックスにチェックを入れる
   :hover を選択すると 選択要素が hover 状態となり、hover スタイルが適用されていることがわかる
   

location のエミュレート

location を指定することにより、リクエストヘッダの accept-language 、js で扱う日付のタイムゾーンなどを変更することができます。

手順

1.「その他のツール」→「センサー」を選択する

1.場所セレクトボックスで国を選択すると、その国のタイムゾーンに変更される

ネットワークスピードのエミュレート

ネットワークスピードによるサイトの描写時間の測定や、動画配信の画質の切り替え確認などに便利です。

手順

1.「その他のツール」→「ネットワーク状態」を選択する

1. ネットワークスロットリング選択ボックスでプリセットを指定することで、ネットワークスピードをエミュレートすることができる
   

2. 選択ボックスでカスタム追加を選択することにより、プリセット以外の速度でエミュレートも可能
   

リクエストのブロック

指定した URL に対するリクエストをブロックすることができます。
社内のセキュリティでアクセスがブロックされている場合の想定や、サーバーへのリクエスト未到達時のページの挙動を確認する際に便利です。

手順

1. 「その他のツール」→「ネットワークリクエストのブロック」を選択する
   

2. [+]マークをクリック
   

3. ブロックしたいドメインや URL を入力し、「追加」ボタンをクリック
   

4. リストに追加されることで、その URL に対するリクエストがブロックされる
   

リモートデバッグ

Android 端末の Chrome では DevTools を開くことができず、HTML の構造や js のデバックを行うことができません。
リモートデバッグを使えば、Android 端末の Chrome でアクセスしたサイトを PC でデバッグし、HTML の構造や js の確認を行うことができます。

手順

1. Android 端末の「設定」→「デバイス情報」→「ビルド番号」を7回タップし、開発者モードを ON にする
   

2. Android 端末の「設定」→「システム」→「開発者向けオプション」で「USBデバッグ」を ON にする
   

3. PC 側の Chrome で「chrome://inspect/#devices」にアクセスする
   

4. 「Discover USB devices」が ON になっていることを確認
   

5. Android 端末 を USB で PC に接続する

6. PC 側の Chrome に 接続した端末名が表示されていることを確認（ちょっと時間かかる）
   

7. Android 端末の Chrome で任意のサイトにアクセスする

8. PC 側の Chrome の端末名の下に上記でアクセスしたサイトが表示されるので、「inspect」をクリックする
   

9. するとPC 側 で Android 端末の画面と DevTools が表示されているウィンドウが起動する。