HTMLやCSSを微調整するときに便利なデベロッパーツールの使い方。
初心者向けです。他にも便利な使い方があったら教えてください！
※あとでGIFを入れる
HTML
要素を入れ替える
ドラッグ＆ドロップでできます。
要素を複製する
コピペ（Ctrl＋C → Ctrl＋V）でできます。
選択した要素の最後の子要素として追加されます。
文字列を編集する
ダブルクリックで編集できます。文字列の編集なので、HTMLタグを入れてもテキストで表示されるだけです。
要素を編集する
F2で編集できます。HTMLタグも反映します。
Ctrl＋Enterで編集完了（確定）します。
hover
疑似的にhoverしたい要素の左の「・・・」をクリック。
forcus state > :hover を選択します。
※stylesの「:hov」からもできます。
CSS
右側のStyles・Computedを使いこなす。
10pxずつ上下させる
Stylesの該当箇所をクリックして、Shift＋↑↓。
0.1pxずつ上下させる
Stylesの該当箇所をクリックして、Alt＋↑↓。
100pxずつ上下させる
Stylesの該当箇所をクリックして、Shift＋Alt＋↑↓。
flexは選択で
display: flex; は右側にあるマークをクリックして視覚的に配置方法を選択することができます。
どこのCSSが効いているのか確認する
ComputedのFilterで検索。
例えば、font-sizeで検索したときに該当箇所の「→」を押すと、Stylesタブで指定されている箇所まで移動します。
JavaScriptを使う時のEvent Listenersなんかもいろいろできるので書き足していきたい所存です。