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

DevTools の新機能（Chrome 92）

Jecelyn Yeen

CSS グリッドエディタ

ご要望の多かった機能です。新しい CSS グリッドエディタで、CSS グリッドをプレビューして作成できるようになりました。

CSS グリッドエディタ

ページの HTML 要素に display: grid または display: inline-grid が適用されている場合、[スタイル] ペインでその横にアイコンが表示されます。アイコンをクリックすると、CSS グリッドエディタが切り替わります。ここでは、画面上のアイコン（justify-content: space-around など）で潜在的な変更をプレビューしたり、ワンクリックでグリッドの外観を作成したりできます。

Chromium の問題: 1203241

コンソールでの `const` 再宣言のサポート

コンソールでは、既存の let と class の再宣言に加えて、const ステートメントの再宣言がサポートされるようになりました。再宣言できないのは、コンソールを使用して新しい JavaScript コードをテストするウェブデベロッパーにとって、よく悩みの種でした。

これにより、デベロッパーはコードをコピーして DevTools コンソールに貼り付け、動作を確認したりテストしたり、コードを少し変更して、ページを更新せずに同じプロセスを繰り返すことができます。以前は、コードが const バインディングを再宣言すると、DevTools が構文エラーをスローしていました。

以下の例を参照してください。const の再宣言は、個別の REPL スクリプト全体でサポートされます（変数 a をご覧ください）。以下のシナリオは設計上サポートされていません。

REPL スクリプトでは、ページスクリプトの const 再宣言が許可されていません
同じ REPL スクリプト内で const の再宣言を行うことはできません（変数 b を参照）

定数の再宣言

Chromium の問題: 1076427

ソースオーダー閲覧者

ユーザー補助機能の検査を改善するために、画面上のソース要素の順序を確認できるようになりました。

ソースオーダー閲覧者

HTML ドキュメント内のコンテンツの順序は、検索エンジンの最適化とアクセシビリティにとって重要です。この新しい CSS 機能を使用すると、デベロッパーは、HTML ドキュメントとは画面上での表示順序が大きく異なるコンテンツを作成できます。これは、スクリーンリーダーのユーザーが目にするユーザーとは異なる、混乱を招く可能性が高いため、アクセシビリティに大きな問題があります。

Chromium の問題: 1094406

フレームの詳細を表示する新しいショートカット

[要素] パネルで iframe 要素を右クリックし、[フレームの詳細を表示] を選択して iframe の詳細を表示します。

フレームの詳細を表示

[アプリケーション] パネルに iframe の詳細が表示され、ドキュメントの詳細、セキュリティと分離のステータス、権限ポリシーなどを調べて、潜在的な問題をデバッグできます。

フレームの詳細ビュー

Chromium の問題: 1192084

CORS デバッグサポートの強化

クロスオリジンリソースシェアリング（CORS）のエラーが [問題] タブに表示されるようになりました。CORS エラーにはさまざまな原因があります。各問題をクリックして展開すると、考えられる原因と解決策を確認できます。

[問題] タブの CORS の問題

Chromium の問題: 1141824

ネットワークパネルの更新

XHR ラベルの名前を Fetch/XHR に変更する

XHR ラベルの名前が Fetch/XHR に変更されました。この変更により、このフィルタに XMLHttpRequest と Fetch API の両方のネットワークリクエストが含まれていることがより明確になります。

取得/XHR ラベル

Chromium の問題: 1201398

[ネットワーク] パネルで Wasm リソースタイプをフィルタする

新しい [Wasm] ボタンをクリックして、Wasm ネットワークリクエストをフィルタできるようになりました。

Wasm でフィルタ

Chromium の問題: 1103638

[Network conditions] タブに表示されるデバイスの User-Agent Client Hints API

User-Agent Client Hints が、[Network conditions] タブの [User agent] フィールドのデバイスに適用されるようになりました。

User-Agent Client Hints は、Client Hints API の新しい拡張です。デベロッパーは、プライバシーを保護し、人間工学に基づいた方法でユーザーのブラウザに関する情報にアクセスできます。

[Network conditions] タブに表示されるデバイスの User-Agent Client Hints API

Chromium の問題: 1174299

[問題] タブで互換モードに関する問題を報告する

DevTools で、Quirks Mode とLimited-quirks Mode の問題を報告するようになりました。

後方互換モードと限定版は、ウェブ標準が確立される前の従来のブラウザモードです。これらのモードでは、予期しない視覚効果を引き起こすことの多い、標準以前のレイアウト動作をエミュレートします。

レイアウトの問題をデバッグする際、デベロッパーはユーザー作成の CSS または HTML のバグが原因であると考えがちですが、実際の問題はページが互換モードになっていることです。DevTools に修正候補が表示されます。

[問題] タブで互換モードに関する問題を報告する

Chromium の問題: 622660

[Performance] パネルに Compute Intersections を含める

DevTools のフレームチャートに [Compute Intersections] が表示されるようになりました。これらの変更により、交差オブザーバーイベントを特定し、潜在的なパフォーマンスオーバーヘッドをデバッグできます。

[パフォーマンス] パネルで交差を計算する

Chromium の問題: 1199137

Lighthouse パネル内の Lighthouse 7.5

Lighthouse パネルでは Lighthouse 7.5 が実行中になりました。CSS で aspect-ratio が定義された画像に対する「明示的な幅と高さがありません」という警告が削除されました。Lighthouse では以前、幅と高さが定義されていない画像に関する警告が表示されていました。

変更内容の完全なリストについては、リリースノートをご覧ください。

Chromium の問題: 772558

コールスタックの「フレームを再起動」コンテキストメニューを非推奨にしました

[フレームを再起動] オプションのサポートは終了しました。この機能を正常に動作させるにはさらなる開発が必要です。現在は壊れており、頻繁にクラッシュします。

フレームの再起動のコンテキストメニュー（非推奨）

Chromium の問題: 1203606

[試験運用版] プロトコルモニター

Chrome DevTools では、Chrome DevTools Protocol（CDP）を使用して Chrome ブラウザの計測、検査、デバッグ、プロファイリングを行います。プロトコルモニターでは、DevTools によって行われたすべての CDP リクエストとレスポンスを表示できます。

CDP のテストを促進するために、2 つの新しい関数が追加されました。

新しい [Save] ボタンを使用すると、録音されたメッセージを JSON ファイルとしてダウンロードできます。
未加工の CDP コマンドを直接送信できる新しいフィールド

プロトコルモニター

Chromium の問題: 1204004、1204466

[試験運用版] Puppeteer レコーダー

以前は DevTools が直接 Puppeteer スクリプトを生成していましたが、Puppeteer レコーダーは、ブラウザとのやり取りに基づいてステップのリストを生成するようになりました。新しい [Export] ボタンが追加され、ステップを Puppeteer スクリプトとしてエクスポートできるようになりました。

ステップを記録したら、新しく追加された [Replay] ボタンを使用してステップを再生できます。録画を開始する方法については、こちらの手順をご覧ください。

これは初期段階のテストです。今後、レコーダー機能の改善と拡張を予定しています。

Puppeteer レコーダー

Chromium の問題: 1199787

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。