ツール

Chrome DevTools クイックリファレンス

Chrome DevTools クイックリファレンス の印刷用チートシート。すばやい参照、学習、机上利用向けに整理されています

ソース
Chrome DevTools Documentation (developer.chrome.com/docs/devtools)
ライセンス
MIT
バリアント
3 ダウンロードオプション
更新日
2026-03-27

サンプル

このチートシートの内容

検査と編集

右クリック -> 検査要素の Elements パネルを開く
タグ/属性をダブルクリックHTML をインラインで編集
Delete キー選択ノードを削除
Ctrl+ZDOM の変更を元に戻す
H キー選択要素の表示を切り替え
ノードをドラッグDOM ツリーで要素を移動

スタイルパネル

element.style {}要素にインラインスタイルを追加
プロパティ値をクリックCSS 値をライブで編集
ルール横のチェックボックスCSS プロパティのオン/オフを切り替え
:hov ボタン疑似状態を強制(:hover、:focus)
.cls ボタンCSS クラスを追加/削除
カラースウォッチカラーピッカーを開く
Computed タブ最終的な計算済み CSS 値を表示

すべてのセクションを含む印刷用チートシートをダウンロード

PDF をダウンロード

ダウンロード

読み方に合った形式を選ぶ

テキスト形式

プレーンテキストとしてコピーまたはダウンロード

Markdown をダウンロード

コマンド、スニペット、設定をノートやプロンプト、ドキュメントへ貼り付けるのに最適です

Markdown をダウンロード

プレビュー

Web プレビューはすばやく確認するためのものです。印刷用の正式版は PDF です

ブラウザで開く