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

DevTools の新機能（Chrome 94）

Jecelyn Yeen

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

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

[Settings] を開き、[Preferences] > [Language] プルダウンから目的の言語を選択して、DevTools を再読み込みします。

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

Chromium の問題: 1163928

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

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

[デバイスツールバーを切り替える] をクリックし、デバイスリストで [Google Nest Hub] または [Google Nest Hub Max] を選択します。

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

Chromium の問題: 1223525

[フレームの詳細] ビューのオリジントライアル

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

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

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

[フレームの詳細] ビューのオリジントライアル

Chromium の問題: 607555

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

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

CSS コンテナクエリバッジ

Chromium の問題: 1146422

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

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

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

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

Chromium の問題: 1054464

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

コンソールのサイドバーが削除され、フィルタ UI がツールバーに移動されます。懸念事項やフィードバックはありますか？こちらの公開バグトラッカーからお知らせください。

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

Chromium の問題: 1232937

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

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

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

[問題] タブと [ネットワーク] パネルの未加工の「Set-Cookie」ヘッダー

Chromium の問題: 1179186

コンソールでネイティブアクセサーを独自のプロパティとして常に表示

Google Play Console で、ネイティブアクセサーが固有のプロパティとして一貫して表示されるようになりました。

たとえば、コンソールで 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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。