DevTools の新機能 (Chrome 96)

公開日 2021年10月25日月曜日 • 更新日 2021年10月25日月曜日

翻訳先言語： English, Español, Português, 한국어, 中文, Pусский

Google で Chrome DevTools に取り組んでいる Developer Advocate です。

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

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

プレビュー機能: 新しい CSS Overview パネル

新しい CSS Overview パネルを使用するとあなたのページの CSS を改善できる可能性を確認できます。 CSS Overview パネルを開き、Capture overview をクリックしてページの CSS のレポートを生成してください。

情報をさらに詳細化することも可能です。例えば、Colors セクションの色をクリックして同じ色を適用する要素のリストを表示できます。いずれかの要素をクリックすると Elements パネルでその要素が開きます。

CSS Overview パネルはプレビュー機能です。私達のチームはまだ積極的にこの機能に取り組んでおり、さらなる改善のためのフィードバックを求めています。

この記事を読むと、CSS Overview パネルについて更に詳細に学ぶことができます。

Chromium issue: 1254557

CSS の length の編集とコピーの挙動の復旧と改善

copy CSS と edit as text の対象がCSS プロパティと長さを合わせたものに戻されました。これらの挙動は直近のリリースでは壊れていました。

加えて、単位の値をドラッグして調節でき、単位もドロップダウンで更新できるようになりました。この追加の編集機能はテキスト編集としての主な機能には影響を与えないはずです。

もし何か問題があれば goo.gle/length-feedback で報告してください。

この機能は Settings > Experiments > Enable CSS length authoring tools in the Styles pane チェックボックスを使用して無効化できます。

Chromium issues: 1259088, 1172993

Rendering タブのアップデート

CSS の prefers-contrast メディア機能のエミュレート

prefers-contrast メディア機能はユーザーがページのコントラストを強く、もしくは弱くすることを要求しているかどうかを検出するために使用されます。

Command Menu を開き、Show Rendering コマンドを実行して、Emulate CSS media feature prefers-contrast ドロップダウンを設定してください。

Chromium issue: 1139777

Chrome の Auto Dark Theme 機能のエミュレート

DevTools を使用して自動ダークテーマをエミュレートし、Chrome の Auto Dark Theme が有効になっているときにページがどのように見えるかを簡単に確認できます。

Chrome 96 は Android で Auto Dark Theme の Origin Trial を開始しました。この機能を使用すると、ユーザーが OS のダークテーマ機能を有効にしているときに、ブラウザは明るいテーマのサイトに対して自動的に生成されたダークテーマを適用します。

Command Menu を開き、Show Rendering コマンドを実行し、Emulate auto dark mode ドロップダウンを有効にしてください。

Chromium issue: 1243309

Styles ペインで JavaScript として宣言をコピー

コンテキストメニューにCSS ルールを JavaScript プロパティとして簡単にコピーできる新しいオプションが2つ追加されました。これらのショートカットオプションは特にCSS-in-JS ライブラリを利用している開発者にとって便利でしょう。

Styles ペインの CSS ルール上で右クリックしてください。Copy declaration as JS を選択すると単一のルールを、Copy all declarations as JS を選択するとすべてのルールをコピーできます。

例えば、次の例では padding-left: '1.5rem' がクリップボードにコピーされます。

Chromium issue: 1253635

Network パネルの新しい Payload タブ

Network パネルの新しい Payload タブを使用して、ペイロードを伴うネットワークリクエストを調査できます。これまではペイロードの情報は Headers タブの中で利用可能でした。

Chromium issue: 1214030

Properties ペインのプロパティ表示の改善

Properties ペインでそのインスタンスのすべてのプロパテが表示されるのではなく、関連するプロパティだけが表示されるようになりました。これからは DOM プロパティとメソッドは表示から除かれます。

これからはChrome 95 での Properties ペインの拡張と合わせて、関係するプロパティをより容易に指定できます。

Chromium issue: 1226262

コンソールのアップデート

コンソールで CORS エラーを隠すオプション

Console で CORS エラーを隠すことができます。CORS エラーは Issues タブで表示されるので、Console で CORS エラーを隠すと、乱雑さを減らす助けになります。

Console で、Settings アイコンをクリックして Show CORS errors in console チェックボックスのチェックを外してください。

Chromium issue: 1251176

Console での適切な `Intl` オブジェクトのプレビューと評価 {: #intl } -->

Intl オブジェクトが Console で適切にプレビューされ、先行評価されるようになりました。以前は、Intlオブジェクトは先行評価されませんでした。

Chromium issue: 1073804

一貫性のある async スタックトレース

他の非同期タスクとの一貫性のために、DevTools が async 関数の async スタックトレースをレポートするようになりました。

Chromium issue: 1254259

Console のサイドバーは維持されます。Chrome 94 で、Console のサイドバーがいずれ廃止されるとアナウンスし、開発者の皆さんにフィードバックと懸念事項を尋ねました。

この廃止の通知に対する十分なフィードバックが集まり、廃止するのではなくサイドバーの改善に取り組むことになりました。

Chromium issues: 1232937, 1255586

Application パネルの Application cache ペインの廃止

Chrome やその他の Chromium ベースのブラウザから AppCache のサポートが外れることに伴い、Application パネルの Application cache は削除されます。

Chromium issue: 1084190

[実験的] Application パネルの新しい Reporting API ペイン

実験的な機能を有効にするには、Settings > Experiments の中の Enable Reporting API panel in the Application panel チェックボックスをチェックしてください。

Reporting API はページのセキュリティ違反や廃止されたAPIの利用などの監視を助けるように用意されています。

この実験的な機能を有効にすると、Application パネルの新しいReporting API ペインでレポートのステータスを確認できるようになります。

Endpoints セクションは現在のところまだ開発が非常に活発であることに注意してください（今はレポーティングのエンドポイントは表示されません）。

Reporting API についてより詳しく知るにはこの記事を見てください。

Chromium issue: 1205856

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

Chrome Canary、Dev、Betaをデフォルトの開発ブラウザとして利用することを検討してください。これらのプレビューチャンネルでは DevTools の最新機能を利用でき、最先端のウェブプラットフォーム API をテストして、ユーザーが遭遇するよりも先にあなたのサイトの問題を見つけることができます。

Chrome DevTools チームとの交流

新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。

私たちへの提案やフィードバックはcrbug.comから投稿してください。
DevTools の問題は DevTools の More options > Help > Report a DevTools issues を使用してレポートしてください。
@ChromeDevTools 宛にTweetしてください。
What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

DevTools の新機能 (Chrome 96)

プレビュー機能: 新しい CSS Overview パネル

CSS の length の編集とコピーの挙動の復旧と改善