Chrome検証ツール Preferences前編


Webサイトの制作に関わったことのある人のほとんどがChromeの検証ツールにお世話になっているかと思います。現在マークアップを主な仕事とする私もその一人です。しかし、その機能の一部しか使ったことが無くあまり使いこなせていないなと感じていました。そこで、今回のブログではあまり開いたこともなかった 検証 > 点三つのメニュー > Settings > Preferences の設定について調べてみました。調べたり試してみたりしたのですが、一部詳細が分からなかったものもありましたので、後々追記出来ならなと思っています...。

Appearance

Appearanceなので、検証ツールの外観に関わる設定になります。

Theme

検証ツールのテーマ設定。
白バックの[Light]と、黒バックの[Dark]がある。
デフォルトは[Light]。

Light


Light

Dark



Panel layout

[vertical]は表示内容を縦に区切って表示、[horizontal]は横に区切って表示。
デフォルトは[auto]で、autoだと検証ツールの幅が広い時はverticalで、狭い時はhorizontalになる。
設定の反映範囲は Elementsタブ と Souresタブ(確認した感じは...)。


vertical


vertical

vertical

horizontal


horizontal

horizontal

Enable Cntrl + 1-9 shortcut to switch panels

検証ツールを開いた時、 Elements, Console, Sources などのタブがあるかと思います。このタブ切り替えをショートカットキーで行えるようにする設定です。

チェックを入れると Mac なら「⌘ + 1~9」、Windows なら「Cntrl + 1~9」でタブの切り替えができようになります。

ショートカットキーのON/OFF設定がある理由は、おそらくブラウザタブの切り替えも同じショートカットキーを使っているためだと考えられます。検証ツールを開いている時でもこのショートカットキーをブラウザタブ切り替えで使いたい場合はチェックを外しておくと良いでしょう。

デフォルトではチェック入って無いです。



Show what's New after each update

各更新後の新着情報を表示する。調べても詳細が分からなかったのでわかり次第追記。予想では、検証ツール開いた時に下の方にたまに出てくる「what's New」のタブの設定かな?と思っています...。デフォルトでチェック入っています。

Show third party URL badges

第三者のURLバッジを表示する。調べても詳細が分からなかったのでわかり次第追記。デフォルトではチェック入ってません。

Don't show Chrome Data Saver warming

Chrome Data Saverのウォーミングを表示しない。調べても詳細が分からなかったのでわかり次第追記。デフォルトではチェック入ってません。

Disable paused state overlay

一時停止状態のオーバーレイを無効にする。*調べても詳細が分からなかったのでわかり次第追記。*デフォルトではチェック入ってません。

Sources

Search in anonymous and content scripts

匿名スクリプトとコンテンツスクリプトで検索する。下記参考になりそうなサイトではチェックを入れると「HTMLのインラインスクリプトタグ内のJS、iframe内のJS。」も検索に引っ掛かるようになるという内容が書かれているようですが、実際にSourcesタブで検索をした時にチェックを入れていても"HTMLのインラインスクリプトタグ内のJS"がヒットしなかったので、再チャレンジして上手くいったらそのことを追記します。
デフォルトではチェック入っていません。

参考になりそうなサイト:
How to search all loaded scripts in Chrome Developer Tools? - Stack Overflow
javascript - Can I get chrome-devtools to actually search all JS sources? - Stack Overflow

Automatically reveal files in sidebar

サイドバーにファイルを自動的に表示する。調べてもよく分からなかったのでわかり次第追記。 デフォルトではチェック入ってません。

Enable JavaScript source maps

JavaScriptソースマップを有効にする。実際にソースマップを生成しようとしましたがうまくいかなかったので、再チャレンジして上手くいったら追記します。調べた感じではソースマップを生成しておくとバンドルしたJSでもどのファイルに記述している内容なのかがわかるようになるっぽいです。
デフォルトでチェック入ってます。

参考になりそうなサイト:
Source Mapsについて調べた - console.lealog();
ソースコードへの前処理済みコードのマッピング | Google Developers

Detect indentation

インデントを検出。調べてもよく分からなかったのでわかり次第追記。
デフォルトでチェック入ってます。

Autocompletion

自動補完。調べてもよく分からなかったのでわかり次第追記。
デフォルトでチェック入ってます。

Bracket matching

Sources タブで直接ソース編集する時に、{}, (), [], "", '' を自動保管してくれる機能です(試した感じでは...)。カッコなどを入力した時に開始のカッコを入力してEnterを押すと自動で閉じカッコが入ります。
デフォルトでチェック入ってます。


Bracket matching

Code folding

チェックを入れると、Sorceタブで確認できるJavaScript、CSSソースをおりたたむことができるようになります。 デフォルトではチェック入ってません。


Code folding

Show whitespace characters

空白の表記設定です。デフォルトでは [None] 。
None で空白を表示させない、All で空白を表示させる、Trailing で末尾の空白のみ表示させる。


Show whitespace characters : None


Show whitespace characters : All


Show whitespace characters : Trailing


Display variable values inline while debugging

デバッグ中に変数値をインラインで表示する設定。デフォルトでチェック入っています。SourcesタブでJavaScriptのデバックをする時に活躍する機能です。DevToolを使いこなすことができればいちいち console.log(); と書かなくても変数内の値を確認できるのでJSをよく書く方には重宝する機能なのでは無いでしょうか。デバックの方法については下記のGoogle Developersサイトに詳しく載っていました。

参考サイト:
Preview JavaScript values inline while debugging | Google Developers

デバックの方法について:
Chrome DevTools で JavaScript をデバッグする | Google Developers


Display variable values inline while debugging

Enable CSS source maps

CSSソースマップを有効にする機能。実際にソースマップを生成しようとしましたがうまくいかなかったので、再チャレンジして上手くいったら追記します。調べた感じではソースマップを生成しておくとSassで書いたあとバンドルしたCSSでもそのSassファイルに書いたコードなのか分かるようになりみたいです。デフォルトでチェック入ってます。

Default indentation

Elementsタブ内のStylesタブに書いてあるスタイルをコピペした時のインデント設定(試した感じでは...)。
デフォルトでは [4 spaces] が設定されてます。設定には、2 spaces, 4 spaces, 8 spaces, Tab character の4つがあります。


Default indentation の設定変更しても検証ツール上の見た目は変わらない。

Default indentation を変更してスタイルをコピペ


この設定を変更しても検証ツール上での見た目に変化はありませんがコピペしてみると設定変更できているのがわかるかと思います。


Elements


Show rulers

定規を表示。デフォルトではチェック入ってません。 要素単体の大きさ確認よりは、他の要素との横や縦のバランスを確認する時に表示させるといいかもしれません。個人的には定規から伸びる線がチカチカして気が散るのと、目視でも十分バランス確認できるのであまり使わない機能かなと思っています。


Show rulers

Color format

カラーフォーマット。設定は[As authored], [HEX: #dac0de], [RGB: rgb(128, 255, 255)], [HSL: hsl(300, 80%, 90%)] の4パターン。デフォルトは As authored で書いた通りの記述形式になります。
例えば HEX で設定した場合は、Elements > Styles 内にRGBで記述しようとしても強制的にHEX値に変換されます。



Show user agent shadow DOM

ブラウザの ShadowDOM を表示することができます。デフォルトではチェックは入っていません。
ShadowDOMについては古い記事ですが、 先取り、Shadow DOM - Shadow DOMが生まれた理由 | CodeGrid がわかりやすいかと思います。

デモとして見れるWebページを見つけることができなかったので、もし見つけたら追記します。

Word wrap

Elements > Styles タブの文字の折り返し設定。デフォルトではチェックが入っているので折り返す設定になってます。



Show HTML comments

HTMLのコメント設定。デフォルトではチェックが入っているのでコメントも表示されます。


Show HTML comments:チェックあり

Show HTML comments:チェックなし


Reveal DOM node on hover


ホバー時にDOMノードを表示する。調べても試してもどこに表示されているのか分からず...。確認出来次第追記します。


最後に

Chrome検証ツール Preferences編 ですが、全て書ききれなかったのでいくつかの記事に分けることにしました。また、前編で扱った機能のほとんどが調べても詳細が出てこなかったり、解説がよくわからなかったりしたので今後分かり次第追記していく予定です。 次回からは Network, Console, Extensions, Persistence, Debugger, DevToolsについて調べたことを記事にする予定です!

次回の記事はこちら
Chrome検証ツール Preferences 中編


関連記事

この記事のタグ

Chrome検証ツール Preferences 中編

タグ