DevTools の新機能（Chrome 88）

Jecelyn Yeen

DevTools の起動時間の短縮

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

チームは、起動時のシリアル化、解析、逆シリアル化のパフォーマンス オーバーヘッドを削減するために、いくつかの最適化を行いました。

実装について詳しく説明するエンジニアリング ブログ投稿を近日中に公開する予定です。どうぞご期待ください。

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 の画像を、古いブラウザには代替の PNG 画像を配信する次の HTML コードがあるとします。

<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

[ストレージ] ペインでストレージ割り当てサイズをシミュレートする

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

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

ストレージ割り当てサイズをシミュレートする

Chromium の問題: 945786、1146985

パフォーマンス パネルの録画に新しいウェブバイタル レーン

パフォーマンス レコーディングに、ウェブバイタルに関する情報を表示するオプションが追加されました。

読み込みのパフォーマンスを記録したら、[パフォーマンス] パネルの [ウェブに関する主な指標] チェックボックスをオンにして、新しいウェブに関する主な指標レーンを表示します。

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

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

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

Chromium の問題: なし

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

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

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

これにより、CORS の問題の詳細な説明を提供する次の機能強化の基盤が築かれました。

CORS エラー

Chromium の問題: 1141824

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

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

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

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

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

クロスオリジン情報

Chromium の問題: 1139899

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

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

[Application] パネルで、ウェブワーカーを含むフレームを展開し、[Workers] ツリーでワーカーを選択して、ウェブワーカーの詳細を表示します。

ウェブワーカーの情報

Chromium の問題: 1122507、1051466

開いているウィンドウの開くフレームの詳細を表示

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

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

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

Chromium の問題: 1107766

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

新しい [ネットワーク リクエスト] リンクを使用して、すべての Service Worker（SW）リクエストのルーティング情報を表示します。これにより、デベロッパーは SW のデバッグ時に追加のコンテキストを利用できます。

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

Service Workers からネットワーク パネルを開く

Chromium の問題: なし

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

プロパティ値をコピーする

コンテキスト メニューの新しい [値をコピー] オプションを使用すると、ネットワーク リクエストのプロパティ値をコピーできます。

プロパティ値をコピーする

[ネットワーク] パネルでネットワーク リクエストをクリックして、[ヘッダー] ペインを開きます。[リクエスト ペイロード（JSON）]、[フォームデータ]、[クエリ文字列パラメータ]、[リクエスト ヘッダー]、[レスポンス ヘッダー] のいずれかのプロパティを右クリックします。

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

Chromium の問題: 1132084

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

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

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

Chromium の問題: 1139615

Wasm デバッグの更新

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

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

[ソース] パネルで Wasm ファイルを開き、ブレークポイントを設定してページを更新します。変数にカーソルを合わせると値が表示されます。

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

Chromium の問題: 1058836、1071432

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

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

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

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

Chromium の問題: 1127914

ファイルサイズとメモリサイズの一貫した測定単位

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

Chromium の問題: 1035309

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

DevTools では、疑似要素の色のコントラストを高めて、疑似要素をより見やすくしました。

疑似要素をハイライト表示する

Chromium の問題: 1143833

試験運用版の機能

CSS Flexbox デバッグツール

Flexbox デバッグツールが登場します

まず、display: flex が適用されている要素には、[要素] パネルに flex バッジが表示されるようになりました。

また、次の flexbox プロパティに新しい配置アイコンが追加されました。

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

さらに、これらのアイコンはコンテキストに応じて変化します。アイコンの向きは、次の条件に応じて調整されます。

  • flex-direction
  • direction
  • writing-mode

これらのアイコンは、ページの Flexbox レイアウトをよりわかりやすく可視化することを目的としています。

CSS Flex のデバッグ

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

ぜひお試しいただき、ご感想をお聞かせください。

Chromium の問題: 1144090、1139945

コードのキーボード ショートカットをカスタマイズする

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

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

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

コードのキーボード ショートカット

Chromium の問題: 174309

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。