Chrome デベロッパーツールに関するまとめ

デベロッパーツールを開く

Chromeデベロッパーツールを開く方法について。

次の方法でデベロッパーツールを開く事ができる。

• ショートカットキー。
  • WindowsはCtrl+Shift+I。
  • Macはcommand+shift+I。
• 右上のブラウザメニュー（3つの点が縦に並んだアイコン）→その他のツール→デベロッパーツール。

ページの要素やスタイルを確認

Chromeデベロッパーツールを使ってページの要素やスタイルを確認する方法について。

デベロッパーツールを開き、タブメニューからElementsを選択する事でページの要素やスタイルを確認できる。

JavaScriptのデバッグ

Chromeデベロッパーツールを使ってJavaScriptのデバッグを行う方法について。

デベロッパーツールを開き、タブメニューからConsoleを選択する事でJavaScriptのデバッグが可能になる。

表示されるメッセージについては次の通り。

• 黒色のメッセージはconsole.log()など。
• 黄色のメッセージは警告事項など。
• 赤色のメッセージはエラー。

ダークモードの検証

Chromeデベロッパーツールを使ってダークモードの検証を行う方法について。

デベロッパーツールには通常モードとダークモードに切り替える機能があり、これを使う事でダークモードの検証ができる。

ダークモードに切り替える方法は次の通り。

1. デベロッパーツールを開く。
2. ツールメニュー（ツールのタブメニューの右側にある3つの点が縦に並んだアイコン）→『More tools』→『Rendering』を選択。
3. Renderingのパネルに表示された項目から『Emulate CSS media feature prefers-color-scheme』を探す。
4. 値を『No emulation』から『prefers-color-scheme: dark』に変更する。

上記の値について、OSの設定などでChromeをダークモードで利用し、ライトモードの検証を行う場合は『prefers-color-scheme: light』を選択する。