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

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

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

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

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

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

コマンド メニュー。

図 13. コマンド メニュー

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. ノードを 1 つ目の引数として 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 の新機能シリーズで取り上げられたすべての内容のリスト。