DevTools の新機能 (Chrome 104)

Published on Updated on

Translated to: English, Español, Português, 中文, Pусский

翻訳者の lacolaco さん、レビュアーの yoichiro さん、 technohippy さん、 yoshiko-pg さんに感謝いたします。

DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。

デバッグ中のフレーム再起動

Restart frame 機能が復活しました! 関数のどこかで一時停止したときに、直前のコードを再実行することができます。以前は、この機能は非推奨で、安定性の問題から Chrome 92 で削除されました。

この では、デバッガーは最初 toggleColorScheme 関数の末尾近くのブレークポイント (343行目) で一時停止しています。デバッグを toggleColorScheme 関数の先頭から再開するには、Debugger ペインの Call stack セクションを展開し、 toggleColorScheme を右クリックして Restart frame を選択してください。

デバッグ中のフレーム再起動

Chromium issue: 1303521

Recorder パネルでのスロー再生オプション

ユーザーフローをさらに低速に再生できるようになりました(slow, very slow, extremely slow)。これらのオプションにより、各ステップのリプレイを画面上でよりよく観察することができます。

Recorder パネルを開きレコーディングを開始します。レコーディングが完了したら、 Replay ドロップダウンボタンをクリックします。リプレイを開始する速度を選択しましょう。

Recorder パネルでのスロー再生オプション

Chromium issue: 1306756

Recorder パネル用の拡張機能を構築

リプレイスクリプトを好きなフォーマットでエクスポートするための Chrome 拡張機能をビルドまたはインストールできるようになりました。構築方法については、Recorder extension API のドキュメントを参照してください。

デモ用の拡張機能をインストールするには、ドキュメントに記載されているこれらの手順に従ってください。

Recorder パネル用のカスタム拡張機能

Chromium issue: 1325751

Sources パネルで Authored / Deployed でファイルをグループ化する

新しい Group files by Authored / Deployed オプションを有効にして、 Sources パネルでファイルを整理します。フレームワーク( React、 Angular など)で Web アプリケーションを開発する場合、ビルドツール( Webpack 、 Vite など)が生成する minified ファイルによって、ソースファイルをナビゲートするのが困難になることがあります。

このチェックボックスをオンにすると、ファイルを2つのカテゴリーに分類して、より迅速に検索できます。

  • Authored: IDE で表示するソースファイルに似ています。 DevTools はソースマップ(ビルドツールによって提供される)に基づいてこれらのファイルを生成します。
  • Deployed: ブラウザが読み取る実際のファイル。通常、これらのファイルは最小化されています。

この React デモを使って自分で試してみましょう!

Sources パネルで Authored / Deployed でファイルをグループ化する

Chromium issue: 960909

Performance insights パネルの新しい User Timings トラック

Performance insights パネルの新しい User Timings トラックで、 計測中の performance.measure() マークを視覚化します。

たとえば、この Web ページでは、 performance.measure() メソッドを用いて、テキストの読み込み経過時間を算出しています。

ページ読み込みの計測を開始すると、 User Timings トラックが計測結果に表示されるようになります。タイミング項目をクリックすると、サイドペインにその詳細が表示されます。

Performance insights パネルの User Timings トラック

Chromium issue: 1322808

要素に割り当てられたスロットの表示

スロットに入っている要素は Elements パネルの中で新しい slot バッジを付与されます。 レイアウトの問題をデバッグする際に、ノードのレイアウトに影響を与える要素をより早く特定するために、この機能を使用します。

このには、いくつかの名前付きスロットを持つカードが含まれています。あるカードの person-occupation スロットを検査し、その横にある slot バッジをクリックすると、そのカードに割り当てられたスロットが表示されます。

要素を使って柔軟なテンプレートを作成し、それを Web コンポーネントの Shadow DOM に入力する方法を 学びましょう

要素に割り当てられたスロットの表示

Chromium issue: 1018906

パフォーマンス計測のためのハードウェア並列度シミュレーション

Performance パネルの新しい Hardware concurrency 設定により、開発者は navigator.hardwareConcurrency が報告する値を設定することができます。

アプリケーションによっては navigator.hardwareConcurrency を使ってアプリケーションの並列度を制御します。例えば、 Emscripten の pthread プールサイズを制御するために使用します。この機能により、開発者は異なるコア数でアプリケーションのパフォーマンスをテストすることができます。

パフォーマンス計測のためのハードウェア並列度シミュレーション

Chromium issue: 1297439

CSS 変数のオートコンプリート時に色以外の値のプレビュー

CSS 変数のオートコンプリートの際、 DevTools は色以外の変数に意味のある値を与えるようになり、その値がノードにどのような変化を与えるかをプレビューできるようになりました。

CSS 変数のオートコンプリート時に色以外の値のプレビュー

Chromium issue: 1285091

Back/forward cache ペインでブロックしているフレームの特定

Application パネルの Back/forward cache ペインに新しい frames セクションが追加されました。 ページが bfcache の対象となるのを妨げている可能性がある、ブロックしているフレームを特定するのに役立ちます。

Back/forward cache ペインでブロックしているフレームの特定

Chromium issue: 1288158

JavaScript オブジェクトのオートコンプリート候補の改善

JavaScript オブジェクトのプロパティのオートコンプリートは、以下の順序に基づいて表示されるようになりました:

  1. 自身の列挙可能なプロパティ
  2. 自身の列挙可能ではないプロパティ
  3. 継承された列挙可能なプロパティ
  4. 継承された列挙可能ではないプロパティ

これまで、開発者は関連するプロパティを見つけることが困難でした。なぜなら、サジェストでは継承されたプロパティよりも自身のプロパティが優先され、継承されたプロパティはすべて同じ優先度を持っていたからです。

JavaScript オブジェクトのオートコンプリート候補の改善

Chromium issue: 1299241

ソースマップの改善

ここでは、デバッグ作業全般を改善するための、ソースマップに関するいくつかの修正点を紹介します。

  • ブレークポイントが sourceURL アノテーションを持つインライン <script> 内で動作するようになりました
  • デバッガーはソースマップを使用して Scope ビューでブロックスコープ変数を解決するようになりました ブロックスコープ付き変数を解決する
  • デバッガーはソースマップを使用して Scope ビューのアロー関数内の変数を解決するようになりました アロー関数内の変数を解決する

Chromium issues: 1329113, 1322115

その他のハイライト

今回のリリースでは、以下のような注目すべき修正点があります:

  • Sources パネルの Auto-completion の設定を修正しました。以前は、この設定を無効にしてもオートコンプリートが常に有効でした。(1323286)
  • Application パネルの Manifest タブを更新し、最新のカラースキーム形式を解析するようにしました。(1318305)
  • Performance insights パネルで <script async> のレンダリングブロッキング問題に対する提案を改善しました。以前は、スクリプトがすでに async としてマークされているにもかかわらず、 DevTools は add async attribute to the script tag を提案しました。(1334096)
  • Performance insights パネルで、レイアウトシフトの潜在的な原因として iframe が検出されるようになりました。iframe の詳細は Details ペインで確認できます。(1328873)
  • Command menuファイルを開く際、オーサリングファイル(ソースマップによって生成されたファイル)が上位にランクされ、同じような名前のデプロイ済みスクリプトの上に表示されるようになりました。(1312929)

プレビューチャンネルのダウンロード

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

Chrome DevTools チームとの交流

新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。

  • 私たちへの提案やフィードバックはcrbug.comから投稿してください。
  • DevTools の問題は DevTools の More options   More   > Help > Report a DevTools issues を使用してレポートしてください。
  • @ChromeDevTools 宛にTweetしてください。
  • What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.