Chrome デベロッパーツールの使い方まとめ - Qiita

Elementsタブ 要素がどんなタグやstyleで構成されているか、確認することが出来ます。 Cmd + Shift + c のショートカットを使ったり、要素を右クリックして「検証」をクリックすると、任意の要素を簡単に調べることが出来ます。 要素を編集する 要素の内容はダブルクリックすることで編集が可能です。 F2のショートカットキーを使うと、子要素もまとめて編集が出来ますので、複数の箇所を変更したいときは、ショートカットキーを使うといいでしょう。 また、Deleteキーを押すことで要素を削除することもできます。Cmd + z でアンドゥ、Cmd + Shift + zでリドゥも可能です。 マージンやパディング、サイズを確認する 右側のComputedタブを開くと要素自身のサイズや、マージン、パディングを確認することが可能です。 クリックすることで、このまま編集することも可能です。 要素