DevTools の新機能（Chrome 92）

Jecelyn Yeen

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

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

[Elements] パネルで iframe 要素を右クリックし、[Show frame details] を選択して iframe の詳細を表示します。

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

Chromium の問題: 1192084

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

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

Chromium の問題: 1141824

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

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

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

Chromium の問題: 1201398

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

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

Chromium の問題: 1103638

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

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

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

Chromium の問題: 1174299

[問題] タブでの後方互換モードの問題の報告

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

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

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

Chromium の問題: 622660

パフォーマンス パネルへの Compute Intersections の追加

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

Chromium の問題: 1199137

[Lighthouse] パネルの Lighthouse 7.5

[Lighthouse] パネルで Lighthouse 7.5 が実行されるようになりました。CSS で aspect-ratio が定義されている画像について、「幅と高さが明示的に指定されていない」という警告が表示されなくなりました。以前は、幅と高さが定義されていない画像に対して Lighthouse が警告を表示していました。

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

Chromium の問題: 772558

コールスタックの [Restart frame] コンテキスト メニューを非推奨に

[フレームを再起動] オプションは非推奨になりました。この機能は、正常に動作させるためにさらなる開発が必要であり、現在は不具合があり、頻繁にクラッシュします。

Chromium の問題: 1203606

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

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

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

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

Chromium の問題: 1204004、1204466

[試験運用版] Puppeteer Recorder

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

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

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

Chromium の問題: 1199787

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools のその他 more_vert > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告してください。
• @ChromeDevTools をメンションしてツイートしてください。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残す。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての機能の一覧。