このページは 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 要素を右クリックし、[フレームの詳細を表示] を選択します。

フレームの詳細を表示

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

フレームの詳細ビュー

Chromium の問題: 1192084

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

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

[Issues] タブの 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 で、互換モードと制限付きモードに関する問題の報告が報告されるようになりました。

互換モードと限定互換モードは、ウェブ標準が作られる前の従来のブラウザモードです。これらのモードでは、しばしば想定外の視覚効果を引き起こすことが多い、標準時代の前後のレイアウト動作をエミュレートします。

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

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

Chromium の問題: 622660

パフォーマンスパネルに Compute Intersections を含める

DevTools のフレームチャートに [Compute Intersections] が表示されます。これらの変更は、Intersection Observer イベントを特定し、その潜在的なパフォーマンスオーバーヘッドをデバッグする際に役立ちます。

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

Chromium の問題: 1199137

[Lighthouse] パネルに表示された Lighthouse 7.5

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

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

Chromium の問題: 772558

コールスタックの [Restart Frame] コンテキストメニューが非推奨になりました

[フレームを再起動] オプションのサポートが終了しました。この機能をうまく動作させるには、さらなる開発が必要です。現時点では壊れているため、しばしばクラッシュします。

「フレームの再起動」コンテキストメニューが非推奨になりました

Chromium の問題: 1203606

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

Chrome DevTools では、Chrome DevTools プロトコル（CDP）を使用して、Chrome ブラウザの計測、検査、デバッグ、プロファイリングを行います。プロトコルモニターでは、DevTools から送信されたすべての CDP リクエストとレスポンスを確認できます。

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

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

プロトコルモニター

Chromium に関する問題: 1204004、1204466

[試験運用版] 人形劇のレコーダー

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

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

なお、この試験運用は初期段階の試験運用です。今後、レコーダー機能を改善、拡張していく予定です。

人形劇のレコーダー

Chromium の問題: 1199787

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

Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビューチャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブプラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。