このページは 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 の画像形式を無効にできるようになりました。これらの新しいエミュレーションにより、デベロッパーはブラウザを切り替えることなく、さまざまな画像読み込みシナリオを簡単にテストできます。

次の HTML コードを使用して、新しいブラウザには AVIF と WebP で画像を提供し、古いブラウザには代替 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 で、Web Vitals の指標を使用してユーザーエクスペリエンスを最適化する方法の詳細を確認してください。

ウェブに関する指標のレーン

Chromium の問題: なし

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

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

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

これは、CORS の問題をより詳細に説明するための次の機能強化の基礎となります。

CORS エラー

Chromium の問題: 1141824

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

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

[セキュリティと分離] セクションに、クロスオリジン分離ステータスが表示されるようになりました。

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

SAB と postMessage() が現在利用可能であるものの、コンテキストがクロスオリジン分離されていない場合は、非推奨の警告が表示されます。クロスオリジン分離の詳細と、SharedArrayBuffers などの機能にクロスオリジン分離が必要な理由については、こちらの記事をご覧ください。

クロスオリジン情報

Chromium の問題: 1139899

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

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

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

ウェブワーカーの情報

Chromium の問題: 1122507、1051466

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

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

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

オープナーフレームの詳細

Chromium の問題: 1107766

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

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

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

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

Chromium の問題: なし

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

プロパティ値をコピー

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

プロパティ値をコピー

[ネットワーク] パネルで、ネットワークリクエストをクリックして [ヘッダー] ペインを開きます。[Request Payload (JSON) Form Data Query String Parameters] [Request Headers [Response Headers] セクションにあるプロパティのいずれかを右クリックします。

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

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（1,000 バイト）と KiB（1,024 バイト）が混在していました。たとえば、ネットワークパネルでは以前は「kB」ラベルを使用していましたが、実際には KiB を使用して計算を実行したため、不必要な混乱が生じていました。

Chromium の問題: 1035309

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

DevTools では、疑似要素を見分けやすくするために、疑似要素の色のコントラストが強くなりました。

疑似元素を強調する

Chromium の問題: 1143833

試験運用版の機能

CSS Flexbox デバッグツール

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

まず、DevTools の [Elements] パネルに、display: flex が適用された要素に対して 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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。