こんにちは！
今回はChrome DevToolsの基本操作についてまとめます。
Chrome DevToolsとは
- Google Chromeに付属しているWeb開発に役に立つツール
- DeveloperTool、デベロッパーツール、開発者ツールとも呼ばれる
- HTML、CSS、JavaScriptの動作を詳細に検討できる
- パフォーマンス分析なども可能
起動方法
| ショートカット | 動作 |
|---|---|
| F12 | 通常起動 |
| Ctrl + Shift + I | 通常起動 |
| Ctrl + Shift + C | Inspectモードで起動 |
Inspectモード
- 選択した要素の詳細情報（HTML, CSS）が表示される
| ショートカット | 動作 |
|---|---|
| Ctrl + Shift + C | Inspectモードと通常モードを切り替え |
HTMLの編集
- 選択した要素のHTMLがElementsタブに表示される
| ショートカット | 動作 |
|---|---|
| F2 or ダブルクリック | 編集 |
CSSの編集
- 選択した要素のCSSがElementsタブのStylesに表示される
| ショートカット | 動作 |
|---|---|
| クリック | 編集 |
ドラッグで数値変更
- 数値はカーソルを合わせて左右にドラッグすることで変化可能
- フォントサイズなど使用できない数値もある
- paddingやmarginなどの距離関係で有効
マウスで数値変更
- 数値は入力可能状態にした後、カーソル上下で変更可能
- こちらはフォントサイズも変更可能
カラーピッカーを開く
- 色指定の■をクリックするとカラーピッカーが開く
色のフォーマットを変更
- 色指定の■をShift＋クリックすることで、RGBとHSLなどのフォーマットを変更できる
カラーパレットの変更
- カラーピッカー画面の上下矢印のアイコンをクリックすることで、マテリアルデザインなどに対応したカラーパレットが表示される
スタイルの優先順位
- Stylesの各スタイルは上が適用の優先順位が高く、下が低い
スタイルの影響を受けるHTML要素
- Stylesの各スタイルにカーソルを合わせると、影響を受けるHTMLが画面上でハイライトされる
クラスの有効化、無効化
- .cls を押すと、選択中の要素のクラスが一覧表示され、チェックボックスで有効・無効を選択できる
デバイスモード
| ショートカット | 動作 |
|---|---|
| Ctrl + Shift + M | デバイスモードと通常モードを切り替え |
画面サイズの変更
- 下図の赤枠をクリックすることで簡単にタブレットサイズやPCサイズに変更できる
メディアクエリの表示
- 先ほどの図の右上のメニューボタンから、「Show media queries」を選択
- ページで使用しているメディアクエリのブレークポイントが色分けされて表示される
コンソールパネル
| ショートカット | 動作 |
|---|---|
| Esc | コンソールの表示、非表示を切り替え |
変更箇所を表示
- 変更した箇所を - と + で色分けして表示するChangesタブを追加
- 左上のメニューからChangesを選択
パフォーマンスモニターを表示
- 同様に左上のメニューからPerformance monitorを選択
その他便利な機能
ソースコード全体を検索
| ショートカット | 動作 |
|---|---|
| Ctrl + Shift + F | ソースコード全体を検索 |
ドックの位置を変更
| ショートカット | 動作 |
|---|---|
| Ctrl + Shift + D | ドックの位置を下と右に交互に入れ替える |
おわりに
今回はChrome DevToolsの基本操作をまとめました。DevToolsは他にも便利な機能がたくさんありますので、少しずつ覚えていきたいと思います。また、参考図書のChrome Developer Tools入門も、画面を一つずつ解説していて知識を整理しながら学ぶことができました。
86/100
