| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
DevTools の新機能 (Chrome 96) |
|
2021-10-25 |
2021-10-25 |
新しい CSS Overview パネル, SS の prefers-contrast メディア機能のエミュレート, Chrome の Auto Dark Theme 機能のエミュレートなど |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/oyz4gDei2COAJ84nRJC8.jpg |
|
翻訳者の technohippy さん、レビュアーの lacolaco さんと yoichiro さんに感謝いたします。
{% Partial 'devtools/banner.md' %}
{% YouTube id='3CXbhnaFNEw' %}
新しい CSS Overview パネルを使用するとあなたのページの CSS を改善できる可能性を確認できます。 CSS Overview パネルを開き、Capture overview をクリックしてページの CSS のレポートを生成してください。
情報をさらに詳細化することも可能です。例えば、Colors セクションの色をクリックして同じ色を適用する要素のリストを表示できます。いずれかの要素をクリックすると Elements パネルでその要素が開きます。
CSS Overview パネルはプレビュー機能です。私達のチームはまだ積極的にこの機能に取り組んでおり、さらなる改善のためのフィードバックを求めています。
この記事を読むと、CSS Overview パネルについて更に詳細に学ぶことができます。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/fXXPihV3bTl82WDJGX51.png", alt="CSS Overview パネル", width="800", height="509" %}
Chromium issue: 1254557
copy CSS と edit as text の対象がCSS プロパティと長さを合わせたものに戻されました。これらの挙動は直近のリリースでは壊れていました。
{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/3zxmVrRNd767L9zPDvU8.mp4", autoplay="true", muted="true", loop="true", class="screenshot" %}
加えて、単位の値をドラッグして調節でき、単位もドロップダウンで更新できるようになりました。この追加の編集機能はテキスト編集としての主な機能には影響を与えないはずです。
{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/YkvFZGBllRecee2EAzYf.mp4", autoplay="true", muted="true", loop="true", class="screenshot" %}
もし何か問題があれば goo.gle/length-feedback で報告してください。
この機能は Settings > Experiments > Enable CSS length authoring tools in the Styles pane チェックボックスを使用して無効化できます。
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/0042092ccbcdfb5b113c28b9a58c2cf1219b10c4 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/c8f39d4c60841439ebf75d1a2d8fdfe50e1355a9 #}
Chromium issues: 1259088, 1172993
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/47fsHvVLiVC9J0eWY9wD.png", alt="CSS の prefers-contrast メディア機能のエミュレート", width="800", height="483" %}
prefers-contrast メディア機能はユーザーがページのコントラストを強く、もしくは弱くすることを要求しているかどうかを検出するために使用されます。
Command Menu を開き、Show Rendering コマンドを実行して、Emulate CSS media feature prefers-contrast ドロップダウンを設定してください。
Chromium issue: 1139777
DevTools を使用して自動ダークテーマをエミュレートし、Chrome の Auto Dark Theme が有効になっているときにページがどのように見えるかを簡単に確認できます。
Chrome 96 は Android で Auto Dark Theme の Origin Trial を開始しました。この機能を使用すると、ユーザーが OS のダークテーマ機能を有効にしているときに、ブラウザは明るいテーマのサイトに対して自動的に生成されたダークテーマを適用します。
Command Menu を開き、Show Rendering コマンドを実行し、Emulate auto dark mode ドロップダウンを有効にしてください。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/QHS8kupNsTXnKD7HomYy.png", alt="Chrome の Auto Dark Theme 機能エミュレート", width="800", height="483" %}
Chromium issue: 1243309
コンテキストメニューにCSS ルールを JavaScript プロパティとして簡単にコピーできる新しいオプションが2つ追加されました。これらのショートカットオプションは特にCSS-in-JS ライブラリを利用している開発者にとって便利でしょう。
Styles ペインの CSS ルール上で右クリックしてください。Copy declaration as JS を選択すると単一のルールを、Copy all declarations as JS を選択するとすべてのルールをコピーできます。
例えば、次の例では padding-left: '1.5rem' がクリップボードにコピーされます。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/M4mKimxhUs6f4hc0wMuO.png", alt="宣言を JavaScript としてコピー", width="800", height="469" %}
Chromium issue: 1253635
Network パネルの新しい Payload タブを使用して、ペイロードを伴うネットワークリクエストを調査できます。これまではペイロードの情報は Headers タブの中で利用可能でした。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1DTIW7zoIqf3VE2WMJmX.png", alt="Network パネル内の Payload タブ", width="800", height="488" %}
Chromium issue: 1214030
Properties ペインでそのインスタンスのすべてのプロパテが表示されるのではなく、関連するプロパティだけが表示されるようになりました。これからは DOM プロパティとメソッドは表示から除かれます。
これからはChrome 95 での Properties ペインの 拡張 と合わせて、関係するプロパティをより容易に指定できます。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/hs4KfBZOBeyWHF42Xsuq.png", alt="Properties ペインでのプロパティの表示", width="800", height="387" %}
Chromium issue: 1226262
Console で CORS エラーを隠すことができます。CORS エラーは Issues タブで表示されるので、Console で CORS エラーを隠すと、乱雑さを減らす助けになります。
Console で、Settings アイコンをクリックして Show CORS errors in console チェックボックスのチェックを外してください。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/m3ZzZI5VkYSYCfCLDHUi.png", alt="Cosole で CORS エラーを隠すオプション", width="800", height="502" %}
Chromium issue: 1251176
Intl オブジェクトが Console で適切にプレビューされ、先行評価されるようになりました。以前は、Intlオブジェクトは先行評価されませんでした。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ZxGQoDdnilseKTFsxdbC.png", alt="Console での Intl オブジェクト", width="800", height="559" %}
{# https://chromium-review.googlesource.com/c/v8/v8/+/3196175 #}
Chromium issue: 1073804
他の非同期タスクとの一貫性のために、DevTools が async 関数の async スタックトレースをレポートするようになりました。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/wuKo84nrDzbhwCnIVU2n.png", alt="async stack traces", width="800", height="427" %}
Chromium issue: 1254259
Console のサイドバーは維持されます。Chrome 94 で、Console のサイドバーがいずれ廃止されるとアナウンスし、開発者の皆さんにフィードバックと懸念事項を尋ねました。
この廃止の通知に対する十分なフィードバックが集まり、廃止するのではなくサイドバーの改善に取り組むことになりました。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/XIsLjvBFSeaTN5BtEgmU.png", alt="Console サイドバー", width="800", height="502" %}
Chromium issues: 1232937, 1255586
Chrome やその他の Chromium ベースのブラウザから AppCache のサポートが外れることに伴い、Application パネルの Application cache は削除されます。
Chromium issue: 1084190
{% Aside %}
実験的な機能を有効にするには、Settings > Experiments の中の Enable Reporting API panel in the Application panel チェックボックスをチェックしてください。 {% endAside %}
Reporting API はページのセキュリティ違反や廃止されたAPIの利用などの監視を助けるように用意されています。
この実験的な機能を有効にすると、Application パネルの新しいReporting API ペインでレポートのステータスを確認できるようになります。
Endpoints セクションは現在のところまだ開発が非常に活発であることに注意してください（今はレポーティングのエンドポイントは表示されません）。
Reporting API についてより詳しく知るにはこの記事を見てください。
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/hbwFqi9aNDOj70FhLXsn.png", alt="Application パネルの Reporting API ペイン", width="800", height="476" %}
Chromium issue: 1205856
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}