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 の詳細を表示します。

フレームの詳細を表示

[Application] パネルに 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 の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。