DevTools の新機能(Chrome 88)

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 の問題: 11261781138633

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

DevTools の [レンダリング] タブに 2 つの新しいエミュレーションが追加され、AVIF 画像と WebP 画像を無効にできるようになりました 使用できます。これらの新しいエミュレーションにより、デベロッパーはさまざまな画像の読み込みを簡単にテストできます ブラウザを切り替えずに使用できます

新しいブラウザ向けに AVIF と WebP で画像を提供する、次の HTML コードがあるとします。 古いブラウザの場合は 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 の問題: 9457861146985

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

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

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

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

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

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

Chromium の問題: なし

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

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

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

これを利用して、サイトの詳細な説明を提供する CORS の問題

CORS エラー

Chromium の問題: 1141824

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

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

[セキュリティと分離セクションを参照してください。

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

非店舗型ビジネスと postMessage() が現在利用可能な場合、サポート終了の警告が表示されますが、 分離されません。クロスオリジン分離とその理由の詳細 SharedArrayBuffers などの機能には、こちらの記事をご覧ください。

クロスオリジン情報

Chromium の問題: 1139899

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

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

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

ウェブワーカーの情報

Chromium の問題: 11225071051466

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

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

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

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

Chromium の問題: 1107766

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

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

[アプリケーション] >[Service Workers] で、SW の [Network requests] をクリックします。「 下部のパネルで [ネットワーク] パネルが開き、Service Worker 関連のすべてのリクエスト( ネットワーク リクエストは &quot;is:service-worker-intercepted&quot; によってフィルタされます。

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

Chromium の問題: なし

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

プロパティ値をコピー

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

プロパティ値をコピー

[ネットワーク] パネルで、ネットワーク リクエストをクリックして [ヘッダー] ペインを開きます。右クリック [Request Payload(JSON)Form Data Query String Parameters] セクションのプロパティのうち 1 つをご覧ください。 リクエスト ヘッダー レスポンス ヘッダー

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

Chromium の問題: 1132084

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

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

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

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

Chromium の問題: 1035309

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

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

疑似元素を強調する

Chromium の問題: 1143833

試験運用版の機能

CSS Flexbox デバッグツール

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

まず、DevTools の [Elements] パネルに、flex display: flex を適用しました。

さらに、以下の Flexbox プロパティに新しい配置アイコンが追加されます。

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

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

  • flex-direction
  • direction
  • writing-mode

これらのアイコンは、ページのフレックスボックス レイアウトを見やすくすることを目的としています。

CSS Flex のデバッグ

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

ご利用とご感想をお待ちしております。

Chromium の問題: 11440901139945

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

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

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

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

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

Chromium の問題: 174309

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

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

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

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

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

DevTools の新機能

DevTools の新機能」シリーズで紹介されているすべてのリスト。