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

DevTools の新機能（Chrome 94）

Jecelyn Yeen

任意の言語で DevTools を使用する

Chrome DevTools が 80 を超える言語に対応し、お好みの言語で作業できるようになりました。

[設定] を開き、[設定] > [言語] プルダウンでご希望の言語を選択し、DevTools を再読み込みします。

設定" width="800" height="494">

Chromium の問題: 1163928

デバイスリストの新しい Google Nest Hub デバイス

Google Nest Hub と Google Nest Hub Max のサイズをデバイスモードでシミュレートできるようになりました。

デバイスのツールバーを切り替えアイコンをクリックし、デバイスリストから Google Nest Hub または Google Nest Hub Max を選択します。

Device モードの Google Nest Hub デバイス

Chromium の問題: 1223525

[Frame details] ビューのオリジントライアル

[Application] パネルのフレームの詳細ビューで、サイトのオリジントライアルに関する情報を取得できるようになりました。

オリジントライアルでは、新機能や試験運用版の機能にアクセスして、一般公開までの期間限定でユーザーが試すことができる機能を構築できます。

オリジントライアルのページ（デモページなど）を開きます。[Application] パネルで [Frames] セクションまで下にスクロールし、一番上のフレームを選択します。

[Frame details] ビューのオリジントライアル

Chromium の問題: 607555

新しい CSS コンテナクエリバッジ

新しいコンテナバッジがコンテナ要素（@container at-rules の条件に一致する祖先要素）の横に追加されます。バッジをクリックすると、選択したコンテナとページ上のすべてのクエリ子孫のオーバーレイの表示が切り替わります。

CSS コンテナクエリのバッジ

Chromium の問題: 1146422

ネットワークフィルタを反転させる新しいチェックボックス

新しい [Invert] チェックボックスを使用すると、[Network] パネルのフィルタを反転できます。

たとえば、「status-code: 404」と入力すると、ステータスが 404 のネットワークリクエストをフィルタできます。[反転] チェックボックスをオンにしてフィルタを無効にします（ステータス 404 以外のネットワークリクエストをすべて表示します）。

ネットワークフィルタを反転する

Chromium の問題: 1054464

コンソールサイドバーのサポート終了予定

フィルタ UI がツールバーに移行するため、コンソールサイドバーが削除されます。ご意見やご質問はございますか？こちらの Issue Tracker からお知らせください。

コンソールサイドバーのサポート終了メッセージ

Chromium の問題: 1232937

[Issues] タブと [Network] パネルに未加工の `Set-Cookie` ヘッダーを表示する

DevTools の [Issues] タブに、未加工の Set-Cookie ヘッダーが表示されるようになりました。

以前は、DevTools では [ネットワーク] パネルに不正な形式の Cookie（不正な Set-Cookie ヘッダー）が表示されませんでした。[Network] パネルに追加された新しい response-header-set-cookie フィルタを使用すると、ユーザーは未加工の Set-Cookie ヘッダーのレスポンスをフィルタリングできます。DevTools によって、[Issues] タブにある未加工の Set-Cookie ヘッダーが [Network] パネルにリンクされます。

[Issues] タブと [Network] パネルの未加工の「Set-Cookie」ヘッダー

Chromium の問題: 1179186

コンソールで一貫したディスプレイネイティブアクセサーを独自のプロパティとして扱う

コンソールで、ネイティブアクセサーが独自のプロパティとして一貫して表示されるようになりました。

たとえば、コンソールで new Int8Array([1, 2, 3]) 式を評価したときに、length、byteOffset などのネイティブアクセサがプレビューに表示されませんでした。この最新のアップデートでは、ネイティブアクセサーがプレビューに表示され、展開されたときに値が積極的に評価されます。

コンソールで一貫したディスプレイネイティブアクセサーを独自のプロパティとして扱う

Chromium に関する問題: 1076820、1199247

#sourceURL を含むインラインスクリプトの適切なエラースタックトレース

DevTools で、#sourceURL を使用してインラインスクリプトが適切に解決され、デバッグに適したエラースタックトレースが表示されるようになりました。

以前の DevTools では、#sourceURL のインラインスクリプトの場所が、<script> 開始タグではなく、周囲のドキュメントに対して正しく表示されていました。

#sourceURL を含むインラインスクリプトの適切なエラースタックトレース

Chromium に関する問題: 1183990、578269

[計算済み] ペインで色形式を変更する

Shift キーを押しながらカラープレビューをクリックすると、計算済みペインの任意の要素のカラー形式を変更できるようになりました。

色形式を変更するには、Shift キーを押しながらカラープレビューをクリックします

Chromium の問題: 1226371

DevTools で、すべてのコンポーネントでネイティブ HTML ツールチップが導入されました。DevTools には、ネイティブ HTML ツールチップのスタイルがないため、カスタムツールチップが実装されてきました。

残念ながら、カスタムツールチップの実装の維持は複雑で、複雑なバグに定期的に遭遇します。

カスタム実装のメリットについて重点的に検討した結果、DevTools にはネイティブ HTML ツールチップで十分であり、ツールチップを採用することで、ユーザーにとってのさまざまな問題を回避できることがわかりました。

DevTools のツールチップ

Chromium の問題: 1223391

[試験運用版] [問題] タブで問題を非表示にする

試験運用版の [問題メニューを非表示] を有効にすると、[問題] タブの問題を非表示にできます。そうすることで、重要な問題に集中できます。

[問題] タブで問題にカーソルを合わせて問題メニューをクリックし、[類似する問題を非表示] を選択して非表示にします。

問題の非表示コンテキストメニュー（試験運用版）

Chromium の問題: 1175722

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

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

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

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

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