DevTools の新機能（Chrome 88）

DevTools の起動の高速化

DevTools の起動が、JavaScript コンパイルの点で（6.9 秒から 5 秒に）約 37% 高速化されました。🎉

チームは、シリアル化、解析、変換のパフォーマンス オーバーヘッドを削減するために、 逆シリアル化を行う場合があります。

実装の詳細については、エンジニアリング ブログの投稿を予定しています。どうぞご期待ください。

Chromium の問題: 1029427

新しい CSS 角度可視化ツール

DevTools での CSS アングルのデバッグのサポートが強化されました。

ページの HTML 要素に CSS アングルが適用されている場合（例: background: linear-gradient(angle, color-stop1, color-stop2)、transform: rotate(angle)）、時計 アイコンが [スタイル] ペインの角度の横に表示されます。時計のアイコンをクリックして時計を切り替えます オーバーレイします。時計の任意の場所をクリックするか、針をドラッグして角度を変えてください！

角度の値を変更するためのマウス ショートカットとキーボード ショートカットもあります。詳しくは、 ドキュメントをご覧ください。

Chromium の問題: 1126178、1138633

サポートされていないイメージタイプをエミュレートする

DevTools の [レンダリング] タブに 2 つの新しいエミュレーションが追加され、AVIF 画像と WebP 画像を無効にできるようになりました 使用できます。これらの新しいエミュレーションにより、デベロッパーはさまざまな画像の読み込みを簡単にテストできます ブラウザを切り替えずに使用できます

新しいブラウザ向けに AVIF と WebP で画像を提供する、次の HTML コードがあるとします。 古いブラウザの場合は PNG 代替画像

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

[レンダリング] タブを開き、[AVIF 画像形式を無効にする] を選択します。ページを更新します。[ img src。現在の画像 src（currentSrc）が代替 WebP 画像になりました。

Chromium の問題: 1130556

[Storage] ペインで保存容量の割り当てサイズをシミュレートする

[ストレージ] ペインで保存容量の割り当てサイズをオーバーライドできるようになりました。この機能を使用すると さまざまなデバイスをシミュレートして、ディスクの可用性が低いシナリオでアプリの動作をテストします。

[アプリケーション] >[ストレージ] で [カスタム ストレージの割り当てをシミュレート] チェックボックスをオンにする 保存容量をシミュレートするために、有効な数値を入力します。

Chromium の問題: 945786、1146985

パフォーマンス パネルの録画に表示される新しい「ウェブに関する指標」レーン

パフォーマンスの録画に、ウェブに関する指標の情報を表示するオプションが追加されました。

読み込みのパフォーマンスを記録したら、[Performance] パネルの [Web Vitals] チェックボックスをオンにします。 新しい Web Vitals をご覧ください

このレーンには現在、First Contentful Paint（FCP）などのウェブに関する指標の情報が表示されます。 Largest Contentful Paint（LCP）と Layout Shift（LS）。

ウェブのユーザー エクスペリエンスを最適化する方法について詳しくは、web.dev/vitals をご覧ください。 指標。

Chromium の問題: なし

[ネットワーク] パネルで CORS エラーを報告する

クロスオリジン リソース シェアリングが原因でネットワーク リクエストが失敗した場合、DevTools で CORS エラーが表示されるようになりました (CORS).

[ネットワーク] パネルで、失敗した CORS ネットワーク リクエストを確認します。ステータス列に [CORS] が error」というエラーが表示される）エラーにカーソルを合わせると、ツールチップにエラーコードが表示されます。これまでは DevTools のみでした。 CORS エラーに対して汎用的な「(failed)」ステータスが表示される。

これを利用して、サイトの詳細な説明を提供する CORS の問題

Chromium の問題: 1141824

フレームの詳細ビューの更新

フレームの詳細ビューのクロスオリジン分離情報

[セキュリティと分離セクションを参照してください。

新しい [API の可用性] セクションには、SharedArrayBuffer（SAB）と postMessage() を使用して共有できるかどうか。

非店舗型ビジネスと postMessage() が現在利用可能な場合、サポート終了の警告が表示されますが、 分離されません。クロスオリジン分離とその理由の詳細 SharedArrayBuffers などの機能には、こちらの記事をご覧ください。

Chromium の問題: 1139899

フレームの詳細ビューの新しいウェブワーカー情報

DevTools では、ウェブワーカーを作成するフレームの下に専用のウェブワーカーが表示されるようになりました。

[アプリケーション] パネルで、ウェブ ワーカーを含むフレームを展開し、 Workers ツリー。ウェブワーカーの詳細を表示できます。

Chromium の問題: 1122507、1051466

開いているウィンドウのオープナー フレームの詳細を表示する

別のウィンドウが開く原因となったフレームの詳細を確認できるようになりました。

[Frames] ツリーの下で開いているウィンドウを選択すると、ウィンドウの詳細が表示されます。[冒頭部分] をクリックします。 フレーム] をクリックすると、[要素] パネルにオープナーが表示されます。

Chromium の問題: 1107766

[Service Worker] ペインから [ネットワーク] パネルを開く

新しい [ネットワーク リクエスト] リンクでは、すべての Service Worker（SW）リクエストのルーティング情報を確認できます。 これにより、デベロッパーは SW をデバッグする際に追加のコンテキストが提供されます。

[アプリケーション] >[Service Workers] で、SW の [Network requests] をクリックします。「 下部のパネルで [ネットワーク] パネルが開き、Service Worker 関連のすべてのリクエスト（ ネットワーク リクエストは "is:service-worker-intercepted" によってフィルタされます。

Chromium の問題: なし

[ネットワーク] パネルの新しいコピー オプション

プロパティ値をコピー

コンテキスト メニューに新しい [値をコピー] オプションが追加され、ネットワークのプロパティ値をコピーできるようになりました リクエストできます。

[ネットワーク] パネルで、ネットワーク リクエストをクリックして [ヘッダー] ペインを開きます。右クリック [Request Payload（JSON）Form Data Query String Parameters] セクションのプロパティのうち 1 つをご覧ください。 リクエスト ヘッダー レスポンス ヘッダー

[値をコピー] を選択してプロパティ値をクリップボードにコピーします。

Chromium の問題: 1132084

ネットワーク イニシエータのスタック トレースをコピーする

ネットワーク リクエストを右クリックし、[スタックトレースをコピー] を選択して、スタックトレースを クリックします。

Chromium の問題: 1139615

Wasm デバッグの更新

マウスオーバー時に Wasm 変数の値をプレビュー

ブレークポイントで一時停止しているときに WebAssembly（Wasm）逆アセンブルで変数にカーソルを合わせると、 DevTools に変数の現在の値が表示されるようになりました。

[Sources] パネルで Wasm ファイルを開き、ブレークポイントを設定してページを更新します。カーソルを合わせる 値を確認します。

Chromium の問題: 1058836、1071432

コンソールで Wasm 変数を評価する

コンソールで、ブレークポイントで一時停止しながら Wasm 変数を評価できるようになりました。

この例では、local.get $input 行にブレークポイントを設定しています。デバッグ時に「$input」と入力します。 変数の現在の値（この場合は 4）が返されます。

Chromium の問題: 1127914

ファイル/メモリサイズの測定単位を統一

DevTools で、ファイル/メモリサイズの表示に一貫して kB が使用されるようになりました。以前の DevTools には KB が混在していました。 KiB（1,024 バイト）があります。たとえば、以前は [ネットワーク] パネルでは「kB」を使用していました。ラベルですが、 KiB を使用して計算を実行していたため、不必要な混乱が生じていました。

Chromium の問題: 1035309

[要素] パネルで疑似要素をハイライト表示する

DevTools で疑似要素の色のコントラストが引き上げられ、見分けやすくなりました。

Chromium の問題: 1143833

試験運用版の機能

CSS Flexbox デバッグツール

Flexbox のデバッグツールがリリースされます。

まず、DevTools の [Elements] パネルに、flex display: flex を適用しました。

さらに、以下の Flexbox プロパティに新しい配置アイコンが追加されます。

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

さらに、これらのアイコンはコンテキスト アウェアです。アイコンの向きは、以下に基づいて調整されます。

• flex-direction
• direction
• writing-mode

これらのアイコンは、ページのフレックスボックス レイアウトを見やすくすることを目的としています。

Flexbox のツール機能の設計ドキュメントをご覧ください。近日中にさらに多くの機能が追加される予定です。

ご利用とご感想をお待ちしております。

Chromium の問題: 1144090、1139945

和音のキーボード ショートカットをカスタマイズ

前回のリリース以降、DevTools でキーボード ショートカットのカスタマイズの試験運用版のサポートが追加されました。

ショートカット エディタでコード（複数キー入力のショートカット）を作成できるようになりました。

[設定] に移動します。ショートカット: コマンドにカーソルを合わせて [編集] ボタン（ペンアイコン）をクリック 和音のショートカットをカスタマイズします。

Chromium の問題: 174309

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

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

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

この投稿で紹介した新機能や変更点、またはその他の DevTools に関連する内容について話し合うには、以下のオプションを使用してください。

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

DevTools の新機能

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