Chrome DevTools ElementsパネルとNetworkパネルショートカット

Chrome DevTools Elements & Networkショートカット

JavaScriptデバッグの他に、Chrome DevToolsはHTML構造の検査、CSSの変更、ネットワークトラフィックの分析に不可欠です。

Elementsパネル

• 要素の検査 (⌘+⌥+C / Ctrl+Shift+C) — ページ上の要素をクリックしてDOMツリーで選択
• HTMLとして編集 (F2) — 選択した要素のHTMLを直接編集
• 要素の削除 (Delete / Backspace) — 選択した要素をDOMから削除

CSS編集

Stylesペインでの作業時：

• 値の増減 (↑/↓) — 数値CSS値を1ずつ変更
• 10ずつ増減 (Shift+↑/↓) — 値を10ずつ変更
• 0.1ずつ増減 (⌥+↑/↓ / Alt+↑/↓) — 細かい調整

Networkパネル

• ハードリフレッシュ (⌘+Shift+R / Ctrl+Shift+R) — キャッシュをバイパスしてページを再読み込み