| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
DevTools の新機能 (Chrome 93) |
|
2021-07-28 |
2021-07-28 |
編集可能な CSS コンテナクエリ、Web bundle プレビュー、コンソールでの文字列の扱いの改善など。 |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/spFZS9blWH3P6Ab7Kwbe.jpg |
|
翻訳者の technohippy さん、レビュアーの yoichiro さんと lacolaco さんに感謝いたします。
{% Partial 'devtools/banner.md' %}
{% YouTube id="1VaPAnUGRz8" %}
Styles ペインでCSS コンテナクエリを確認して編集できるようになりました。
コンテナクエリは、レスポンシブデザインに対して、より多くの動的なアプローチを提供します。@-規則の @container はメディアクエリの @media と同じように動作しますが、@media のようにビューポートとユーザーエージェントに問い合わせて情報を得るのではなく、@container は上位のコンテナ要素にある基準に合致するかどうかを問い合わせます。
Elements パネルで、@-規則 @container を持つ DOM 要素をクリックしてください。DevTools は @container の情報を Styles ペインに表示します。サイズを編集するにはそれをクリックします。Styles ペインは関連するコンテナ情報も表示します。その上にマウスカーソルを置くとページ上のコンテナ要素がハイライトされ、コンテナサイズを確認できます。コンテナ要素を選択するにはそれをクリックしてください。
コンテナクエリ機能は現在のところ実験的です。実際に試してみるには chrome://flags の #enable-container-queries フラグを有効にしてください。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3NzGBpukHQfUZUKUpUgf.png", alt="Editable CSS container queries in the Styles pane", width="800", height="554" %}
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/46cdd9cd019f088e1134abe84dbc7d53ac60585a #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/a7e1eac63bee3728b41ae440f2ec250559e9c667 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/ef157dab2ccf321941548a51d350f9383a78d283 #}
Chromium issue: 1146422
Web Bundle はひとつ以上の HTTP リソースを単一のファイルにカプセル化するためのファイルフォーマットです。Network パネルでこの Web Bundle のコンテンツをプレビューできるようになりました。
Web Bundle 機能は現在のところ実験的です。実際に試してみるには chrome://flags の #enable-experimental-web-platform-features フラグを有効にしてください。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/PEv1mNA14K18t5P3N6Yj.png", alt="web bundle preview", width="800", height="492" %}
Chromium issue: 1182537
Attribution Reporting API のエラーが Issues タブでレポートされるようになりました。
アトリビューション レポート は（広告のクリックや視聴のような）ユーザーアクションがコンバージョンを引き起こすタイミングについて、クロスサイトの識別を伴わずに測定するための新しい API です。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bkEGVEv5kKc9M6qBUmLz.png", alt="Attribution Reporting API errors in the Issues tab", width="800", height="501" %}
Chromium issue: 1190735
Console の新しいコンテキストメニューを使用して、任意の文字列をそのコンテンツそのもの、JavaScript リテラル、JSON リテラルのいずれかとしてコピーできます。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/O5uMSgkHrQ2mQDSjmg3A.png", alt="New context menu in the Console", width="800", height="477" %}
Chrome 90 で、DevTools は常に文字列の出力を妥当な JSON リテラルとしてフォーマットするように Console を更新しましたが、開発者の皆さんからこの変更は混乱のもとになるというフィードバックを受け取りました。エスケープが大量で出力が読めなくなったという人もいました。
Console は文字列の出力を妥当な JavaScript リテラルとしてフォーマットするようになり、その上で文字列をコピーする場合に3つのオプションを提示します。Copy as JavaScript literal オプションは特殊文字を適切にエスケープし、文字列をその内容に応じてシングルクォートか、ダブルクォート、もしくはバッククォートで囲います。Copy string contents はその代わりに、文字列の内容を（改行やその他の特殊文字も含めて）そのままクリップボードにコピーします。最後に、Copy as JSON literal は文字列を妥当なJSONリテラルとしてフォーマットし、それをクリップボードにコピーします。
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/9242d13569e9fe67ac01e75d28fa2b6e6bf310d2 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/5715a7b9800532d8b28e2c9fa2d3c1e220ba54a8 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/29236e333a856ae5a952fe4182545b1e2bde5539 #}
Chromium issue: 1208389
Console の CORS に関連する TypeError が Network パネルと Issue タブにリンクされるようになりました。
CORS に関連するエラーメッセージの横にある2つの新しいアイコンをクリックすると、ネットワークリクエストを確認したり、Issue タブでエラーメッセージの詳細と想定される解決策を確認できます。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/VzoUggSoM0FnkDlIFPhq.png", alt="Icons next to the CORS-related error message", width="800", height="485" %}
Chromium issue: 1213393
Lighthouse パネルで Lighthouse 8.1 が動作するようになりました。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/wENi9RXYMxdhm3zI4NVu.png", alt="Lighthouse", width="800", height="628" %}
対象のサイトが Lighthouse にソースマップを公開している場合、View Treemap ボタンを探すと、配信された JavaScript のブレークダウンを、サイズとロード時のカバレッジでフィルタして確認できます。
レポートには新しいメトリクスフィルタも追加されています（スクリーンショットの Show audits relevant to フィルタを参照）。そのメトリクスだけを改善するための最も適切な Opportunities と Diagnostics にフォーカスを当てるためにメトリクスを選択してください。
Performance Category ではその他のパフォーマンスツールと揃えるため、またウェブの状態をよりよく反映するためにさまざまなスコアリングが変更されています。
すべての変更を確認するにはリリースノートを参照してください。
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/62b16561e433f4aa1645826923222699ac4bad38 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/16d96a25f24c934ef4dcbbc7b827015abdd228a1 #}
Chromium issue: 772558
Manifest ペインで new note URL が表示されるようになります。
現在 ChromeOS（CrOS）では、"new-note" capability を宣言した Chrome Apps、Android Apps は（CrOSデバイスがスタイラスを使用していたら現れる）Stylus settings の中で note-taking app として選択できるようになります。note-taking app として選択すると、そのアプリはスタイラスパレットの「Create Note」ボタンで起動できるようになります。アプリケーションのマニフェストに new-note-url フィールドを追加することはウェブアプリに同様の機能を追加するための作業のひとつです。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/2Cwggroar7pNesfAQi4K.png", alt="New note URL in the Manifest pane", width="800", height="477" %}
Chromium issue: 1185678
DevTools は CSS にマッチしたセレクタの表示を修正しました。これは前回のリリースでは動作していませんでした。
Styles パネルのカンマで分割されたセレクタは、選択された DOM ノードにマッチするかどうかに応じて異なる色が使用されます。
- マッチしない部分は明るい灰色で表示される
- マッチするセレクタの部分は黒で表示される
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/O7CoHBrKA9cVKci1SM0M.png", alt="CSS matching selectors", width="800", height="477" %}
Chromium issue: 1219153
Network パネルで JSON レスポンスがプリティプリントされるようになりました。
Network パネルで JSON レスポンスを開き、{}アイコンをクリックするとプリティプリントされます。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/x2NKXwJPzjycjeD7cLH6.png", alt=" Pretty-printing JSON responses in the Network panel", width="800", height="523" %}
Chromium bug: 998674
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}