Get Inspired
Docs
Blog
Articles

DevTools の新機能 (Chrome 106)

公開日 • 更新日

翻訳先言語： English, Español, Português, 한국어, 中文, Pусский

Jecelyn Yeen
Jecelyn Yeen

Google で Chrome DevTools に取り組んでいる Developer Advocate です。

Website Twitter GitHub

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

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

Sources パネルでの Authored / Deployed によるファイルのグループ化

Group files by Authored / Deployed が 3 ドットメニューの中に表示されるようになりました。以前は、ナビゲーションペインに直接表示されていました。

この デモ を開いてください。 Group files by Authored / Deployed 設定を有効にすることで、最初にオリジナルのソースコード（Authored）を表示してそれらにすばやく移動することができます。

Authored / Deployed によるファイルのグループ化

Chromium bug: 1352488

改善されたスタックトレース

非同期処理にリンクされたスタックトレース

一部の処理が非同期で実行されるようにスケジュールされている際に、DevTools のスタックトレースが処理の「完全なストーリー」を語るようになりました。以前は、ストーリーの一部のみが伝えられていました。

例えば、この デモ を開いて、インクリメントボタンをクリックします。 Console でエラーメッセージを展開します。このソースコードでは、その処理に非同期の timeout 処理が含まれています。

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

以前は、スタックトレースはタイムアウト処理のみを示していました。その処理の「根本原因」は示されていませんでした。

最新の変更により、DevTools は、その処理がボタンコンポーネントの onClick イベントから発生し、次に increment 関数、そしてタイムアウト処理が続くことを示すようになりました。

非同期処理にリンクされたスタックトレース

舞台裏では、DevTools に新しい "Async Stack Tagging" 機能が導入されました。非同期コードの両方の部分を新しい console.createTask() メソッドと一緒にリンクすることで、処理の全体像を伝えることができます。詳細については、 Modern debugging in DevTools を参照してください。

複雑に聞こえますか？全くそんなことはありません。ほとんどの場合、使用しているフレームワークがスケジューリングと非同期実行を処理します。その場合、API を実装するのはフレームワーク次第なので、心配する必要はありません。 (例: Angular はこれらの 変更 を実装しました)

Chromium bug: 1334585

既知のサードパーティスクリプトを自動的に無視する

DevTools が既知のサードパーティスクリプトを無視リストに自動的に追加するようになったため、デバッグ中にコード内の問題をより迅速に特定できるようになります。

この デモ を開き、インクリメントボタンをクリックします。 Console でエラーメッセージを展開します。スタックトレースには、あなたのコードのみが表示されます (例: app.component.ts button.component.ts )。 Show more frames をクリックすると、完全なスタックトレースを表示します。

既知のサードパーティスクリプトを自動的に無視する

以前は、スタックトレースに zone.js や core.mjs などのサードパーティスクリプトが含まれていました。これらはあなたのソースコードではなく、バンドラ (webpack など) またはフレームワーク (Angular など) によって生成されたものです。エラーの根本原因を特定するのに時間がかかりました。

既知のサードパーティスクリプトを自動的に無視する

舞台裏では、DevTools はソースマップにて新しい x_google_ignoreList プロパティに基づいてサードパーティスクリプトを無視します。フレームワークとバンドラは、この情報を提供する必要があります。 Case Study: Better Angular Debugging with DevTools を参照してください。

必要に応じて、完全なスタックトレースを常に表示したい場合は、 Setting > Ignore list > Automatically and known third-party scripts to ignore list にて設定を無効にすることができます。

既知のサードパーティスクリプトを自動的に無視リストに追加する設定

Chromium bug: 1323199

デバッグ中の改善されたコールスタック

Automatically add known third-party scripts to ignore list 設定を使用すると、コードに関連するフレームのみがコールスタックに表示されるようになりました。

この デモ を開き、 app.component.ts の increment() 関数にブレークポイントを設定します。ページのインクリメントボタンをクリックして、ブレークポイントをトリガーします。コールスタックには、あなたのコードのフレームのみが表示されます (例: app.component.ts と button.component.ts )。

すべてのフレームを表示するには、 Show ignore-list frames を有効にします。以前は、DevTools はデフォルトですべてのフレームを表示していました。

デバッグ中の改善されたコールスタック

Chromium bug: 1352488

Sources パネルで無視リストに含まれるソースを非表示にする

hide ignore-listed sources を有効にして、 Navigation ペインで無関係なファイルを非表示にします。これにより、あなたのコードだけに集中できます。

この デモ を開きます。 Sources パネルの中で、 node_modules と webpack はサードパーティのスクリプトです。3 ドットメニューをクリックして、 hide ignore-listed sources を選択して、ペインからそれらを非表示にします。

Sources パネルで無視リストに含まれるソースを非表示にする

Chromium bug: 1352488

hide ignore-listed sources 設定を使用すると、 Command Menu でファイルをすばやく見つけることができます。以前は、 Command Menu でファイルを検索すると、関連性のないサードパーティファイルが返されていました。

例えば、 hide ignore-listed sources 設定を有効にして、3 ドットメニューをクリックします。 Open file を選択します。ボタンコンポーネントを検索するには、 "ton" と入力します。以前は、結果に node_modules からのファイルが含まれていましたので、 node_modules ファイルの 1 つが最初の結果として表示されていました。

Command Menu で無視リストにあるファイルを非表示にする

Chromium bug: 1336604

Performance パネルの新しい Interactions トラック

Performance パネルの新しい Interactions トラックを使用して、インタラクションを視覚化し、潜在的な応答性の問題を追跡できます。

例えば、この デモページ で パフォーマンスの記録を開始 します。コーヒーをクリックして、記録を停止します。 Interactions トラックに 2 つのインタラクションが表示されます。両方のインタラクションの ID は同じであり、インタラクションが同じユーザーインタラクションからトリガーされたことを示しています。

Performance パネルの新しい Interactions トラック

Chromium bug: 1347390

Performance Insights パネルでの LCP タイミングの内訳

Performance Insights パネルでの LCP タイミングの内訳

Chromium bug: 1351735

Recorder パネルでの記録のデフォルト名称の自動生成

Recorder パネルでは、新しい記録の名称を自動的に生成するようになりました。

Recorder パネルでの記録のデフォルト名称

Chromium bug: 1351383

その他のハイライト

  • 以前は、Recorder 拡張機能 が Recorder パネルに時々表示されないことがありました。 (1351416)
  • Styles ペインにて、 SVG <stop> 要素の stop-color プロパティ向けのカラーピッカーが表示されるようになりました。 (1351096)
  • Performance Insights パネルで、レイアウトシフトの潜在的な根本原因として レイアウト を引き起こすスクリプトを特定します。 (1343019)
  • Performance Insights パネルに LCP Web フォントのクリティカルパスを表示します。 (1350390)

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

Chrome Canary、Dev、Betaをデフォルトの開発ブラウザとして利用することを検討してください。これらのプレビューチャンネルでは 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 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

更新日 • 記事を改善する

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.