知ってると便利かもしれないChrome Developer Toolsの小ネタ集

この記事では、開発に役立つかもしれないChrome Developer Toolsの小ネタを紹介します。

数値の調整

CSSの値などを調整する際、上下のアローキーを使用することで1ずつ値を変更することができますが、他のキーを組み合わせることでこの調整量を変更することが可能です。キーの組み合わせと調整量は以下の通りです。

調整量 Windows Mac
0.1 Alt + ↑ ⌥ + ↑
1
10 Shift + ↑ ⇧ + ↑
100 Ctrl + ↑ ⌘ + ↑

(値を下げる場合は、キーと組み合わせてください)

0.1ずつ値を変更した場合の例
arrow.gif

直近に選択した要素の参照

Consoleで$0を入力すると、直前に選択した要素への参照を意味します。
例えば、Elementsタブで<p>要素を選択したとしましょう。
image.png

この場合、Consoleで$0を使用すると、選択した<p>要素を参照することができます。
image.png

なお、$に続く番号(n)を変更することで、「n+1」回前に選択した要素を参照することができます。(0〜4までの値が使用できる)


$0: 1回前に選択した要素
$1: 2回前に選択した要素
$2: 3回前に選択した要素
...

image.png

DOMのブレークポイントの設定

Developer Toolsでは、DOM要素にもブレークポイントを設定することができます。

手順
1. Elementsタブを開く
2. ブレークポイントを設定する要素で右クリックし、Break onメニューから設定したいトリガーを選択する
image.png

トリガーには、以下の3種類があります。

トリガー 詳細
subtree modification 小要素が追加、削除、変更された場合にブレーク
attribute modification 要素の属性(class, id, nameなど)が変更された場合にブレーク
node removal 要素が削除された場合にブレーク

なお、設定したDOMのブレークポイント一覧は、DOM Breakpointsペインで確認することができます。
image.png

ソースコード変更内容の表示

Changesタブを使用すると、Developer Toolsによるコードの変更内容を差分として表示することができます。
Changesタブを表示するには、Developer Toolsのメニューから「Changes」を選択します。
image.png

Changesでは、次のようにSourcesで行ったコード変更が差分として表示されます。
image.png

Shadow DOMの表示

Developer Toolsの設定を変更することで、特定の要素のShadow DOMを表示することができます。

手順
1. Developer Toolsの設定画面を表示する
2. Show user agent shadow DOMにチェックを入れる
image.png

上記の設定変更を行うと、Developer ToolsのElementsタブでは、以下のようにShadow DOMの内容が表示されるようになります。

image.png

任意のJavaScriptコードの実行

Developer ToolsのSourcesタブで表示しているJavaScriptコードのうち、任意のコードをConsoleで実行することができます。

手順
1. SourcesタブでJavaScriptコードを表示する
2. 実行したい箇所のコードを選択する
3. 右クリックしてメニューを表示し、Evaluate in console を選択する
image.png
4. Consoleでコードが実行される
image.png

なお、この機能はSnippetsでも使用することができます。

その他

以下の記事でもDeveloper Toolsに関するTipsが紹介されているので、併せてチェックしてみましょう。
[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能

参考

Chrome DevTools
Keyboard Shortcuts Reference

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.