DevTools の新機能 (Chrome 93)

Published on Updated on

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

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

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

Styles ペインで CSS コンテナクエリを編集

Styles ペインでCSS コンテナクエリを確認して編集できるようになりました。

コンテナクエリは、レスポンシブデザインに対して、より多くの動的なアプローチを提供します。@-規則の @container はメディアクエリの @media と同じように動作しますが、@media のようにビューポートとユーザーエージェントに問い合わせて情報を得るのではなく、@container は上位のコンテナ要素にある基準に合致するかどうかを問い合わせます。

Elements パネルで、@-規則 @container を持つ DOM 要素をクリックしてください。DevTools は @container の情報を Styles ペインに表示します。サイズを編集するにはそれをクリックします。Styles ペインは関連するコンテナ情報も表示します。その上にマウスカーソルを置くとページ上のコンテナ要素がハイライトされ、コンテナサイズを確認できます。コンテナ要素を選択するにはそれをクリックしてください。

コンテナクエリ機能は現在のところ実験的です。実際に試してみるには chrome://flags#enable-container-queries フラグを有効にしてください。

Editable CSS container queries in the Styles pane

Chromium issue: 1146422

NetworkパネルでWeb Bundleをプレビュー

Web Bundle はひとつ以上の HTTP リソースを単一のファイルにカプセル化するためのファイルフォーマットです。Network パネルでこの Web Bundle のコンテンツをプレビューできるようになりました。

Web Bundle 機能は現在のところ実験的です。実際に試してみるには chrome://flags#enable-experimental-web-platform-features フラグを有効にしてください。

web bundle preview

Chromium issue: 1182537

Attribution Reporting APIデバッグ

Attribution Reporting API のエラーが Issues タブでレポートされるようになりました。

Attribution Reporting は(広告のクリックや視聴のような)ユーザーアクションがコンバージョンを引き起こすタイミングについて、クロスサイトの識別を伴わずに測定するための新しい API です。

Attribution Reporting API errors in the Issues tab

Chromium issue: 1190735

コンソールでの文字列の扱いの改善

Console の新しいコンテキストメニューを使用して、任意の文字列をそのコンテンツそのもの、JavaScript リテラル、JSON リテラルのいずれかとしてコピーできます。

New context menu in the Console

Chrome 90 で、DevTools は常に文字列の出力を妥当な JSON リテラルとしてフォーマットするように Console を更新しましたが、開発者の皆さんからこの変更は混乱のもとになるというフィードバックを受け取りました。エスケープが大量で出力が読めなくなったという人もいました。

Console は文字列の出力を妥当な JavaScript リテラルとしてフォーマットするようになり、その上で文字列をコピーする場合に3つのオプションを提示します。Copy as JavaScript literal オプションは特殊文字を適切にエスケープし、文字列をその内容に応じてシングルクォートか、ダブルクォート、もしくはバッククォートで囲います。Copy string contents はその代わりに、文字列の内容を(改行やその他の特殊文字も含めて)そのままクリップボードにコピーします。最後に、Copy as JSON literal は文字列を妥当なJSONリテラルとしてフォーマットし、それをクリップボードにコピーします。

Chromium issue: 1208389

CORS デバッグの改善

Console の CORS に関連する TypeError が Network パネルと Issue タブにリンクされるようになりました。

CORS に関連するエラーメッセージの横にある2つの新しいアイコンをクリックすると、ネットワークリクエストを確認したり、Issue タブでエラーメッセージの詳細と想定される解決策を確認できます。

Icons next to the CORS-related error message

Chromium issue: 1213393

Lighthouse 8.1

Lighthouse パネルで Lighthouse 8.1 が動作するようになりました。

Lighthouse

対象のサイトが Lighthouse にソースマップを公開している場合、View Treemap ボタンを探すと、配信された JavaScript のブレークダウンを、サイズとロード時のカバレッジでフィルタして確認できます。

レポートには新しいメトリクスフィルタも追加されています(スクリーンショットの Show audits relevant to フィルタを参照)。そのメトリクスだけを改善するための最も適切な Opportunities と Diagnostics にフォーカスを当てるためにメトリクスを選択してください。

Performance Category ではその他のパフォーマンスツールと揃えるため、またウェブの状態をよりよく反映するためにさまざまなスコアリングが変更されています。

すべての変更を確認するにはリリースノートを参照してください。

Chromium issue: 772558

Manifest ペインで new note URL を表示

Manifest ペインで new note URL が表示されるようになります。

現在 Chrome OS(CrOS)では、"new-note" capability を宣言した Chrome Apps、Android Apps は(CrOSデバイスがスタイラスを使用していたら現れる)Stylus settings の中で note-taking app として選択できるようになります。note-taking app として選択すると、そのアプリはスタイラスパレットの「Create Note」ボタンで起動できるようになります。アプリケーションのマニフェストに new-note-url フィールドを追加することはウェブアプリに同様の機能を追加するための作業のひとつです。

New note URL in the Manifest pane

Chromium issue: 1185678

CSS にマッチするセレクタ表示の修正

DevTools は CSS にマッチしたセレクタの表示を修正しました。これは前回のリリースでは動作していませんでした。

Styles パネルのカンマで分割されたセレクタは、選択された DOM ノードにマッチするかどうかに応じて異なる色が使用されます。

  • マッチしない部分は明るい灰色で表示される
  • マッチするセレクタの部分は黒で表示される
CSS matching selectors

Chromium issue: 1219153

Network パネルでの JSON レスポンスのプリティプリント

Network パネルで JSON レスポンスがプリティプリントされるようになりました。

Network パネルで JSON レスポンスを開き、{}アイコンをクリックするとプリティプリントされます。

Pretty-printing JSON responses in the Network panel

Chromium bug: 998674

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

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