ツール
Chrome DevTools クイックリファレンス
Chrome DevTools クイックリファレンス の印刷用チートシート。すばやい参照、学習、机上利用向けに整理されています
サンプル
このチートシートの内容
- 要素
- コンソール
- ネットワーク
- ソース
- パフォーマンス
- アプリケーション
- Lighthouse
- ショートカット
- モバイルデバッグ
- よくあるパターン
検査と編集
右クリック -> 検査 | 要素の Elements パネルを開く |
タグ/属性をダブルクリック | HTML をインラインで編集 |
Delete キー | 選択ノードを削除 |
Ctrl+Z | DOM の変更を元に戻す |
H キー | 選択要素の表示を切り替え |
ノードをドラッグ | DOM ツリーで要素を移動 |
スタイルパネル
element.style {} | 要素にインラインスタイルを追加 |
プロパティ値をクリック | CSS 値をライブで編集 |
ルール横のチェックボックス | CSS プロパティのオン/オフを切り替え |
:hov ボタン | 疑似状態を強制（:hover、:focus） |
.cls ボタン | CSS クラスを追加/削除 |
カラースウォッチ | カラーピッカーを開く |
Computed タブ | 最終的な計算済み CSS 値を表示 |
すべてのセクションを含む印刷用チートシートをダウンロード
PDF をダウンロードダウンロード
