このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 102）

Jecelyn Yeen

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

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

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

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

記録が完了すると、[分析情報] ペインにパフォーマンス分析情報が表示されます。各分析情報の項目（レンダリングブロックリクエスト、レイアウトシフトなど）をクリックして、問題と可能な修正方法を把握します。

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

これは、ウェブデベロッパー（特にパフォーマンスのエキスパートではない）が潜在的なパフォーマンスの問題を特定して修正できるようにするプレビュー機能です。Google のチームはこの機能に積極的に取り組んでおり、さらなる機能改善に関するフィードバックをお待ちしています。

Chromium の問題: 1270700

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

[Styles] ペインの新しいショートカットにより、ライトモードとダークモード（CSS メディア機能 prefers-color-scheme）をすばやくエミュレートできるようになりました。

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

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

Chromium の問題: 1314299

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

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

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

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

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

Chromium の問題: 833147

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

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

たとえば、以前にこの React のデモで ReactDOM ブレークポイントを設定して再読み込みすると、スクリプトが無限ループに陥っていました。エンドレスループが原因で、[ソース] パネルが破損しました。

JavaScript の実行を続けると、デベロッパーに多くの問題を引き起こし、レンダラが壊れた状態のままになる可能性があります。この変更により、Firefox などの他のブラウザとのデバッグ動作が整合します。

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

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

Console の更新

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

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

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

Chromium の問題: 1295750

Enter キーでライブ式を commit

実際の式の入力が完了したら、Enter をクリックして commit できます。以前は、Enter キーを押すと新しい行が追加されていました。これは DevTools の他の部分と矛盾しています。

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

Enter キーでライブ式を commit

Chromium の問題: 1260744

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

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

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

Chromium の問題: 1257499

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

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

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

注: 現在のところ、この機能を有効にするには、--enable-blink-features=HighlightInheritance フラグを指定して Chrome を実行する必要があります。

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

Chromium の問題: 1024156

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

[プロパティ] ペインに、デフォルトで値とともにアクセサーのプロパティが表示されるようになりました。以前は誤って非表示になっていました。（1309087）。
[Styles] ペインで、オーバーライドされた @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 に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。