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

DevTools の新機能（Chrome 102）

Jecelyn Yeen

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

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

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

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

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

[パフォーマンス分析情報] パネルのドキュメントで、詳細なチュートリアルをご確認ください。

これは、ウェブデベロッパー（特にパフォーマンスに詳しくない方）が潜在的なパフォーマンスの問題を特定して修正するのに役立つプレビュー機能です。Google のチームではこの機能の開発に積極的に取り組んでおり、さらなる機能強化についてのフィードバックをお待ちしています。

Chromium の問題: 1270700

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

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

以前は、[Rendering] タブでテーマをエミュレートするためにより多くのステップが必要でした。

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

Chromium の問題: 1314299

[ネットワークプレビュー] タブのセキュリティを改善しました

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

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

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

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

Chromium の問題: 833147

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

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

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

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

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

Chromium に関する問題: 1014415、1004038、1112863、1134899

Console の更新

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

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

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

Chromium の問題: 1295750

Enter キーでライブ式を commit

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

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

Enter キーでライブ式を commit

Chromium の問題: 1260744

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

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

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

Chromium の問題: 1257499

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

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

仕様で説明したように、複数のスタイルが競合する場合は、カスケードが最適なスタイルを決定します。この新機能により、ルールの継承と優先度を把握できます。

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

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

Chromium の問題: 1024156

その他のハイライト

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

[プロパティ] ペインに、デフォルトで値があるアクセサプロパティが表示されるようになりました。以前に誤って非表示になっていました。（1309087）
[スタイル] ペインで、オーバーライドされた @support ルールが取り消し線として適切に表示されるようになりました。以前は、このルールは取り消し線が引かれませんでした。（1298025）
[Sources] パネルの 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 の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。