1. 巫-KANNAGI-
  2. Content
  3. Software
  4. Chrome デベロッパーツールに関するまとめ

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

『Google Chrome』などで利用できる『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』を選択する。