BT

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

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Chrome 88 Devtoolsの新機能

Chrome 88 Devtoolsの新機能

ブックマーク

原文(投稿日:2021/03/01)へのリンク

Chrome 88の最近のリリースでは、Chrome DevToolsの重要な更新があった。例えば、ネットワークデバッグの改善、実験的なCSS Flexboxデバッグツール、フレーム詳細ビューの改善、新しいWASMデバッグ機能、一般的なパフォーマンスの改善である。

[ネットワーク]タブには、デバッグプロセスを簡素化することを目的とした3つの新機能がある。

  1. 特定のリクエストを右クリックして[値のコピー]を選択すると、リクエストのプロパティを[ネットワーク]タブから直接コピーできるようになった。
  2. ネットワークイニシエーターのスタックトレースは、[スタックトレースのコピー]オプションを選択することにより、個々のネットワークリクエストからコピーできるようになった。
  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サイトで最新の機能を追跡し、メーリングリストで考えられる機能、変更、バグについて議論することができる。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには 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