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 ステートメントの再宣言がサポートされるようになりました。再宣言できないことは、Console を使用して新しい JavaScript コードをテストするウェブ デベロッパーにとって一般的な不満でした。

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

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

  • const REPL スクリプトでページ スクリプトを再宣言できない
  • 同じ REPL スクリプト内での const の再宣言は許可されません（変数 b を参照）。

const の再宣言

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

[ネットワーク状況] タブのデバイスの User-Agent Client Hints

User-Agent Client Hints が、[ネットワークの状態] タブの [ユーザー エージェント] フィールドのデバイスに適用されるようになりました。

User-Agent Client Hints は、Client Hints API の新しい拡張機能です。これにより、デベロッパーはプライバシーを保護し、使いやすい方法でユーザーのブラウザに関する情報にアクセスできます。

[ネットワーク状況] タブのデバイスの User-Agent Client Hints

Chromium の問題: 1174299

[問題] タブで Quirks モードの問題を報告する

DevTools で、Quirks モードと限定 Quirks モードの問題が報告されるようになりました。

クイックモードと限定クイックモードは、ウェブ標準が策定される前の以前のブラウザ モードです。これらのモードは、標準化以前のレイアウト動作をエミュレートするため、予期しない視覚効果が生じることがあります。

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

[問題] タブで Quirks モードの問題を報告する

Chromium の問題: 622660

[パフォーマンス] パネルに交差の計算を追加

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

CDP のテストが容易になるように、2 つの新しい関数が追加されました。

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

プロトコル モニター

Chromium の問題: 1204004、1204466

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

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

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

これは初期段階の試験運用である点にご注意ください。今後、レコーダーの機能を改善し、拡張していく予定です。

Puppeteer Recorder

Chromium の問題: 1199787

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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