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 の更新

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

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

Chromium の問題: 1295750

Enter キーでライブ式を確定

ライブ式の入力を完了したら、Enter をクリックして確定できます。以前は、Enter キーを押すと改行されていましたが、これは DevTools の他の部分と矛盾しています。

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

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 の変更を簡単に追跡してコピーできるようになりました。

Chromium の問題: 1268754

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

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

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

Chromium の問題: 1245191

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

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

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

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

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

DevTools の新機能

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