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

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

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

オリジン トライアルでは、新しい機能や試験運用版の機能をご利用いただけます。この機能は、一般公開される前に、ユーザーが期間限定で試すことができます。

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

Chromium の問題: 607555

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

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

Chromium の問題: 1146422

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

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

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

Chromium の問題: 1054464

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

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

Chromium の問題: 1232937

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

DevTools の [Issues] タブに、未加工の 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] ペインで色形式を変更する

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

Chromium の問題: 1226371

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

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

残念ながら、カスタム ツールチップの実装を維持することは複雑であり、複雑なバグに遭遇することがよくあります。

カスタム実装のメリットを再評価した結果、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 の新機能シリーズで取り上げられたすべての内容のリスト。