DevTools の新機能（Chrome 71）

Kayce Basques
Kayce Basques
X GitHub

Chrome 71 の Chrome DevTools には、以下の新機能と大きな変更が加えられています。

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

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

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

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

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

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

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

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

図 2. Console でグローバル変数として保存する

または、[DOM ツリー] でノードを右クリックし、[グローバル変数として保存] を選択します。

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

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

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

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

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

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

ファイルを [ネットワーク] パネルに読み込み直すには、ファイルをドラッグ＆ドロップします。

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

_initiator フィールドには、リソースがリクエストされた原因に関するコンテキストが示されます。これは、[Requests] テーブルの [Initiator] 列にマッピングされます。

イニシエータ列。

図 9. [イニシエータ] 列

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

イニシエータと依存関係を表示する。

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

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

[優先度] 列。

図 11. [優先度] 列

Requests テーブルのヘッダーを右クリックし、[Priority] を選択して、[Priority] 列を表示します。

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

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

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

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

コマンド メニュー。

図 13. コマンド メニュー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    モニタリングするノードを monitorEvents() に渡す。

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

  3. ノードを操作します。DevTools は、ノードのすべてのイベントをコンソールに記録します。

    コンソールのノードのイベント。

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

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

unmonitorEvents(temp1);

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

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

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

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

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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