| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
DevTools の新機能 (Chrome 100) |
|
2022-03-08 |
2022-03-08 |
@supports アットルールの表示と編集、レコーディングのセレクタのリネームやカスタマイズなど |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/iGv7SjPPIapkDmYbjVVH.jpg |
|
翻訳者の yoichiro さん、レビュアーの technohippy さん、 lacolaco さん、 yoshiko-pg さんに感謝いたします。
{% Partial 'devtools/banner.md' %}
{% YouTube id='DAD72grzDDc' %}
これが 100 番目の Chrome バージョンです！Chrome DevTools は、開発者がウェブを構築するための信頼できるツールを引き続き提供します。このマイルストーンを祝うために、少し時間を頂いて、What's New タブの中で周りをクリックしてみてください。
いつものように、画像をクリックすることで、最新の What’s New in DevTools 動画 を見ることができます。
{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/u8sn7ubuxjJoyPgbfNJs.mp4", class="screenshot", autoplay=true, controls=true, loop=true, muted=true %}
Styles ペインにて、CSS の @supports アットルールを表示および編集することができるようになりました。これらの変更によって、アットルールをリアルタイムで簡単に試すことができます。
この デモページ を開いて、 <div class=”box”> 要素を inspect すると、 Styles ペインの中で @supports アットルールが表示されます。編集するには、そのルールの宣言をクリックしてください。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vnokX5Hswmbvlb5weusO.png", alt="@supports アットルールの表示と編集", width="800", height="502" %}
Chromium issues: 1222574, 1222573
レコーディング中に特定のセレクタを決定するときに、 Recorder パネルは以下の属性を持つ要素を自動的に優先するようになりました。
- data-testid
- data-test
- data-qa
- data-cy
- data-test-id
- data-qa-id
- data-testing
上記の属性は、テストの自動化で使用される一般的なセレクタです。
例えば、この デモページ で 新規にレコーディングを開始 します。 メールアドレスを入力して、セレクタの値を確認してみてください。
email 要素には data-testid が定義されているので、 id や class 属性の代わりに、自動的にセレクタとして使用されます。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/4diI81kpscXznWLrB6a9.png", alt="デフォルトで共通セレクタをサポート", width="800", height="585" %}
一般的なセレクタ を使用していない場合は、レコーディングのセレクタをカスタマイズできます。
例えば、この デモページ は、セレクタとして data-automate 属性を使用しています。 新規にレコーディングを開始 して、セレクタとして data-automate と入力します。メールアドレスを入力して、セレクタの値 ( [data-automate=email-address] ) を確認してみてください。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2PPPt9tOC2ZEz1l9F9AK.png", alt="レコーディングのセレクタをカスタマイズする", width="800", height="524" %}
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/X8r52vWEu6aC8QHFuknp.png", alt="カスタムセレクタ選択の結果", width="800", height="579" %}
レコーディングのタイトルの隣りにある編集ボタン（鉛筆のアイコン）を使って、 Recorder パネルでレコーディングの名前を変更することができるようになりました。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/Pn9Xsrq9lnStmtjpe0jt.png", alt="レコーディングのリネーム", width="800", height="502" %}
デバッグ中に、 Source パネルにてクラスや関数にカーソルを合わせることで、そのプロパティをプレビューできるようになりました。以前は、関数名やソースコード内の位置へのリンクのみが表示されていました。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/BZzL6QMheyd31VGqhA8W.png", alt="ホバーでクラスや関数のプロパティをプレビューする", width="800", height="502" %}
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/0a585b3883ad39f2f83fa5ab9c7731270d3a2974 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/96fb7872ce01eb3fde267e39987a82ce3d3f3e21 #}
Chromium issue: 1049947
Performance レコーディングでは、 Frames タイムラインの中で新しいフレームカテゴリ "Partially presented frames" が表示されます。
以前は、 Frames タイムラインは、メインスレッドの動作を遅延させたフレームを "dropped frames" として表示していました。しかし、一部のフレームでは、コンポジタスレッドによって駆動される視覚的な更新（スクロールなど）が依然として生成されるケースがあります。
これらの "Dropped frames" のスクリーンショットはまだ視覚的な更新を反映しているため、これはユーザの混乱につながります。
新しい "Partially presented frames" は、一部のコンテンツがフレーム内でタイムリーに表示されていないものの、視覚的な更新を完全にブロックするほど深刻ではないことをより直感的に示すことを目的にしています。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QcqjnFhMz1Bxd5dkmduj.png", alt="Performance パネルでの Partially presented frames", width="800", height="531" %}
Chromium issue: 1261130
以下は、今回のリリースにおいて注目すべき修正となります。
- エミュレートされたデバイス の iPhone ユーザエージェント文字列が変更されました。 5 以降の全ての iPhone バージョンでは、 iPhone OS 13_2_3 を user-agent 文字列に含みます。 (1289553)
- ソースマップを使ってデバッグするときに、 Sources パネルに正しくスコープ変数名が表示されるようになりました。以前は、ソースマップが提供されているにも関わらず、 Sources パネルには短縮されたスコープ変数名が表示されていました。 (1294682)
- Sources パネルは、ページの読み込み時にスクロール位置を正しく復元するようになりました。以前は、位置が正しく復元されなかったために、デバッグ時に不便さがありました。 (1294682)
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}