DevTools の新機能 (Chrome 100)

Published on Updated on

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

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

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

Chrome 100

これが 100 番目の Chrome バージョンです!Chrome DevTools は、開発者がウェブを構築するための信頼できるツールを引き続き提供します。このマイルストーンを祝うために、少し時間を頂いて、What's New タブの中で周りをクリックしてみてください。

いつものように、画像をクリックすることで、最新の What’s New in DevTools 動画 を見ることができます。

Styles ペインでの @supports アットルールの表示と編集

Styles ペインにて、CSS の @supports アットルールを表示および編集することができるようになりました。これらの変更によって、アットルールをリアルタイムで簡単に試すことができます。

この デモページ を開いて、 <div class=”box”> 要素を inspect すると、 Styles ペインの中で @supports アットルールが表示されます。編集するには、そのルールの宣言をクリックしてください。

@supports アットルールの表示と編集

Chromium issues: 1222574, 1222573

Recorder パネルの改善

デフォルトで共通セレクタをサポート

レコーディング中に特定のセレクタを決定するときに、 Recorder パネルは以下の属性を持つ要素を自動的に優先するようになりました。

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

上記の属性は、テストの自動化で使用される一般的なセレクタです。

例えば、この デモページ新規にレコーディングを開始 します。 メールアドレスを入力して、セレクタの値を確認してみてください。

email 要素には data-testid が定義されているので、 idclass 属性の代わりに、自動的にセレクタとして使用されます。

デフォルトで共通セレクタをサポート

レコーディングのセレクタをカスタマイズする

一般的なセレクタ を使用していない場合は、レコーディングのセレクタをカスタマイズできます。

例えば、この デモページ は、セレクタとして data-automate 属性を使用しています。 新規にレコーディングを開始 して、セレクタとして data-automate と入力します。メールアドレスを入力して、セレクタの値 ( [data-automate=email-address] ) を確認してみてください。

レコーディングのセレクタをカスタマイズする カスタムセレクタ選択の結果

レコーディングのリネーム

レコーディングのタイトルの隣りにある編集ボタン(鉛筆のアイコン)を使って、 Recorder パネルでレコーディングの名前を変更することができるようになりました。

レコーディングのリネーム

ホバーでクラスや関数のプロパティをプレビューする

デバッグ中に、 Source パネルにてクラスや関数にカーソルを合わせることで、そのプロパティをプレビューできるようになりました。以前は、関数名やソースコード内の位置へのリンクのみが表示されていました。

ホバーでクラスや関数のプロパティをプレビューする

Chromium issue: 1049947

Performance パネルでの Partially presented frames

Performance レコーディングでは、 Frames タイムラインの中で新しいフレームカテゴリ "Partially presented frames" が表示されます。

以前は、 Frames タイムラインは、メインスレッドの動作を遅延させたフレームを "dropped frames" として表示していました。しかし、一部のフレームでは、コンポジタスレッドによって駆動される視覚的な更新(スクロールなど)が依然として生成されるケースがあります。

これらの "Dropped frames" のスクリーンショットはまだ視覚的な更新を反映しているため、これはユーザの混乱につながります。

新しい "Partially presented frames" は、一部のコンテンツがフレーム内でタイムリーに表示されていないものの、視覚的な更新を完全にブロックするほど深刻ではないことをより直感的に示すことを目的にしています。

Performance パネルでの Partially presented frames

Chromium issue: 1261130

その他のハイライト

以下は、今回のリリースにおいて注目すべき修正となります。

  • エミュレートされたデバイス の iPhone ユーザエージェント文字列が変更されました。 5 以降の全ての iPhone バージョンでは、 iPhone OS 13_2_3 を user-agent 文字列に含みます。 (1289553)
  • スニペット を JavaScript ファイルとして直接保存できるようになりました。以前は、手動で .js ファイル拡張子を追加する必要がありました。 (1137218)
  • ソースマップを使ってデバッグするときに、 Sources パネルに正しくスコープ変数名が表示されるようになりました。以前は、ソースマップが提供されているにも関わらず、 Sources パネルには短縮されたスコープ変数名が表示されていました。 (1294682)
  • Sources パネルは、ページの読み込み時にスクロール位置を正しく復元するようになりました。以前は、位置が正しく復元されなかったために、デバッグ時に不便さがありました。 (1294682)

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

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.