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

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

サイトのキャプチャ

What's New In DevTools (Chrome 71)

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引数として記述します。

sponsors

top of page

©2019 coliss