このページは 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 のインポートとエクスポートにイニシエータと優先度の情報を追加

同僚とともにネットワークログを診断したい場合は、ネットワークリクエストを BigQuery にエクスポートし、 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. コマンドメニュー

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

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

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

ピクチャーインピクチャーは、ページでフローティング動画を作成できる、新しい試験運用版 API ですウィンドウが表示されます。

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

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

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

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

ボタンをフォーカスして R、E、D を押した後、ボタンの周囲に赤い枠線を追加するとします。どのイベントにリスナーを追加すればよいかわかりません。monitorEvents() を使用して、すべての要素のイベントをコンソールに追加します。

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

図 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 の問題を報告するには、その他のオプション（） >ヘルプ >DevTools で DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。