はじめに
検証ツール、皆さん使ってますか？
私は最近フロントエンドをメインで担当し始めて4ヶ月ほど経ちますが、検証ツールってほんとに便利だなと思うことが多々あります。
今回は、日々開発をする中で「これは外せない！」と感じた個人的な便利機能トップ3をまとめてみました！
要素選択ツール（Select an element）
画面上の要素をクリックするだけで、該当するHTMLやCSSを一発で確認できる機能です。
ショートカットキー：Cmd + Shift + C / Ctrl + Shift + C
主な用途：
1. 要素ごとのCSSスタイルの確認・一時的な書き換え
カーソルをかざすと要素のサイズ感やCSSのクラス名などが確認できます。
例えば以下の画像から、「株式会社アクトビ」の文字列は16px、カラーコードは#ECF5FFということがわかります。
2. padding や margin（余白）、要素のサイズの可視化
1で選んだ要素をクリックすることで、検証のスタイルタブでその要素にかかっているCSSを自動で表示してくれます。
例えば以下の画像から社名のある横長のエリアだと、右と左サイドに余白がありますが、paddingで検索すると40pxとあり、四角で表示されている部分でも、両サイド40pxになっていることがわかります。
また、スタイルタブだけでなく『Computed（計算済み）』タブを見ると、最終的に適用されている値が一目でわかります！
3. CSSのチェックボックスを付け外しして、デザインの見栄え（hoverやスタイルオフ時の挙動）をテスト
Styleのpaddingやcolor等にカーソルを合わせるとチェックボックスが表示されますが、ON/OFFで表示をリアルタイムに変更したり、40pxと記入されているところを直接60pxに書き換えて、一時的に変更することもできます。
どんな時によく使う？
- デザイン再現度のチェック：デザイナーの用意したUIデザインに対して、paddingの数字がズレていないか、カラーコードは間違っていないか、など細かくデザインを確認する時
- レイアウト崩れの調査：要素の重なりや固定表示（position: fixedなど）が意図通り動かない原因を特定する時（例えば、ボタンを画面下に固定したいけど、別の要素に重なっているとか）
💡 Point
デザインには意図やルールが存在します。「AIにキャプチャ送っていい感じに作ってもらったしOK！」にはならないです。
AIにコード生成を任せるだけでなく、検証ツールで細部まで崩れをチェックすることがUIのクオリティ向上につながります。
デバイスモード（Toggle device toolbar）
スマホやタブレットなど、さまざまな画面サイズでの見え方をブラウザ上で手軽に再現できる機能です。要素選択ツールの右隣にあるノートPCとスマホみたいなマークから切り替えができます。
主な用途：
1. iPhoneやAndroidなど、画面サイズ指定してデザイン崩れをチェック
具体的な数値を細かく入力してサイズを固定できます。
2. ”サイズ：”の右側のレスポンシブの部分をクリックして、端末ごとで変更
iPhoneやGalaxyなど使用ユーザーの多い端末の、画面サイズを選択できます。
3.画面上部の『スロットリングなし』メニューから回線速度の疑似変更
低速回線時（３Gや低速４Gなど）の挙動を確認できます。
どんな時によく使う？
- スマホファーストの画面開発：スマホ利用がメインの機能や、画面幅ごとにデザインが切り替わるレスポンシブ対応を実装・確認する時
- 画面サイズの崩れチェック：画面幅を伸縮させて、特定のサイズ（PC/タブレット/スマホ）でレイアウトが崩れていないか確認する時
💡 Point
サイトを作るときはスマホサイズのデザインを用意することが前提であることも多いので、実際にスマホ画面ではどう動くかをよくチェックします。ワンクリックで開発中の画面を瞬時にスマホ表示へ切り替えでき、レイアウト調整スピードは格段にアップします。
Network（ネットワーク）タブ
ブラウザとサーバー間の通信（APIのリクエストやレスポンス）をリアルタイムで監視できる機能です。
主な用途：
1. APIの送信データ（POST）と戻ってきたデータ（レスポンス）の確認
”すべて”、”Fetch/XHR”、”ドキュメント”などでフィルターを切り替えられます。私は基本PostとResponseを見ることが多いので”Fetch/XHR”にしています。
2. 404（Not Found）や500（Server Error）などのステータスコードによるエラー調査
エラー原因を分析する時に役に立つステータスコードも一覧で表示してくれます。クリックすると、そのAPIがPOSTなのかGETなのか、何を取得しているのかを確認できます。
例えば、以下の画像から”me”というAPIを選択すると、リクエストメソッドはGET、レスポンスで私のIDやusernameなどを受け取っていることがわかります。
3. APIの送信データをテスト用途などでブロックする
デバッグで、「APIをあえてブロックしたときにエラーハンドリングで正しく挙動するかどうか」を確認したい時などに使えます。いわゆる部分的にネットワークを遮断するような機能。
「右クリック→リクエストをブロック→ブロックリクエストのURL」を選択しリロードすることでブロックが可能です。
もとに戻したいときはまた同じルートで、「右クリック→リクエストをブロック→XXXのブロックを解除」で戻せます。
Zennからのお知らせを…
eventAPIブロックして…
意図的に消せました！
どんな時によく使う？
-
通信の切り分け調査：「ボタンを押したのにデータが変わらない」という時に、リクエストが送れているか、どんなレスポンスが返ってきているかの問題を調査する時
-
エラーハンドリングのテスト：オフライン状態や通信エラー（404, 500など）を意図的に再現して、画面上のエラー表示やバリデーションの動きをテストする時
💡 Point
画面の見た目だけでは追えない「目に見えない裏側の通信」を可視化してくれます。不具合調査だけでなく、ネットワーク遅延やエラー時の挙動テストまでブラウザ上で試すことができるのが魅力です！
まとめ
今回は、個人的によく使う検証ツールの機能トップ3をご紹介しました。
どの機能もこれからもお世話になるものばかりですが、検証ツールにはまだまだ自分の知らない便利機能がたくさん眠っていそうです。
「この機能も便利だよ！」「こういう使い方もあるよ！」というおすすめがあれば、ぜひコメントで教えていただけると嬉しいです✨️
Discussion