DevTools の新機能(Chrome 71)

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

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

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

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

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

図 1. Live Expression の結果にカーソルを合わせると、ビューポートでノードがハイライト表示されます。

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

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

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

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

または、[DOM Tree] でノードを右クリックして [Store as global variable] を選択します。

グローバル変数として DOM ツリーに格納する。

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

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

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

ネットワーク リクエストを HAR ファイルにエクスポートしています。

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

ファイルを [Network] パネルに再度インポートするには、ファイルをドラッグ&ドロップします。

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

_initiator フィールドには、リソースがリクエストされる原因に関する詳しいコンテキストが表示されます。これは、リクエスト テーブルの [イニシエータ] 列にマッピングされます。

開始列。

図 9. イニシエータ列

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

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

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

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

[優先度] 列。

図 11. [優先度] 列

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

[優先度] 列の表示方法

図 12. [優先度] 列の表示方法

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

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

コマンド メニュー

図 13. コマンド メニュー

メインメニューからコマンド メニューを開くことができます。メインメニュー ボタン main をクリックし、[Run command] を選択します。

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

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

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

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

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

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

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

(補足ヒント)コンソールで MonitorEvents()を実行して、要素のイベントが発生するのを監視してください。

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

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

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

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

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

    ノードを MonitorEvents()に渡す。

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

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

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

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

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

unmonitorEvents(temp1);

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

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

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

コンソールから呼び出せるその他の便利な機能については、コマンドライン リファレンスをご覧ください。

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

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

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

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

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

DevTools の新機能

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59