フロントエンド開発をしていると、ブラウザのデベロッパーツールをよく使います。
Chromeのデベロッパーツールで知っておくと便利な使い方をご紹介します。
目次
日本語化
デベロッパーツールを開き、右上の歯車 > 言語 で日本語を選択し、デベロッパーツールを開き直すと日本語になります。
![](https://dabohaze.site/wp-content/uploads/2024/07/3e5b0cf05eb4fb76fa2d33359d6b12ed.png)
![](https://dabohaze.site/wp-content/uploads/2024/07/ed504ee5066f17ed4c5df5dad512dc38.png)
画面遷移してもconsole.logを残す
変数や条件分岐でconsole.logを出して検証するということはよくあると思いますが、画面遷移をすると消えてしまいます。
コンソールタブ上部にある「ログを保持」をチェックをすると画面遷移してもログが消えずに残ります。
![](https://dabohaze.site/wp-content/uploads/2024/07/3660408c2d8c8f4321111afc3e529c2e-1.png)
画面遷移してもネットワークのログを保持
ネットワークタブで、APIのリクエストやレスポンスを確認したいこともよくあると思いますが、これも画面遷移をすると消えてしまいます。
ネットワークタブ上部にある、「ログを保持」をチェックすると画面遷移してもログが消えずに残ります。
![](https://dabohaze.site/wp-content/uploads/2024/07/a475df3862509b2306099ae3c29e334e-1.png)
ネットワークタブの行を大きく表示
ネットワークタブのログはデフォルトだと以下のように表示されます。
![](https://dabohaze.site/wp-content/uploads/2024/07/618df01682ed6ea0285049c7affb94e9.png)
Name列にはAPI名やファイル名が表示されますが、エンドポイントは行を選択してヘッダーを見ないとわかりません。
ネットワークタブ上部にある、「大きなリクエスト行」をタップすると、エンドポイントも表示されるようになります。
![](https://dabohaze.site/wp-content/uploads/2024/07/34dc7dd5a821f6d4817389ab5b271fe9.png)
![](https://dabohaze.site/wp-content/uploads/2024/07/612f178508359ccc0de7d515ac1faea3.png)
低速ネットワークでの確認
低速なネットワークの状態で、どのような挙動になるか確認したいこともあると思います。
ネットワークタブで、「スロットリングなし」をクリックし、「高速 3G」や「低速 3G」を選択すると低速なネットワークでWebアプリの挙動を確認できます。
![](https://dabohaze.site/wp-content/uploads/2024/07/6ee307f53ea09d242e803257fcb69a1d-1.png)
![](https://dabohaze.site/wp-content/uploads/2024/07/cee27059e75174ae7a0912e6581144a8-1.png)
ローカルストレージ、セッションストレージ、Cookieの確認
ローカルストレージ、セッションストレージ、Cookieは、アプリケーションタブから確認できます。
![](https://dabohaze.site/wp-content/uploads/2024/07/8cfd37924d2c8960d27547307f3eeca9-1.png)
IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです!
![にほんブログ村 IT技術ブログへ](https://b.blogmura.com/it/88_31.gif)