DevTools の新機能（Chrome 94）

Jecelyn Yeen

DevTools をご希望の言語で使用する

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

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

Preferences" width="800" height="494">

Chromium の問題: 1163928

デバイスリストに新しい Google Nest Hub デバイスが表示される

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

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

Chromium の問題: 1223525

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

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

オリジン トライアルでは、新しい機能や試験運用版の機能をご利用いただけます。ユーザーが一定期間試用できる機能を構築し、その後、その機能をすべてのユーザーに公開できます。

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

Chromium の問題: 607555

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

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

Chromium の問題: 1146422

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

新しい [反転] チェックボックスを使用して、[ネットワーク] パネルのフィルタを反転します。

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

Chromium の問題: 1054464

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

コンソールのサイドバーは削除され、フィルタ UI がツールバーに移動します。ご不明な点やご意見がございましたら、Issue Tracker からお知らせください。

Chromium の問題: 1232937

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

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

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

Chromium の問題: 1179186

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

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

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

Chromium の問題: 1076820、1199247

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

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

以前は、DevTools で #sourceURL を含むインライン スクリプトの場所が、開始 <script> タグを基準とするのではなく、周囲のドキュメントを基準として誤って表示されていました。

Chromium の問題: 1183990、578269

[Computed] ペインで色形式を変更する

[計算値] ペインで、カラー プレビューを Shift + クリックすると、任意の要素の色形式を変更できるようになりました。

Chromium の問題: 1226371

カスタム ツールチップをネイティブ HTML ツールチップに置き換える

DevTools で、すべてのコンポーネントでネイティブ HTML ツールチップが採用されるようになりました。DevTools では、ネイティブの HTML ツールチップのスタイル設定が不足しているため、カスタム ツールチップの実装が長らく行われてきました。

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

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

Chromium の問題: 1223391

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

[問題の表示切り替えメニュー] テストを有効にすると、[問題] タブの問題を非表示にできます。これにより、重要な問題に集中できます。

[問題] タブで、問題にカーソルを合わせ、右側の問題メニュー アイコン をクリックして、[このような問題を非表示にする] を選択して非表示にします。

Chromium の問題: 1175722

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

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

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

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

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

DevTools の新機能

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