DevTools の新機能(Chrome 88)

DevTools の起動の高速化

DevTools の起動が JavaScript コンパイルに関して約 37% 高速化(6.9 秒から 5 秒に短縮)🎉

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

実装の詳細については、今後のエンジニアリング ブログ投稿でお知らせします。どうぞご期待ください。

Chromium の問題: 1029427

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

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

CSS 角度

ページ上の HTML 要素に CSS アングルが適用されている(background: linear-gradient(angle, color-stop1, color-stop2)transform: rotate(angle) など)と、[スタイル] ペインの角度の横に時計アイコンが表示されます。時計アイコンをクリックして、時計オーバーレイを切り替えます。時計のどこかをクリックするか、針をドラッグして角度を変えてください!

角度の値を変更するためのマウス ショートカットとキーボード ショートカットもあります。詳しくは、ドキュメントをご覧ください。

Chromium に関する問題: 11261781138633

サポートされていない画像タイプをエミュレートする

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 に関する問題: 9457861146985

パフォーマンス パネルの録画に「ウェブに関する指標」レーンが新たに追加

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

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

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

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

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

Chromium の問題: なし

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

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

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

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

CORS エラー

Chromium の問題: 1141824

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

[Frame details] ビューのクロスオリジン分離情報

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

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

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

クロスオリジン情報

Chromium の問題: 1139899

[Frame details] ビューの新しい Web Worker 情報

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

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

ウェブワーカーの情報

Chromium に関する問題: 11225071051466

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

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

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

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

Chromium の問題: 1107766

[Service Workers] ペインから [Network] パネルを開く

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

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

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

Chromium の問題: なし

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

プロパティ値をコピー

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

プロパティ値をコピー

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

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

Chromium の問題: 1132084

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

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

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

Chromium の問題: 1139615

Wasm デバッグの更新

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

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

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

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

Chromium に関する問題: 10588361071432

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

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

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

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

Chromium の問題: 1127914

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

DevTools では、ファイル/メモリサイズの表示に一貫して KB が使用されるようになりました。以前の DevTools には、KB(1,000 バイト)と KiB(1,024 バイト)が混在していました。たとえば、[Network] パネルでは、以前は「kB」ラベルを使用していましたが、実際には KiB を使用して計算を行っていたため、不必要な混乱を引き起こしていました。

Chromium の問題: 1035309

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

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

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

Chromium の問題: 1143833

試験運用版の機能

CSS Flexbox デバッグツール

Flexbox デバッグツールのリリース

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

それに加えて、以下のフレックスボックス プロパティに新しい配置アイコンが追加されました。

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

さらに、これらのアイコンはコンテキスト アウェアです。アイコンの方向は以下に応じて調整されます。

  • flex-direction
  • direction
  • writing-mode

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

CSS Flex のデバッグ

Flexbox のツール機能の設計書をご覧ください。今後さらに機能が追加される予定です。

ぜひお試しいただき、ご意見やご感想をお寄せください

Chromium に関する問題: 11440901139945

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

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

ショートカット エディタでコード(マルチキー操作のショートカット)を作成できるようになりました。

[Settings] > [Shortcuts] に移動し、コマンドにカーソルを合わせて編集ボタン(鉛筆アイコン)をクリックして、コードのショートカットをカスタマイズします。

和音のキーボード ショートカット

Chromium の問題: 174309

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

Chrome CanaryDevBeta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

  • crbug.com からご提案やフィードバックをお送りください。
  • DevTools の問題を報告するには、DevTools でその他のオプション アイコン その他   > [ヘルプ] > [DevTools の問題を報告する] を選択します。
  • @ChromeDevTools にツイートします。
  • 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。

DevTools の新機能

DevTools の新機能シリーズで取り上げたすべての内容の一覧。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59