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

DevTools の新機能（Chrome 88）

Jecelyn Yeen

DevTools の起動の高速化

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

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

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

Chromium の問題: 1029427

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

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

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 の問題

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" によってフィルタされます。

Service Worker から [Network] パネルを開く

Chromium の問題: なし

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

プロパティ値をコピー

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

プロパティ値をコピー

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

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

Chromium の問題: 1132084

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

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

スタックトレースをコピーする

Chromium の問題: 1139615

Wasm デバッグの更新

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

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

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

マウスオーバーで Wasm 変数をプレビューする

Chromium の問題: 1058836、1071432

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

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

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

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

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

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

CSS Flex のデバッグ

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 動画にコメントを残してください。