普段からお世話になっているGoogleデベロッパーツール。
普通に使っているだけでも十分ですが、ちょっと便利な機能をまとめてみました。
基本的な使い方の部分は省略します。
デベロッパーツールの基本機能
フロントエンド開発では必須のツールかと思います。
タブの種類は下記項目があり、用途を簡単に書いておきます。
- Elements / 要素 (要素の調査・編集)
- Console / コンソール (JSの実行・ログの記録)
- Sources/ソース (ファイル表示・デバッグ・編集・ワークスペース)
- Network / ネットワーク (アクティビティログ・リソースの確認)
- Performance / パフォーマンス (サイトパフォーマンス計測)
- Memory / メモリ (メモリ使用量の詳細確認)
- Security / セキュリティ (コンテンツや通信、証明書の安全性の確認)
- Application / アプリケーション (ストレージやキャッシュ、画像,html...などのリソースを確認)
- Lighthouse （サイトパフォーマンスの表示・詳細）
環境
Big Sur 11.6.7
Chrome 102.0.5005.115
バージョンによっては使えないものもあるかもしれません
ショートカット
まずはよく使うショートカットキーから。
| アクション | キー |
|---|---|
| ツールを開く | Cmd + Opt + C |
| 最後に開いたパネルを開く | Cmd + Opt + l |
| ツールを開く+コンソールを開く | Cmd + Opt + J |
| コンソールをクリアする | Cmd + K |
| コマンドメニューを開く | Cmd + Shift + P |
| コンソールを追加で開く | esc |
Elements / 要素
■ スタイルの確認
改修案件で活躍してくれる「計算済みパネル」です。(最終的に何が当たっているかが見やすいです)
要素選択後、パネル下部の「計算済みタブ」選択で表示されます。
■ セレクタの取得
要素選択後に→右クリック→画像のように進めていきます。
下記がクリップボードにコピーされます。(idが付与されていればidが入ります)
document.querySelector("body")
Console / コンソール
■clearメソッド
ショートカットの「esc」と同じ
console.clear();
▼実行結果
■ errorメソッド
logメソッドよりも見やすくなります。(warnなど色々あります)
console.error('NG');
▼実行結果
■ tableメソッド
オブジェクトや配列が表形式に。
console.table(dbZ);
▼実行結果
Sources / ソース
■ コード整形
見たいファイルを選択後に画像の「{}」クリック。
minifyされたファイルを整形して見やすくしてくれます。
■オーバーライド
ローカルで確認作業している際に、変更したソースを検証ツール上だけでなく実際のファイルにも適用する方法です。
(勉強する際やファイル納品時の修正に割とよく使ってます)
下記画像のページタブ横の「>>」を押下後オーバーライドを選択
次に「オーバーライド用フォルダを選択」で紐付けるフォルダを選択
ブックマークバー下に表示される許可を選択
選択したフォルダが展開されますので、確認や変更したいファイルを編集します。
編集後は「Cmd + S」で保存することでローカルのファイルに反映されます。
■ デバッガ
処理動作の確認に使用します。
よく使われると思いますが、一応簡単に。
▼ブレークポイント
JSファイル選択後、行数クリックでブレークポイントの設置ができます。
(任意の箇所で処理を停止できる)
▼ステップ
左①：ステップの再開・停止
左②：「ステップオーバー」 → 処理を一行進める(次の関数実行前まで処理を進める)
左③：「ステップイン」 → 関数内部の処理を一行ずつ進める
左④：「ステップアウト」 → 実行中の関数から抜けて、処理を進める
左⑤：「ステップ」 → ステップインとの違いがわからず。。。
▼Scope / 範囲
上記のステップで関数内の処理を追ってる際に設定されている変数の値を参照できます。
Network / ネットワーク
■低速のネットワーク接続をシミュレート
低速時にどのような画面描画になるかを確認できます。
画像右下の「▼」をクリック
低速3G選択
ブラウザのリロードアイコンを長押し → 「キャッシュの消去とハードの再読み込み」を選択
■リクエストをブロック
普段使わないのですが、こんなことも出来るんだなと思ったので忘れないように書いておきます。
「Cmd + Shift + P」でコマンドメニューを開き、「ブロック」と入力後、下記画像部分を選択
下記画像の「パターンを追加」を選択
ブロックしたいファイルを追加し、ページリロードでブロックできます(今回はQiitaのTOPページのCSSをブロックしてみました。)
■Lighthouse
WEBサイトのパフォーマンスや改善点などを確認できます。
拡張機能もありますが、デベロッパーツールの方を使います。
画像部分を選択します
次にカテゴリ、デバイスを選択します。
カテゴリはレポートを作成する際の項目になりますので必要な項目を選んでください。(基本デバイスのみ変更すれば良いかと思います)
「レポートを作成」で下記画像のような画面が表示されます。
詳細レポートも表示されるので改善点などを知ることが出来るので重宝します。(個人的にはSPでレポート作成をします。(非表示要素があったりするので))
参考サイト
上記はGoogle公式サイトです。
デモが用意されているため、手を動かしながら使い方を学べるので非常に良きです。
また、Googleは毎月アップデートが入るので、新機能を知りたい方も是非チェックしてみてください。
今回は僕自身がよく使うちょっと便利な機能をまとめました。(今更ですが、普通の使い方だったらごめんなさい)
他にもちょっと便利な機能(めっちゃ便利な機能)があれば教えていただけると嬉しいです。