DevTools の新機能（Chrome 102）

Jecelyn Yeen

プレビュー機能: 新しい [パフォーマンス分析情報] パネル

[パフォーマンス分析情報] パネルを使用すると、ウェブサイトのパフォーマンスに関する実用的な分析情報を、ユースケースに基づいて確認できます。

パネルを開き、ユースケースに応じて新しい録音を開始します。たとえば、このデモページのページ読み込みを測定します。

新しい [パフォーマンス分析情報] パネル

録画が完了すると、[分析情報] ペインにパフォーマンス分析情報が表示されます。各分析情報アイテム（レンダリング ブロック リクエスト、レイアウト シフトなど）をクリックすると、問題と考えられる解決策を確認できます。

詳しくは、パフォーマンス分析情報パネルのドキュメントでチュートリアルをご覧ください。

これは、ウェブ デベロッパー（特にパフォーマンス エキスパートではないデベロッパー）が潜在的なパフォーマンスの問題を特定して修正するのに役立つプレビュー機能です。現在、この機能に全力で取り組んでおり、さらなる機能強化に向けて皆様からのフィードバックをお待ちしております。

Chromium の問題: 1270700

ライトモードとダークモードをエミュレートする新しいショートカット

[スタイル] ペインに新しいショートカットが追加され、明るいテーマと暗いテーマ（CSS メディア特性 prefers-color-scheme）をより簡単にエミュレートできるようになりました。

これまでは、[レンダリング] タブでテーマをエミュレートするには、より多くの手順が必要でした。

ライトモードとダークモードをエミュレートする新しいショートカット

Chromium の問題: 1314299

[ネットワーク プレビュー] タブのセキュリティを強化

DevTools で、[ネットワーク] パネルの [プレビュー] タブにコンテンツ セキュリティ ポリシー（CSP）が適用されるようになりました。

たとえば、最初のスクリーンショットは、混合コンテンツを含むページを示しています。ページは安全な HTTPS 接続で読み込まれるが、スタイルシートは安全でない HTTP 接続で読み込まれる。

ブラウザはデフォルトでスタイルシート リクエストをブロックしていました。ただし、[ネットワーク] パネルの [プレビュー] タブからページを開いたときには、スタイルシートはブロックされていませんでした（そのため、背景が赤色になっています）。想定どおりにブロックされています（2 番目のスクリーンショット）。

[ネットワーク プレビュー] タブでセキュリティを強化する

Chromium の問題: 833147

ブレークポイントでの再読み込みを改善

ブレークポイントで再読み込みすると、デバッガがスクリプトの実行を終了するようになりました。

たとえば、この React デモでは、ReactDOM ブレークポイントで設定と再読み込みを行うと、スクリプトが無限ループに陥っていました。無限ループにより [ソース] パネルが機能しなくなった。

JavaScript の実行を継続すると、デベロッパーに多くの問題が発生し、レンダラが破損した状態になる可能性があります。この変更により、デバッグ動作が Firefox などの他のブラウザと一致するようになります。

ブレークポイントでの再読み込みを改善

Chromium の問題: 1014415、1004038、1112863、1134899

Console の更新

コンソールでスクリプト実行エラーを処理する

Console でスクリプトの評価中にエラーが発生した場合、適切なエラーイベントが生成され、window.onerror ハンドラがトリガーされ、window オブジェクトで "error" イベントとしてディスパッチされるようになりました。

コンソールでスクリプト実行エラーを処理する

Chromium の問題: 1295750

Enter キーでライブ式を commit する

ライブ式の入力が完了したら、Enter をクリックして commit します。以前は、Enter キーを押すと改行が追加されていました。これは、DevTools の他の部分と整合していません。

ライブ式エディタで新しい行を追加するには、代わりに Shift + Enter を使用します。

Enter キーでライブ式を commit する

Chromium の問題: 1260744

開始時にユーザーフローの記録をキャンセルする

ユーザーフローの録画の開始時に録画をキャンセルできます。これまでは、録音をキャンセルするオプションはありませんでした。

開始時にユーザーフローの記録をキャンセルする

Chromium の問題: 1257499

継承されたハイライト疑似要素を [スタイル] ペインに表示

継承されたハイライト疑似要素（::selection、::spelling-error、::grammar-error、::highlight など）は、[スタイル] ペインで確認できます。これまで、これらのルールは表示されませんでした。

仕様に記載されているように、複数のスタイルが競合する場合、カスケードによって優先されるスタイルが決まります。この新機能は、ルールの継承と優先度を把握するのに役立ちます。

継承されたハイライト疑似要素を [スタイル] ペインに表示

Chromium の問題: 1024156

その他のハイライト

このリリースで修正された主な点は次のとおりです。

  • [プロパティ] ペインに、値を含むアクセサラ プロパティがデフォルトで表示されるようになりました。以前は誤って非表示になっていました。（1309087）
  • [スタイル] ペインで、オーバーライドされた @support ルールが取り消し線付きで正しく表示されるようになります。以前は、ルールは取り消し線付きではありませんでした。（1298025）
  • CSS の編集時に複数の空行が発生する原因となっていた、[ソース] パネルの CSS フォーマット ロジックを修正しました。（1309588）
  • コンソールでオブジェクトの [再帰的に展開] オプションを最大 100 に制限し、円形のオブジェクトが永遠に続かないようにしました。（1272450）

[試験運用版] CSS の変更をコピーする

このテストでは、[スタイル] ペインに CSS の変更が緑色でハイライト表示されます。変更したルールにカーソルを合わせ、その横にある新しいコピーボタンをクリックしてコピーできます。

また、任意のルールを右クリックして [CSS の変更をすべてコピー] を選択すると、宣言全体の CSS の変更をすべてコピーできます。

[変更] タブに新しい [コピー] ボタンが追加され、CSS の変更を簡単に追跡、コピーできるようになりました。

CSS の変更をコピーする

Chromium の問題: 1268754

[試験運用版] ブラウザ外での色選択

この試験運用版を有効にすると、カラー選択ツールでブラウザの外部から色を選択できます。これまでは、色を選択できるのはブラウザ内だけでした。

[スタイル] ペインで任意のカラー プレビューをクリックして、カラー選択ツールを開きます。スポイトツールを使用して、どこからでも色を選択できます。

ブラウザの外部で色を選択する

Chromium の問題: 1245191

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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