DevTools の新機能(Chrome 71)

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

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

ライブ表現にカーソルを合わせて 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] 列を表示する方法

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

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

コマンド メニュー。

図 13. コマンド メニュー

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

メインメニューからコマンド メニューを開きます。

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

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

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

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

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

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

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

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

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

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

    図 17. [Store as global variable] を使用してノードへの参照を取得する

  2. ノードを 1 つ目の引数として monitorEvents() に渡します。

    ノードを monitoringEvents() に渡します。

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

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

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

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

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

unmonitorEvents(temp1);

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

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

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

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

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

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

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

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

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプションもっと見る) >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

DevTools の新機能」シリーズで紹介されているすべてのリスト。