BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Chrome 85 DevToolsがCSS-in-JSおよびLighthouse 6をサポート

Chrome 85 DevToolsがCSS-in-JSおよびLighthouse 6をサポート

ブックマーク

原文(投稿日:2020/06/30)へのリンク

8月に予定されているChrome 85リリースには、CSS-in-JSフレームワークのスタイル編集、Lighthouse 6、新しいES2020機能のサポート、およびWeb開発者向けのその他の役立つ追加機能が含まれている。

CSS-in-JSは依然として開発への二極化アプローチであるが、Reactエコシステムで採用されている。ほとんどのCSS-in-JSフレームワークはCSSオブジェクトモデル(CSSOM)を利用してスタイルを構築する。Chromeバージョン73では、Webコンポーネント仕様のShadow DOM部分で機能するシームレスな再利用可能なスタイルをサポートするために、コンストラクタブルスタイルシートが追加された。

Chrome 85では、DevToolsユーザーはCSSOMを使用して追加されたスタイルを編集できるようになり、開発者はブラウザー内でスタイルを変更して、スタイル変更の即時の影響を確認できるようになった。

Chrome 85にはLighthouseバージョン6も含まれている。これは、最大のコンテンツペイント(LCP)、累積レイアウトシフト(CLS)、および合計ブロック時間(TBT)を含むウェブサイトのパフォーマンスのさらなる洞察を得る一連の新しいWebパフォーマンスメトリックで構成されている。LCPメトリックは、廃止予定のFirst Meaningful Paint(FMP)メトリックに代わるものである。Lighthouse 6では、重み付けされたメトリックの新しい式を使用して、Lighthouseのパフォーマンススコアが生成される。Lighthouse 6では、未使用のJavaScript監査、8つの新しいアクセシビリティ監査、およびその他の多数の改善も追加されている。

オプションのチェーン、プライベートクラスフィールド、nullish coalescingを含む最近のECMAScriptの追加により、Chrome 85 DevToolsはコンソールでこの構文をサポートし、ソースタブでの正確な構文の強調表示を含む。Service Workerサポートは、ネットワークパネルのresponseWithイベントからも恩恵を受ける。

Chrome 85 DevToolsリリースは、WebAssemblyリソースを操作するためのバイトコードオフセット情報を提供し、バイナリデータを表示するときにそれを明確にし、WebAssemblyの問題をデバッグするときにランタイムの場所を参照しやすくする。

Chrome 85 DevToolsリリースには、アプリショートカットの警告、パフォーマンスパネルの更新、その他の表面的な改善など、いくつかの改良点がある。開発者は、Chrome Canaryチャネルに切り替えて、これらの機能を今すぐ活用することをお勧めする。

Chrome DevToolsは、ほとんどのChromiumベースのブラウザーでDevToolsの基盤を提供する。Chrome DevToolsは、開発者が効率的なWebアプリを構築できるように、新しい標準、パターン、問題点、ベストプラクティスをサポートするために進化し続けている。DevToolsは、Google Chromeの各リリースに含まれている。DevToolsのすべての新機能については、コミュニティフィードバックが推奨される。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT