Sofia Emelianova
Chrome DevTools を開く方法はいくつかあります。好きなものを選びます。
右クリック > 検証
ページ上の任意の要素を右クリックし、[検証] を選択します。
![プルダウン メニューの [検査] オプション。](https://developer.chrome.google.cn/static/blog/devtools-tips-15/image/the-inspect-option-the-d-62b7b93fd1e41.png?hl=ja)
[その他のツール] メニュー
> [その他のツール] > [デベロッパー ツール] を選択します。
![[その他のツール] メニュー。](https://developer.chrome.google.cn/static/blog/devtools-tips-15/image/the-more-tools-menu-f7040195ebd6c.png?hl=ja)
ショートカット
キーボードを好む方のために、ショートカットのまとめを用意しました。
| OS | 要素 | Console | 最後に表示したパネル |
|---|---|---|---|
| Windows または Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
ショートカットを簡単に覚える方法:
- C は CSS の略です。
- J: JavaScript 用。
- I は選択した項目を表します。
新しいタブごとに DevTools を自動オープンする
Windows、Linux、MacOS で Chrome DevTools を自動的に開く方法については、新しいタブごとに DevTools を自動的に開くをご覧ください。