Chrome 134 の DevTools の新機能

Sofia Emelianova

プライバシーとセキュリティ パネル

これまでの [セキュリティ] パネルは [プライバシーとセキュリティ] パネルに進化し、プライバシー専用の新しいセクションが追加されます。このセクションでは、次のことができます。

• DevTools が開いている間、例外の有無にかかわらずサードパーティ Cookie を一時的に制限し、ウェブサイトの動作をテストします。
• サードパーティ Cookie に関する情報（一時的な制限モードでブロックされたか除外されたか、影響を受ける可能性のある Cookie の種類など）が記載された表が表示されます。

Chromium の問題: 352364594。

[パフォーマンス] パネルの改善

このバージョンでは、[パフォーマンス] パネルにさまざまな改善が加えられています。

調整済みの CPU スロットリング プリセット

自動的に調整して、低価格帯と中価格帯のモバイル デバイスをより正確に近似する 2 つの追加の CPU スロットリング プリセットを取得できるようになりました。

[パフォーマンス] > [CPU スロットリング] プルダウン メニューで [調整...] を選択し、[設定] で [調整]、[続行] をクリックします。DevTools がデバイスの速度低下率を計算するまで待ちます。調整されたスロットリング オプションは、[パフォーマンス] > [CPU スロットリング] プルダウン メニューにあります。

同じ AI チャットで異なるパフォーマンス イベントを選択する

[AI アシスタント] パネルで、同じチャット内のパフォーマンス トレースで選択したイベントを変更できるようになりました。つまり、別のイベントについて話すために新しいチャットを開始する必要はありません。

パフォーマンスでのファーストパーティとサードパーティのハイライト表示

[パフォーマンス] パネルの [概要] タブに新しい表が追加され、ファーストパーティ データ、サードパーティ データ、拡張機能データを区別できるようになりました。

テーブル内のエントリにカーソルを合わせると、パフォーマンス トレースで関連するイベントがハイライト表示されます。[Dim 3rd parties] をオンにすると、ファーストパーティ データのみに焦点を当てることができます。

また、表のハイライト表示されたエントリの横にある account_tree アイコンをクリックすると、サードパーティごとにグループ化された [ボトムアップ] タブに移動します。

マーカーのツールチップと分析情報のフィールド データ

フィールド データがオンになっている場合、指標マーカーのツールチップと [分析情報] タブでフィールド データを確認できるようになりました。

Chromium の問題: 368135130。

「強制リフロー」の分析情報

[パフォーマンス] > [分析情報] タブの分析情報に、強制リフローが追加されました。強制リフローは、レンダリング エンジンがスタイルとレイアウトを計算するためにスクリプトの実行を一時停止したときに発生します。強制リフローは、避けるべきボトルネックになる可能性があります。

新しい分析情報にカーソルを合わせると、強制リフローを伴う上位の関数呼び出しとそのスタック トレースがハイライト表示され、リフローの合計時間が表示されます。

Chromium の問題: 369766156。

「DOM サイズを最適化する」インサイト

もう 1 つの新しい分析情報は、DOM サイズを最適化するです。DOM ツリーのサイズが大きくなると、ページのパフォーマンスが低下する可能性があります。

この分析情報では、パフォーマンス トレースで DOM サイズが大きいことが原因で影響を受けたレイアウトのリフローとスタイルの再計算に時間がかかっていることがハイライト表示され、要素の合計数、深さ、子要素の最大数に関する統計情報が提供されます。

console.timeStamp でパフォーマンス トレースを拡張する

拡張機能 API が console.timeStamp をサポートするようになりました。performance.measure と performance.mark に加えて、パフォーマンス トレースでカスタム トラックを作成し、console.timeStamp を使用してカスタムマークをキャプチャできるようになりました。これは、ブラウザの内部のパフォーマンス タイムラインにエントリを追加せず、パフォーマンス トレースにのみ表示する軽量な代替手段です。

たとえば、次の構文を使用できます。

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

[キャプチャ設定] > [check_box カスタム トラックを表示] をオンにすると、トレースにカスタム トラックが表示されます。

[要素] パネルの改善

このバージョンでは、[要素] パネルにさまざまな改善が加えられています。

アニメーション スタイルのリアルタイム値

[要素] > [スタイル] タブで、アニメーション スタイルの値がリアルタイムで更新されるようになりました。

:open 疑似クラスとさまざまな疑似要素のサポート

[要素] パネルの [スタイル] > [:hov] > [特定の要素の状態を強制的に設定] セクションで、<details>、<select>、<dialog>、<input> などの特定の HTML 要素に対して :open 疑似クラスがサポートされるようになりました。

また、[要素] パネルで、::checkmark、::picker-icon、カルーセル関連の ::column、::scroll-button、::scroll-marker、::scroll-marker-group など、いくつかの新しい疑似要素もサポートされるようになりました。

Chromium の問題: 383157184、379805728。

コンソール メッセージをすべてコピーする

コンソール メッセージをすべて一度に右クリックしてコピーできるようになりました。

同様のコピー オプションは、[ネットワーク] > [リクエスト ペイロード] のコンテキスト メニューにもあります。

Chromium の問題: 40206460、384967020。

Memory パネルのバイト単位

[メモリ] パネルに、大きなバイト数ではなく、適切なバイト単位でサイズが表示されるようになりました。

Chromium の問題: 388589515。

その他のハイライト

このリリースにおける注目すべき修正と改善点は次のとおりです。

• パフォーマンス:
  • アノテーション: ラベルをクリックして、対応するエントリを選択できるようになりました（crbug.com/388224764）。
  • 分析情報: [分析情報] タブで CLS をクリックすると、最も影響の大きいシフトではなく、最も影響の大きいクラスタが選択されるようになりました。
• 無視リスト: node: で始まるノード内部がデフォルトで無視されるようになりました（crbug.com/382453615）。
• ライブ式: ライブ式が $_ コマンドに影響するバグを修正しました（crbug.com/388437265）。
• [要素] > [スタイル]: 相対的な長さのポップオーバーに絶対値が表示されるようになりました（crbug.com/40778486）。
• ユーザー補助機能: 列見出しが並べ替え可能かどうかを読み上げるようになりました。
• タブアイコンが左側ではなく、タブ名の右側に表示されるようになりました。

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

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

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

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

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

DevTools の新機能

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