Chrome 88の最近のリリースでは、Chrome DevToolsの重要な更新があった。例えば、ネットワークデバッグの改善、実験的なCSS Flexboxデバッグツール、フレーム詳細ビューの改善、新しいWASMデバッグ機能、一般的なパフォーマンスの改善である。
[ネットワーク]タブには、デバッグプロセスを簡素化することを目的とした3つの新機能がある。
- 特定のリクエストを右クリックして[値のコピー]を選択すると、リクエストのプロパティを[ネットワーク]タブから直接コピーできるようになった。
- ネットワークイニシエーターのスタックトレースは、[スタックトレースのコピー]オプションを選択することにより、個々のネットワークリクエストからコピーできるようになった。
- 失敗したCross-Origin Resource Sharingに対して、ネットワークビューで正しくフラグ付けされるようになった。
CSS Flexboxは強力な設計ツールであり、両軸で動作するため、デバッグが難しいことがよくある。デバッグプロセスを簡素化するために、Chromeには2つの新しいバッジが用意されている。最初のバッジは要素階層ビューに表示され、display:flexで要素にフラグが付けられる。
2番目のバッジは、次のフレックスボックスプロパティに基づくコンテクスト・アウェアの配置インジケーターである。
- flex-direction
- align-items
- align-content
- align-self
- justify-items
- justify-content
一方で、以下に基づく方向を考慮する。
- flex-direction
- direction
- writing-mode
フレックスボックスのデバッグを使用するには、開発者は[設定]> [実験]タブでそれを有効にする必要がある。
Chrome 88 Devtoolsでは、フレーム詳細ビューも改善されている。例えば、クロスオリジン分離情報ステータスに関する追加情報、フレームWebワーカーに関する専用情報、別のウィンドウを開くトリガーとなるフレームを検出する機能がある。
Chrome 88では、Wasmデバッグが既存のJavascriptデバッグ機能とも連携される。ブレークポイントで実行を一時停止している間、開発者は変数にカーソルを合わせて現在の値を確認したり、コンソールで評価することができる。
最後に、DevToolsの起動が、JavaScriptコンパイルの観点で約40%高速になった。起動中のシリアル化、解析、逆シリアル化のパフォーマンスオーバーヘッドが削減されたためである。
Chrome DevToolsでは、Webアプリケーションをデバッグするための豊富なユーティリティセットが提供されている。ほとんどのChromiumベースのブラウザで使用できる。Chrome開発チームは引き続きDevToolsを改善し、Chromeのリリースごとに新機能を出荷する。開発者は、Google開発者のWebサイトで最新の機能を追跡し、メーリングリストで考えられる機能、変更、バグについて議論することができる。