DevTools は、Web アプリケーションの開発およびテストにおいて、間違いなく最も便利なツールの 1 つです。Chrome 85では、DevToolsに以下のような改良が加えられています。
- Network]パネルの[Timing]タブに、responseWith イベントが追加され、サービス ワーカーのフェッチ イベント ハンドラが実行されてからプロミスが完了するまでの時間が記録されるようになりました。
- コンソール設定の「グループ類似」トグルが繰り返しメッセージに適用されるようになり、コンソール設定の「コンテキストのみを選択」設定が保持されるようになりました。
- アプリケーションアイコンのサイズが正方形でない場合、マニフェストパネルにアプリケーションショートカットに関する警告が表示されるようになりました。
- 複数のビューポートサイズにおける計算ペインの一貫した表示
これらはすべて有益な変更ですが、この記事ではスタイル編集とJavaScriptの新機能に関連する変更、およびソースパネルとパフォーマンスパネルの変更についてレビューします。
おそらく、あなたがこれを読む頃には、Chrome 85がメインストリームの安定版リリースになっていることでしょう。この記事を書いている時点では、Chrome 85は開発版のChromeをダウンロードすることでのみ入手可能です。Chromeのリリースに関する詳細は、Chromeリリースチャンネルのページでご覧いただけます。
スタイル編集のためのCSS-in-JSフレームワーク
コードやスタイルをその場で編集し、変更をリアルタイムで確認できるのは、DevToolsの最も便利な機能の1つです。
CSSスタイルを扱うとき、CSSオブジェクトモデルAPIを使ってプログラムでCSSルールを操作することができます。
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#myDiv {background-color: blue; color: yellow}');
ただし、DevToolsではこの方法で作成したスタイルを編集することはできません。
これは、LitElementやReact Native for Webのようなライブラリにも当てはまります。
const sheet = new CSSStyleSheet();
sheet.replaceSync('#myDiv {background-color: blue; color: yellow}');
document.adoptedStyleSheets = [sheet];
JavaScriptの新機能をサポート
ChromeはAcornDevToolsコンソールでJavaScriptを解析します。
Chrome 85では、Acornがバージョン7.3.0に更新され、他の改善点の中で、オプションの連鎖演算子構文がサポートされました。
以下のようなコードを書く代わりに、オプションの連鎖演算子を使います。
if (user && user.name && user.name.last)
lastName = user.name.last.toUpperCase();
これでいいじゃないですか。
lastName = user?.name?.last?.toUpperCase();
しかし、Chrome 84では、この演算子の自動補完が壊れています。
コンソールの属性自動補完で、user.やuser[.と同じように、この演算子を使えるようになりました。
他の2つの変更は、"ソース "パネルのシンタックスハイライトに関するものです。
Chrome 84では、プライベートフィールドとメソッドは白文字で表示されます。場合によっては、行の残りの部分まで白で表示されます。
ソース・ボードはCodeMirror 使用してコードを表示します。
CodeMirror が Chrome 85 でバージョン 5.54.0 に更新されました。このバージョンでは、プライベート プロパティとクラス フィールドの解析が改善されています。
JavaScriptの新機能に関する最後の変更は、nullish合体演算子についてです。
Chrome 85では、この演算子がコードに含まれていると、pretty printの書式が崩れます。
でも今は直って、フォーマットも機能しています。
ソースパネルの変更点
ソースパネルには他にも便利な変更があります。
エディターで何も選択していなくても、現在の行をコピーまたはカットできるようになりました。
これを行うには、コピーまたはカットしたい行の末尾にカーソルを置き、適切なキーボードショートカットを押します。
もう1つの改良点は、WebAssemblyファイルを使用している場合、エディタが他の形式で使用される行ベースの位置ではなく、Wasmモジュール内のソース位置を示すバイトコードオフセットを表示するようになったことです。
最後に、ブレークポイント、条件付きブレークポイント、ログポイントに新しいアイコンが追加されました。
以下の通り：
繰り返しますが、ダークモードではこのように見えます：
今はもっとカラフルです：
これにより、特にダークモードが有効な場合に、ブレークポイントアイコンの読みやすさが向上すると思います：
パフォーマンス・パネル最新情報
DevToolsのPerformanceパネルには2つの重要な変更があります。
1つ目について、Chrome 84では、指定されたスクリプトがキャッシュされていない場合、DevToolsはキャッシュ情報を表示しません。
キャッシュ情報が常に[サマリー]タブに表示され、キャッシュが発生しなかった理由が示されるようになりました。
つ目の変更は、録画規則に表示される時間に関するものです。
以前のバージョンでは、時刻は録画の開始時刻に従って表示されていました。
FCPの2ページ目に表示されているタイムスタンプ、8907ミリ秒に注目してください。これは記録開始時のイベント時刻です。
さて、時間はユーザーがナビゲートする場所に対して相対的なものです。
上の例では、2番目のページのFCPには901.1ミリ秒のタイムスタンプがあり、これはページがロードされた後にイベントが発生した時間です。
まとめます。
この投稿では、Chrome 85におけるDevToolsの最も重要な変更点をレビューします。冒頭で述べた4つの変更点については深くレビューしていませんが、投稿で詳しく知ることができます。
幸いなことに、Lighthouse 6.0は次のリリースを待つことなくChrome 84でリリースされました。バージョン6.0の変更点については、投稿またはリリースノートをご覧ください。
最後に、またはダウンロードすると、最新の DevTools 機能にアクセスできます。
