Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？
この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。
スクリーンショットをキャプチャする
端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。
特定のノードのスクリーンショットをキャプチャする
- Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します
- ノードを右クリックして「Capture node screenshot」をクリックします
- 選択したノードのスクリーンショットがダウンロードフォルダに保存されます
ローカルで実装中のコンポーネントの見た目など、パッとUIを共有したいときに便利です。Cmd + Shift + 4しなくても綺麗にノードだけをキャプチャすることができますね。
フルサイズのスクリーンショットをキャプチャする
専用の拡張機能なども作られていますが、開発者ツールだけで実行可能です。
- 開発者ツールを開いた状態で
Cmd + Shift + Pを入力し、コマンドパレットを開きます - 「Capture full size screenshot」を実行します（「full」まで入力するとサジェストされます）
- フルサイズのスクリーンショットがダウンロードフォルダに保存されます
モバイルデバイスをシミュレートする
開発者ツール上部の「デバイスツールバーを切り替え」ボタンからデバイスツールバーを表示できます。
ビューポートをシミュレートする
デフォルトでは「レスポンシブ」が選択されていますが、Dimensionsプルダウンを選択することで特定のモバイルデバイスのサイズをシミュレートできます。
ネットワークとCPUをスロットリングする
開発者が使用している端末はユーザの端末より高性能であることが多いため、CPUやネットワークのスロットリングを行うことで激弱CPU・激遅ネットワークでの動作を検証することができます。
デバイスツールバーの「No throttling」をクリックするとリストから選択してスロットリングを行うことができます。
- Mid-tier mobile
- 高速の3Gをシミュレートし、通常の4倍遅くなるようにCPUをスロットリングします
- Low-end mobile
- 低速の3Gをシミュレートし、通常の6倍遅くなるようにCPUをスロットリングします
CPUのみ、ネットワークのみをそれぞれスロットリングすることも可能です。それぞれPerformanceパネルとNetworkパネルから行うことができます。
複数デバイスを同時に確認する
レスポンシブ対応中にPC表示↔︎モバイル表示を切り替えながらデグレが発生していないか確認するのは大変です。
Resposive Viewerという拡張機能を使うと、複数のデバイスでの見た目を同時に確認することができます。クリック・タップした際の遷移やスクロールも各デバイスで同期するので大変見やすいです、おすすめです！
擬似クラスが当たっている場合の見た目を確認する
ホバーされている状態やアクティブな状態な要素の見た目を確認したいと思ったことはないでしょうか？ホバーされている間だけ表示されるツールチップのDOMを開発者ツールで確認したいときに、開発者ツールにマウスを動かしたらツールチップが消える...みたいな経験ありますよね。
Stylesタブの「Force element state」から選択しているノードが特定の状態になっていることを強制できます。
👇では右上の「投稿する」ボタンの:hover状態を開発者ツールから切り替えています。:hoverにチェックを入れると色が変わっていることが確認できます。
CSSが適用されない理由を調べる
Stylesタブで当たっているスタイルを確認することができますが、Stylesタブには👇のようなスタイルが全て表示されていて最終的にどんなスタイルになっているかがわかりづらいです。
- ブラウザのデフォルトスタイル
- 親要素から継承しているスタイル
- HTMLタグが元々持っているスタイル
- 何らかの理由で無効になっているスタイル
計算済みのスタイルを見る
Computedタブにはそのようなスタイルの継承・詳細度などさまざまな要素を勘案した結果、最終的に当たっているスタイルだけが表示されます。そのため想定通りのスタイルになっていない場合、そもそも当てたいスタイルがその要素に当たっているかどうかを確認することができます。
width: 100%のように相対的な値を指定しているプロパティも768pxのように計算された値が表示されるため、どういうスタイルになっているかがパッとわかります。
無効になっているCSSを探す
先述の通り、Stylesタブには無効になっているスタイルも表示されます。「Computedタブを見て狙ったスタイルが当たっていないのは分かったけど、何で当たっていないのかがわからない」ということもあると思います。
Stylesタブでは無効になっているスタイルなどの表示が微妙に変わっており、簡単に原因を特定できる場合があります。
無効になってしまっているスタイルの表示は以下の3通りです。
-
そもそも構文が誤っており無効になっているスタイル
例）padingのようにtypoがあるとこのように表示されます。
-
他のプロパティにオーバーライドされているために無効になっているスタイル
例）<div>と子要素の<span>両方にfont-sizeが指定している場合、子要素のfont-sizeが優先されるため<div>のfont-sizeがこのように表示されます。
-
他のプロパティとの兼ね合いで無効になっているスタイル
例）position: staticなのにtop: 0を指定している場合、position: staticの要素にtop: 0を指定することはできないためtop:0がこのように表示されます。
ややこしいですが淡い色で表示されているプロパティを全て無視して良いわけではありません。
👇のような違いがあるので、勘違いしないようにしましょう。
- 淡い色 +
iというツールチップあり- 無効になっている
- ツールチップにホバーすると無効になっている原因が表示される
- 淡い色 +
iというツールチップなし- その要素にプロパティが設定されているわけではないが見た目に影響を与えているプロパティ
- 例）親要素に設定されている
marginなどの子要素に継承されるわけではないが子要素に影響を与えているスタイル
CSSアニメーションをスロー再生する
CSSアニメーションの動きはユーザが気にならないくらいの速度に設定することが多いため、通常の速度で細かい動作を視認するのは難しい場合があります。
開発者ツールの「ミートボールメニュー > More tools > Animations」と進んでAnimationsタブを開きます。
ページ内のCSSアニメーションが記録され、クリックすることで繰り返し再生することができます。
このとき「100%, 25%, 10%」から任意の値を選択することでスロー再生を行うことができます。
また、アニメーションのバーをドラッグすることでアニメーションを任意のスピードに変更することができます。どのくらいの秒数がちょうど良いか確認するときにCSSを修正してホットリロードを行うよりも早く確認できそうですね。
ページのCSSの改善点を教えてもらう
-
開発者ツール > ミートボールメニュー > More tools > CSS overviewをクリックします
-
「Capture overview」をクリックします
-
開いているページのCSSについてのレポートが生成されます
使用されている色などが一覧表示されるため、本来使用するべきでない色が混じってしまっていないか確認できたり、コントラストが低すぎる場合は警告が出るようになっています。
また、使用されていないCSSについても警告が出るようになっているためページの改善に使用できます。
Chrome96で登場し、まだ実験的な機能とされていますが便利です！
要素の重なり順を確認する
z-indexを設定しても要素の重なりが想定通りにならない場合や重ねた要素の背景色が同じである場合など、、開発者ツールのStylesタブではどんな重なり順になっているか確認しづらいことがあります。
これはChromeではなくEdgeの機能ですが、3D View Toolを使うと一発でどのような順番になっているか確認できます。
👇 だとタブの部分が浮かび上がっているのがわかると思います。
新機能の確認
開発者ツールの新機能については 👇 のページで確認できます。
各バージョンごとのページも用意されており、最新機能を詳細にチェックすることができます。
まとめ
使いこなしてスピーディーに開発しましょう！！！！！！！！！
もっと便利なのあれば教えてください！！！！！！！！！1
Discussion
display: flex,display: gridの CSS を Flexbox エディタを用いて調整するってのをよくやっています 👀中央揃え系のデザインをしたい時にとりあえず
display: flexの CSS だけ実装しておく-> Chrome DevTools の Flexbox エディタを用いて、適用する
justify-contentなどのプロパティを決める-> 決まったプロパティを実装に反映する
みたいな感じで。
参考: https://developer.chrome.com/docs/devtools/css/flexbox?hl=ja
ありがとうございます！
エディタとブラウザ往復するよりも効率よく実装できそうですね〜