DevTools の新機能（Chrome 88）

Jecelyn Yeen

DevTools の起動時間の短縮

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

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

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

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 の画像を、古いブラウザには代替の 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

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

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

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

このレーンには現在、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 の問題の詳細な説明を提供する次の機能強化の基盤が築かれました。

Chromium の問題: 1141824

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

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

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

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

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

Chromium の問題: 1139899

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

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

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

Chromium の問題: 1122507、1051466

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

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

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

Chromium の問題: 1107766

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

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

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

Chromium の問題: なし

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

プロパティ値をコピー

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

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

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

Chromium の問題: 1132084

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

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

Chromium の問題: 1139615

Wasm デバッグの更新

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

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

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

Chromium の問題: 1058836、1071432

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

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

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

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 レイアウトをよりわかりやすく可視化することを目的としています。

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

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

Chromium の問題: 1144090、1139945

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

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

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

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

Chromium の問題: 174309

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

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

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

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

• フィードバックや機能リクエストは crbug.com から送信してください。
• DevTools の [more_vert] > [その他のオプション] > [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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