業務効率を上げる Chrome の小技6選！
D2C dot 開発部でフロントエンドエンジニアをしています、木村です。
先日、社内で開催しているナレシェアで、知っておくと便利な『Chromeの小技』を紹介したので、noteにもまとめてみました！
本記事では、Chrome ブラウザのキャッシュを完全にクリアする方法やアナリティクス送信などネットワークの見方、表示されているページのファイルをローカルのものに差し替える方法、など知っておくと確認が便利になる小技を6つご紹介します。
はじめに「Dev Tools」について
Chrome ブラウザを便利に使うために、今回「Dev Tools」（開発者ツール）を使っていきます。Dev Tools を使うことで、表示されているページのソースコードを確認したり、通信やパフォーマンスの測定ができたりします。
Dev Tools の起動方法
以下のどちらかの方法で起動ができます。
・右クリックメニュー → 「検証」を選択
・キーボードショートカット
Windows: F12、もしくはCtrl+Shift+I
Mac: Cmd+Opt+I
①ブラウザのキャッシュを完全にクリアする方法
ページを更新したとき、たまに表示されているデータが最新ではない場合があります。
データが最新でない場合はいくつか原因が考えられますが、まずブラウザのキャッシュクリアを試すことをおすすめします。
キャッシュとは？
ブラウザやサーバーの通信の際に、ファイルを一時的に保存し、総転送量を減らす仕組みです。
手順
1. Dev Tools を立ち上げる。
2. 「Network」タブの「Disable cache」にチェックを入れる。
3. 再読み込みを行う。
もしくは、Dev Tools を起動した状態で「再読み込み」ボタンを長押し。
「キャッシュの削除とハード再読み込み」を選択します。
②アナリティクス送信データの見方
Dev Tools を開いている間、そのタブの通信を全て見ることができます。
・Googleアナリティクスにちゃんとデータが送信できたか？
・不正なアクセスをしていないか？
などの確認が可能です。
手順
1. Dev Tools を立ち上げる。
2. 「Network」タブに通信記録が表示される。
アナリティクス送信データの見方
1. ドメインが www.google-analytics.com で collect?〜 から始まるファイルを探す。
2. ファイル名を押すとファイルの通信詳細が見られます。
3. 「Headers」の「Query String Parameters」でブラウザから Google Analytics へ送信した内容が確認できます。
4. 「t」 は発生したイベントの種類、「dl」 は URL、「dt」 はページタイトルになります。
送信するデータの形式については、Measurement Protocol のパラメータ リファレンスで確認できます。
③ブラウザで Web ページのスクリーンショットを撮る
Dev Tools から表示されているページのスクリーンショットを撮ることができます。
アドオン不要で、撮影する範囲も自由が利くので便利です。
手順
1. Dev Tools を立ち上げる。
2. Dev Tools の右上のメニューから「Run command」を選択する。
（もしくはショートカット Windows: Control+Shift+P、 Mac: Command+Shift+P）
3. 入力欄が出てくるので、「capture」 などと入力するといくつか候補が表示される。
capture の種類
Capture fill size screenshot：ページ全体を画像にする
Capture screenshot：いま見えている部分だけ画像にする
Capture area screenshot：画面をドラッグするとその範囲だけ画像にする
Capture node screenshot：「Element」タブで要素を選択し、その状態で Capture node screenshot を実行すると選んだ要素のみ画像にする
④オフライン・オンライン切り替え
回線状況が変わった時のサイトの動きを確認することができます。
手順
1. Dev Tools を立ち上げる。
2. 「Network」タブの「Online」から通信状況を切り替えることができる。
「run command」に「offline」や「online」と入力するだけても切り替えることができます。
⑤UserAgent 切り替え
UserAgent でサイトの挙動を振り分けているとき、ブラウザで UserAgent を偽装することができます。
また、この操作で画面サイズも機種のサイズになるので表示確認にも使うことができます。
（実際のブラウザは、URL バーなどがあるので画面はもう少し小さくなります）
手順
1. Dev Tools を立ち上げる。
2. 「device toolbar」を起動する。
3. ブラウザの設定バーからシミュレートしたい機種を選択する。
偽装したい機種がない場合、「Edit」から端末の追加や、独自 UserAgent の追加ができます。
⑥表示されているページのファイルをローカルのものに差し替える（ローカルオーバーライド）
ブラウザで表示されているページのファイルを、任意のローカルファイルに差し替えることができます。
サーバーにアップする前に更新したファイルの確認が可能です。
※こちらの方法はファイルの書き換えで、新規ファイルの追加はできません。
手順
1. 差し替えたいファイル（ソースコード）を用意する。
2. 差し替えたファイルを保存するディレクトリを用意する。
3. Dev Tools を立ち上げる。
4. 「Sources」タブの「Overrides」を選択する。
5. 「Select folder for overrides」から、(2)のディレクトリを指定する。
（Chrome からディレクトリのアクセス許可を聞かれたら許可する）
6. 「Sources」タブの「Page」から書き換えたいファイルを探す。
7. 6のファイルを、1で上書きする。この状態で上書きした内容はブラウザに反映されます。
8. ファイル名に ※ がつくので、保存（Windows: Control+S、Mac: Command+S）をする。
9. 保存したファイルが、2のディレクトリに保存される。
以上でブラウザで表示されているページのファイルの差し替えが可能です！
・・・
6点ご紹介しましたが、いかがでしたでしょうか？
制作・確認のお役に立てたら幸いです。
≪開発部木村 プロフィール≫
現在、D2C dot 開発部でエキスパートとして勤務。フロントエンドエンジニアとしてサイトの制作やアクセスビリティを考慮した開発を担当しています。
▼他にも開発ノウハウをQiitaに公開中です
https://qiita.com/organizations/d2cdot
D2C dotでは、一緒に働く仲間を募集しています。
ご興味お持ちいただけましたらご連絡ください！