DevTools の新機能（Chrome 94）

Jecelyn Yeen

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

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

[設定] を開き、[設定] でお好みの言語を選択します。[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] を選択します。

Chromium の問題: 1223525

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

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

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

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

Chromium の問題: 607555

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

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

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] パネルにリンクされます。

Chromium の問題: 1179186

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

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

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

Chromium の問題: 1076820、1199247

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

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

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

Chromium に関する問題: 1183990、578269

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

[計算済み] ペインの要素の色形式を変更できるようになりました。それには、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 の問題を報告するには、その他のオプション（） >ヘルプ >DevTools で DevTools の問題を報告します。
• @ChromeDevTools でツイートしてください。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。