DevTools の新機能 (Chrome 105)

公開日 更新日

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

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

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

Recorder パネルでのステップ・バイ・ステップ再生

Recorder パネルでブレークポイントを設定して、ステップ・バイ・ステップでユーザーフローを再生できるようになりました。

ブレークポイントを設定するには、ステップの横にある青い点をクリックします。ユーザーフローを再生すると、そのステップを実行する直前で再生が一時停止します。そこから、再生の継続や、ステップ実行、再生のキャンセルが可能です。

この機能を用いれば、ユーザーフローを完全に可視化できデバッグが簡単になります。

更に詳細な情報は Recorder 機能リファレンス を参照してください。

Recorder パネルでのステップ・バイ・ステップ再生

Chromium issue: 1257499

Recorder パネルでのマウスオーバーイベントのサポート

Recorder パネルがレコーディング中の手動でのマウスオーバー(ホバー)ステップの追加をサポートするようになりました。

このデモはホバーするとポップアップメニューを表示します。ユーザーフローを記録しながらメニューアイテムをクリックしてみてください。

このままユーザーフローを再生しようとすると、Recorder は記録中にマウスオーバーイベントを自動でキャプチャしないので失敗します。この問題を解決するには、メニューアイテムをクリックする前にそのセレクタのホバーオーバーのためのステップを手動で追加してください。

Recorder パネルでのマウスオーバーイベントのサポート

Chromium issue: 1257499

Performance insight パネルに Largest Contentful Paint (LCP) を追加

LCP は認識される読み込み速度を測定する重要なユーザー中心メトリクスのひとつです。これからはクリティカルパスと Largest Contentful Paint (LCP) の主な要因を見つけることができます。

performance recordingで、Timeline にある LCP バッジをクリックしてください。Details ペインで、LCP スコアを見て、LCP を遅滞させているリソースをどのように修正すればいいかを学び、LCP リソースのクリティカルパスを確認できます。

パネルで実行可能なアドバイスを確認してウェブサイトのパフォーマンスを向上させる方法を学ぶには、Performance Insights を参照してください。

Performance insight パネルの LCP

Chromium issue: 1326481

レイアウトシフトの潜在的な主要因であるテキストのフラッシュ(FOIT、FOUT)を識別

Performance insights パネルはレイアウトシフトの潜在的な主要因として flash of invisible text (FOIT) と flash of unstyled text (FOUT) を検出できるようになりました。

レイアウトシフトの潜在的な主要因を確認するには、Layout shifts トラックにあるスクリーンショットをクリックしてください。

レイアウトシフトを避けるテクニックについて学ぶには Optimize WebFont loading and rendering を参照してください。

Performance insights パネルの FOUT

Chromium issues: 1334628, 1328873

Manifest ペインの Protocol ハンドラ

DevTools を使用して Progressive Web Apps (PWA) のための URL protocol handler registration をテストできるようになりました。

URL protocol handler registration を使用するとインストールされた PWA が特定のプロトコル(例、magnetweb+example)が使用されたリンクを処理して、より統一感のある体験を提供できます。

Application > Manifest パネルから Protocol Handlers を開いてください。ここで利用可能なすべてのプロトコルの確認と、テストが可能です。

例えば、デモ PWAをインストールしてください。Protocol Handlers セクションで、"americano" と入力し、Test protocol をクリックすると PWA 内でコーヒーのページが開きます。

Manifest ペインの Protocol ハンドラ

Chromium issues: 1300613

Elements パネルの Top layer バッジ

トップレイヤのコンセプトと、トップレイヤ内容の変更がどのように可視化されるかを理解するには top layer badge を確認してください。

<dialog> 要素は最近ブラウザで安定版になりました。ダイアログを開くと、その内容が top layer に配置されます。トップレベルコンテンツはその他すべてのコンテンツの上に描画されます。

このデモで、Open dialog をクリックしてください。

トップレイヤ要素の可視化を補助するために、DevTools は DOM ツリーにトップレイヤコンテナ(#top-layer)を追加します。

トップレイヤコンテナ要素からトップレイヤツリー要素に割り込むには、トップレイヤコンテナ内の、要素の横にある reveal ボタンか backdrop をクリックしてください。

トップレイヤツリー要素(例えば、dialog 要素)の次の、トップレイヤコンテナに割り込むには top-layer バッジをクリックします。

Elements パネルの Top layer バッジ

Chromium issue: 1313690

実行時に WASM のデバッグ情報をアタッチ

実行時に wasm に DWARF デバッグ情報をアタッチできるようになりました。これまでは、Sources パネルが JavaScript と Wasm ファイルへのソースマップのアタッチをサポートしているだけでした。

Sources パネルで Wasm ファイルを開いてください。必要に応じてエディタ内で右クリックして、Add DWARF debugging info… を選択し、デバッグ情報をアタッチできます。

実行時に WASM のデバッグ情報をアタッチ

Chromium issue: 1341255

デバッグ中のライブ編集をサポート

デバッガをリスタートすることなく、スタック上で最上位にある関数を編集できるようになりました。

Chrome 104 の DevTools で restart frame 機能が復活しましたが、そこでは停止している関数を編集することはできませんでした。関数を中断し、停止中にその関数を編集することは開発者にとって珍しい作業ではありません。

今回のアップデートでは次のような制限がありますが、デバッガが自動的に関数を再起動します。

  • 一時停止中は最上位の関数だけが編集可能
  • スタックを深くする同一関数の再帰呼び出しは禁止
デバッグ中のライブ編集

Chromium issue: 1334484

Styles ペインで @scope at-rule の閲覧と編集

Styles ペインで CSS @scope at-rules の閲覧と編集が可能になりました。

@scope at-rule は CSS Cascading and Inheritance Level 6 specification に含まれます。これらのルールを使用すると開発者が CSS 内でスタイルのルールのスコープを制限できます。

このデモページを開き、<div class=”dark-theme”> 要素内のハイパーリンクをインスペクトしてください。Styles ペインで、@scope at-rule を確認できます。また、ルール宣言をクリックして編集することも可能です。

CSS @scope は現在開発中です。この機能を確認するには、chrome://flags/#enable-experimental-web-platform-features から Experimental Web Platform features フラグを有効にしてください。

Styles ペインの @scope at-rule

Chromium issue: 1337777

Sourcemap の改善

デバッグ体験全体を改善するためにソースマップにいくつかの修正が加えられました。

  • 句読点を含むソースマップの識別子を DevTools で適切に解決できるようになりました。いくつかのモダンなミニファイア(例、esbuild)は識別子を連続した句読点(カンマ、括弧、セミコロン)で結合したソースマップを生成します。
  • DevTools は super 呼び出しを含むコンストラクタのソースマップ名を解決できます。
Sourcemap の改善
  • 重複したカノニカル URL のソースマップでの URL インデクシングの修正。これまでは重複したカノニカル URL が原因でブレークポイントがいくつかのファイルで有効にならないことがありました。

Chromium issue: 1335338, 1333411

その他のハイライト

今回のリリースの目立った改善点には次のようなものがあります。

  • Application > Local Storage ペインのテーブルからローカルストレージのキー値ペアを適切に削除できるようになりました。(1339280
  • Sources パネルで CSS ファイルを閲覧するときにカラープレビューが正しく表示されるようになりました。 これまでは、間違った位置に表示されていました。(1340062

Elements パネルでのバッジ表示と合わせて、Layout ペインで CSS の flex と grid アイテムの表示が一貫したものになりました。これまでは、flex と grid アイテムはいずれの場所でもときどき表示されないことがありました。(13404411273992

  • DevTools が広告としてラベル付けされるフレームの原因となるスクリプトを見つけると、ad frames のために、Creator Ad Script リンクが新しく利用できるようになりました。Application > Frames からフレームを開くことができます。(1217041

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

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 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

最終更新日: 記事を改善する

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