このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 71）

Kayce Basques

Chrome 71 で導入される Chrome DevTools の新機能と主な変更点は次のとおりです。

ライブ表現にカーソルを合わせて DOM ノードをハイライト表示します。
DOM ノードをグローバル変数として保存する
HAR のインポートとエクスポートにイニシエータと優先度の情報を表示
メインメニューからコマンドメニューにアクセスする
ピクチャーインピクチャーのブレークポイント
（参考）コンソールで monitoringEvents() を実行して要素のイベントが発生するのを監視します。

続けて読むか、このページの動画をご覧ください。

ライブ表現にカーソルを合わせて DOM ノードをハイライト表示

Live Expression が DOM ノードと評価されたら、Live Expression の結果にカーソルを合わせると、ビューポートでそのノードがハイライト表示されます。

Live Expression の結果にカーソルを合わせると、ビューポートでノードがハイライト表示されます。

図 1. ライブ表現の結果にカーソルを合わせて、ビューポートでノードをハイライト表示する

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

DOM ノードをグローバル変数として保存するには、ノードに評価される式をコンソールで実行し、結果を右クリックして [Store as global variable] を選択します。

コンソールでグローバル変数として保存します。

図 2. コンソールでグローバル変数として保存

または、[DOM Tree] でノードを右クリックして、[Store as global variable] を選択します。

DOM ツリーにグローバル変数として保存。

図 3. DOM ツリーにグローバル変数として保存

HAR のインポートとエクスポートにイニシエータと優先度の情報を追加

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

ネットワークリクエストを HAR ファイルにエクスポートする。

図 8. ネットワークリクエストの HAR ファイルへのエクスポート

ファイルをドラッグ&ドロップすると、[ネットワーク] パネルにファイルをインポートできます。

HAR ファイルをエクスポートするとき、DevTools で HAR ファイルにイニシエータと優先度の情報が含まれるようになりました。HAR ファイルを DevTools に再度インポートすると、[Initiator] 列と [Priority] 列に値が表示されるようになりました。

_initiator フィールドでは、リソースがリクエストされた理由について、より多くのコンテキストが提供されます。これは、リクエストテーブルの Initiator 列に対応しています。

イニシエータ列。

図 9. イニシエータ列

Shift キーを押したままリクエストにカーソルを合わせることで、そのイニシエータと依存関係を表示することもできます。

イニシエータと依存関係の表示

図 10. イニシエータと依存関係の表示

_priority フィールドには、ブラウザがリソースに割り当てた優先度を示します。これは、リクエストテーブルの [優先度] 列に対応します（デフォルトでは非表示になっています）。

優先度列。

図 11. [優先度] 列

リクエストテーブルのヘッダーを右クリックし、[優先度] を選択して [優先度] 列を表示します。

[優先度] 列の表示方法

図 12. [Priority] 列を表示する方法

注: HAR 仕様では、カスタムフィールドはアンダースコアで始まる必要があることが規定されているため、_initiator フィールドと _priority フィールドはアンダースコアで始まります。

コマンドメニューを使用すると、DevTools のパネル、タブ、機能にすばやくアクセスできます。

図 13. コマンドメニュー

メインメニューからコマンドメニューを開けるようになりました。メインメニュー ボタンをクリックし、[コマンドを実行] を選択します。

図 14. メインメニューからコマンドメニューを開く

ピクチャーインピクチャーのブレークポイント

ピクチャーインピクチャーは、ページでデスクトップ上にフローティング動画ウィンドウを作成できる、新しい試験運用版の API です。

これらのピクチャーインピクチャーイベントのいずれかが発生したときに一時停止するには、[Event Listener Breakpoints] ペインで enterpictureinpicture、leavepictureinpicture、resize の各チェックボックスをオンにします。DevTools はハンドラの最初の行で一時停止します。

[Event Listener Breakpoints] ペインのピクチャーインピクチャーイベント。

図 16. [Event Listener Breakpoints] ペインのピクチャーインピクチャーイベント

（参考）コンソールで monitoringEvents() を実行して、要素のイベントが発生するのを監視する

ボタンをフォーカスして R、E、D を押した後、ボタンの周囲に赤い枠線を追加したいものの、リスナーを追加するイベントが不明なとします。monitorEvents() を使用して、要素のすべてのイベントを Console に記録します。

ノードへの参照を取得します。

図 17. [Store as global variable] を使用してノードへの参照を取得する
ノードを 1 つ目の引数として monitorEvents() に渡します。

図 18. ノードを monitorEvents() に渡す
ノードを操作する。DevTools により、ノードのすべてのイベントがコンソールに記録されます。

図 19. コンソールでのノードのイベント

unmonitorEvents() を呼び出して、コンソールへのイベントの記録を停止します。

unmonitorEvents(temp1);

特定のイベントまたは特定のタイプのイベントのみをモニタリングする場合は、配列を 2 番目の引数として monitorEvents() に渡します。

monitorEvents(temp1, ['mouse', 'focus']);

mouse 型は、mousedown や click など、マウス関連のすべてのイベントをログに記録するように DevTools に指示します。サポートされている他の型は key、touch、control です。

コンソールから呼び出すことができるその他の便利な関数については、コマンドラインリファレンスをご覧ください。

プレビューチャンネルをダウンロードする

デフォルトの開発ブラウザとして Chrome の Canary、Dev、または Beta を使用することを検討してください。これらのプレビューチャンネルを使用すると、DevTools の最新機能にアクセスしたり、最先端のウェブプラットフォーム API をテストしたり、ユーザーに先駆けてサイトの問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。