DevTools の新機能 (Chrome 101)

Published on Updated on

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

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

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

記録されたユーザーフローをJSONファイルとしてインポート/エクスポート

Recorder パネルは、ユーザーフローの記録をJSONファイルとしてインポートおよびエクスポートすることをサポートするようになりました。この追加により、ユーザーフローを簡単に共有できるようになり、バグレポートにも役立ちます。

例えば、このJSONファイルをダウンロードします。これをインポートボタンでインポートし、ユーザーフローを再生できます

それとは別に、記録したものをエクスポートすることもできます。ユーザーフローの記録の後、エクスポートボタンをクリックします。3つのエクスポートオプションがあります。

  • Export as a JSON file. 記録をJSONファイルとしてダウンロードする。
  • Export as a @puppeteer/replay script. 記録をPuppeteer Replayスクリプトとしてダウンロードする。
  • Export as a Puppeteer script . 記録をPuppeteerスクリプトとしてダウンロードする。

これらのオプションの違いについては、ドキュメントを参照してください。

RecorderパネルのExportオプション

Chromium issue: 1257499

Styles ペインでカスケードレイヤーを表示する

カスケードレイヤーは、スタイル固有の競合を防ぐために、CSSファイルをより明示的に制御できるようにします。これは、大規模なコードベース、デザインシステム、およびアプリケーションのサードパーティのスタイルを管理する場合に特に便利です。

このサンプルでは、3つのカスケードレイヤー pagecomponentbase が定義されています。Styles ペインでは、各レイヤーとそのスタイルを確認することができます。

レイヤー名をクリックすると、レイヤーの順番が表示されます。 page レイヤーが最も高い詳細度を持つので、 box の背景は緑色になっています。

Stylesペインでのカスケードレイヤーの表示

Chromium issue: 1240596

hwb() カラー関数のサポート

DevTools で HWB カラーフォーマットの表示と編集ができるようになりました。

Styles ペインで、 Shift キーを押しながら任意のカラープレビューをクリックすると、カラーフォーマットが変更されます。 HWB カラーフォーマットが追加されます。

また、カラーピッカーでカラーフォーマットを HWB に変更することも可能です。

hwb() カラー関数

プライベートプロパティの表示を改善

DevTools は、プライベートアクセサを適切に評価および表示するようになりました。以前は、 Console および Sources パネルで、プライベートアクセサを持つクラスを展開することができませんでした。

Consoleでのプライベートプロパティ

Chromium issues: 1296855, https://crbug.com/1303407

その他のハイライト

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

  • array-like オブジェクト、CSSクラス名、 map.get 、HTMLタグのオートコンプリートのサポートを修正しました。(1297101, 1297491, 1293807, 1296983)
  • 単語をダブルクリックし、オートコンプリートを解除すると、正しくハイライトされないのを修正しました。(1298437, 1298667)
  • Sources パネルのコメントキーボードショートカットを修正しました。(1296535)
  • Sources パネルでの複数選択時に Alt (Options) キーを使用するサポートを再び有効化しました。(1304070)

[実験的] Lighthouse パネルに新しいタイムスパンとスナップショットのモードを追加

実験を有効にするには、 Settings > Experiments の下にある Use Lighthouse panel with timespan and snapshot modes チェックボックスを有効にします。

従来の navigation モードとは別に、 Lighthouse パネルは、ユーザーフローを測定するための2つのモード、タイムスパンスナップショットをサポートするようになりました。

例えば、 タイムスパン レポートを使用して、ユーザーのインタラクションを分析することができます。このデモページを開いてください。 Timespan モードを選択し、 Start timespan をクリックします。ページ上でコーヒーをクリックし、タイムスパンを終了します。レポートを読んで、インタラクションによって生じたTotal Blocking TimeCumulative Layout Shift を確認します。

それぞれのモードには、独自の使用例、利点、制限があります。詳しくは、Lighthouse のドキュメントをご参照ください。

Lighthouseパネルでのタイムスパンモードとスナップショットモード

Chromium issue: 772558

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

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