🛠️
chrome devtoolsの便利機能
tl;dr
公式を参考にしています。多すぎるので今回は一部抜粋のみ。
対象読者
- コーダー
- フロントエンドエンジニア（バックエンドの兼任でももちろんok）
難しい技術が出てくるわけではなくGUIベースの簡単な操作が多いので、html, cssを触るなら誰でも対象です。
また、私自身はフリーのフロントエンドエンジニアなので、その視点で話します。
機能
developer tool表示中にescを押すとconsoleがニョキッと出てくる
超基本なのでしょうが、全然知りませんでした。networkを見ながら、elementを見ながら、でconsoleも触ることができます。便利ですね。
遅いネットワークをシミュレートする。
スロットリングを行うことができます。
遅いCPUをシミュレートする。
CPUもスロットリングできます。
hoverやactive状態をトグルで設定する
「hover状態のcssみたいのにカーソル動かしたらhoverなくなるから見れへんやないか！！」問題が解決します。
それ以外の用途は特に思い浮かびませんでした。
今回はDOMメインで話してますが、cssのメニューでも、上部の:hovをクリックすることで設定可能です。
ノードを隠すor消す
DOMツリーのノードにフォーカスして
- Hを押すと
visibility: hiddenが付与されて見えなくなります。（見えないだけなのでレイアウトは崩れない） - Deleteを押すとDOMツリーから削除されます。（レイアウトが崩れる。またリロードしないと直らない）
重ね合わせコンテキストの視覚化
公式ドキュメントでは見つけられませんでした。
chromeの標準機能で3Dでレイヤーの確認ができます。こちらの記事ですでに紹介してくださっています。
感覚やコードで判別するよりも簡単ですね。
ダークモードの検証
右上のメニューからレンダリングを選択して
該当項目をいじればokです
ネットワークリクエストのコピー
fetch形式やnodeのfetch形式(corsなどがない）やcURL形式などがありました。Postmanとかへのコピペに便利そうですね
以下で発見しました
Discussion