Chrome 134 の DevTools の新機能

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

[セキュリティ] パネルに [プライバシー] セクションを追加する前と後。

Chromium の問題: 352364594。

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

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

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

低中価格帯のモバイル デバイスをより正確に近似する 2 つの CPU スロットリング プリセットを自動的にキャリブレーションして取得できるようになりました。

[パフォーマンス] > [CPU スロットリング] プルダウン メニューで [キャリブレーション...] を選択し、[設定] で [キャリブレーション]、[続行] の順にクリックし、DevTools がデバイスの低速化率を計算するのを待ちます。キャリブレーション済みのスロットリング オプションは、[パフォーマンス] > [CPU スロットリング] プルダウン メニューで確認できます。

スロットル キャリブレーションの追加前と追加後。

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

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

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

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

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

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

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

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

フィールドデータをマーカーのツールチップと [分析情報] タブに追加する前と後。

Chromium の問題: 368135130。

「強制リフロー」インサイト

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

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

[強制再フロー] 分析情報を追加する前と後。

Chromium の問題: 369766156。

「DOM サイズを最適化する」分析情報

新しい分析情報として、DOM サイズを最適化する機能も追加されました。DOM ツリーのサイズが大きくなると、ページのパフォーマンスが低下する可能性があります。

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

[DOM サイズを最適化する] 分析情報を追加する前と後。

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

Extensibility 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");

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

console.timeStamp のサポートを追加する前と後。

要素パネルの改善

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

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

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

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

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

&#39;:open&#39; オプションを追加する前と後。

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

Chromium の問題: 383157184、379805728。

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

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

[コンソールをコピー] オプションを追加する前と後。

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

Chromium の問題: 40206460、384967020。

[メモリ] パネルのバイト単位

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

バイト単位を表示する前と後。

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 の新機能、更新、その他のトピックについて話し合います。

DevTools の新機能

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