DevTools の新機能（Chrome 88）

Jecelyn Yeen

DevTools の起動の高速化

DevTools の起動が JavaScript コンパイルの面で約 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 にカーソルを合わせます。現在の画像ソース（currentSrc）がフォールバックの WebP 画像になりました。

Chromium の問題: 1130556

[ストレージ] ペインでストレージ容量をシミュレートする

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

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

Chromium の問題: 945786、1146985

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

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

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

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

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

Chromium の問題: なし

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

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

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

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

Chromium の問題: 1141824

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

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

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

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

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

Chromium の問題: 1139899

フレームの詳細ビューに新しい Web ワーカー情報

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

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

Chromium の問題: 1122507、1051466

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

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

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

Chromium の問題: 1107766

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

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

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

Chromium の問題: なし

[Network] パネルの新しいコピー オプション

プロパティの値をコピー

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

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

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

Chromium の問題: 1132084

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

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

Chromium の問題: 1139615

Wasm デバッグの更新

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

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

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

Chromium の問題: 1058836、1071432

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

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

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

Chromium の問題: 1127914

ファイルサイズとメモリサイズの単位を統一

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

Chromium の問題: 1035309

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

DevTools で、疑似要素のカラー コントラストが高くなり、見つけやすくなりました。

Chromium の問題: 1143833

試験運用版の機能

CSS Flexbox のデバッグツール

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

まず、DevTools の [要素] パネルに、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 の新機能シリーズで取り上げられたすべての内容の一覧。