Web制作者がチェックしておきたい、Chrome 71 デベロッパーツールの新機能のまとめ

先週、アップデートされたChrome 71 デベロッパーツールの新機能を紹介します。
ブラウザのアップデートと共に、デベロッパーツールも便利になっていきますね！

What's New In DevTools (Chrome 71)

• Live Expression機能でDOMノードを強調表示
• DOMノードをグローバル変数として保存
• HARファイルにエクスポート
• メインメニューからコマンドメニューにアクセス
• Picture-in-Pictureのブレイクポイント
• Consoleで要素のイベントを監視

Live Expression機能でDOMノードを強調表示

Chrome 70でアップデートされたLive Expression機能（参考: Live Expression機能）で、DOMノードをホバーで強調表示します。

ライブビューの結果にカーソルを置くと、ビューポートのDOMノードが強調表示

1. Consoleタブを選択し、「Create Live Expression」アイコンをクリック。
2. 監視する式を入力。
3. ライブビューの結果をホバー。

DOMノードをグローバル変数として保存

Consoleで式を実行し、結果を右クリックして「Store as global variable」を選択すると、DOMノードをグローバル変数として格納できます。

Consoleでグローバル変数として格納

またはDOMツリーのノードで、右クリックして「Store as global variable」を選択。

DOMツリーでグローバル変数として格納

1. Consoleで式を実行。
2. 右クリックして「Store as global variable」を選択。

HARファイルにエクスポート

ネットワークのログを診断する場合、ネットワークのリクエストをHARファイルにエクスポートできます。

HARファイルにエクスポート

ファイルをネットワークパネルにインポートするには、ドラッグ&ドロップするだけです。

HARファイルのインポート

HARファイルをエクスポートすると、デベロッパーツールはHARファイルにInitiatorとPriorityの情報を含めます。 HARファイルをデベロッパーツールにインポートすると、InitiatorとPriorityのカラムが設定されます。

Initiatorフィールドは、リソースが要求された原因に関する詳細を提供します。これは、RequestsテーブルのInitiator列にマップされます。

Initiatorカラム

shiftキーを押しながらホバーすると、そのInitiatorと依存関係が表示されます。

Initiatorと依存関係の表示

Priorityフィールドでは、ブラウザがリソースに割り当てた優先レベルが表示されます。デフォルトでは非表示になっているRequestsテーブルのPriorityカラムに対応します。

Priorityカラム

右クリックして「Priority」をチェックすると、カラムが表示されます。

Priorityカラムの表示

メインメニューからコマンドメニューにアクセス

Chrome 71ではコマンドメニューを使用すると、DevToolsパネル、タブ、および機能にすばやくアクセスできます。コマンドメニューではあいまい検索が可能で、例えばダークテーマに変更する際は「Switch to dark theme」と入力しますが、「theme」だけでも入力してもOKです。

コマンドメニューを起動

1. command+shift+Pで、コマンドメニューを起動。

メインメニューから開く時は、メインボタンをクリックし、Run commandを選択します。

メインメニューからコマンドメニューを起動

Picture-in-Pictureのブレイクポイント

Picture-in-Pictureとはデスクトップにページ上のビデオウィンドウをフロート表示させる、Chrome 70から実装された新しいAPIです。Event Listener Breakpointsパネルで、enterpictureinpicture、leavepictureinpicture、resizeのチェックボックスを有効にして、これらのPicture-in-Pictureイベントのいずれかが発生するたびに一時停止させることができます。

Event Listener BreakpointsパネルのPicture-in-Pictureの設定

Consoleで要素のイベントを監視

Consoleで「monitorEvents()」を実行して、要素のイベントを監視することができます。

1. ノードを参照します。
2. monitorEvents()の引数としてノードを渡します。
3. ノードのすべてのイベントをコンソールに記録します。

「Store as global variable」を使用して、ノードを参照

ノードをmonitorEvents()に渡す

ノードのすべてのイベントをコンソールに記録

イベントの監視を停止するには、「unmonitorEvents()」を実行します。
特定のイベントを監視するには、「monitorEvents()」に第2引数として記述します。