DevTools の新機能（Chrome 71）

Kayce Basques

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

以下をお読みいただくか、このページの動画版をご覧ください。

ライブ式にカーソルを合わせると DOM ノードがハイライト表示される

ライブ式が DOM ノードとして評価された場合は、ライブ式の結果にカーソルを合わせると、ビューポート内のそのノードがハイライト表示されます。

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

図 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. [優先度] 列

[Requests] テーブルの見出しを右クリックし、[優先度] を選択して [優先度] 列を表示します。

[優先度] 列を表示する方法。

図 12. [優先度] 列を表示する方法

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

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

コマンド メニュー。

図 13. コマンド メニュー

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

メインメニューからコマンド メニューを開く。

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

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

Picture-in-Picture は、ページでデスクトップ上にフローティング ビデオ ウィンドウを作成できる新しい試験運用版 API です。

イベント リスナー ブレークポイント ペインで enterpictureinpicture、leavepictureinpicture、resize のチェックボックスをオンにすると、これらのピクチャー イン ピクチャー イベントのいずれかがトリガーされるたびに、一時停止します。DevTools はハンドラの最初の行で停止します。

[イベント リスナー ブレークポイント] ペインのピクチャー イン ピクチャー イベント。

図 16. イベント リスナー ブレークポイント ペインのピクチャー イン ピクチャー イベント

（ボーナス ヒント）コンソールで monitorEvents() を実行して、要素のイベント発生を監視する

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

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

    [グローバル変数として保存] を使用してノードの参照を取得します。

    図 17. [グローバル変数として保存] を使用してノードの参照を取得する

  2. ノードを monitorEvents() の最初の引数として渡します。

    ノードを monitorEvents() に渡す。

    図 18. ノードを monitorEvents() に渡す

  3. ノードを操作します。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 の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。