Microsoft Edge DevToolsは、Web開発の問題を視覚化するために3Dビューツールを改善します

Microsoftは、開発ツールの一部である3Dビューアツールの大幅な改善を発表しました。このツールは、Web開発者が、Webサイトを集合的に構成する複数の要素を識別、修正、および改善するのに役立つ、かなりの数のパフォーマンスの向上を実現しています。

3Dビューツールは、DOMの複雑さ、不要なスクロールバー、z-indexオーバーレイの問題など、一般的なWeb開発の問題を視覚化して解決するのに非常に役立つことが証明されています。3DビューツールとDevToolsは、明らかに平均的なWebユーザー向けではありません。ただし、すでに開発ツールを使用している人は、新機能の恩恵を受けるはずだとマイクロソフトは保証している。

3Dビューツールは、深くネストされたコンテナを見つけるための最速の方法の1つです。3Dビューツールの[DOM]タブには、DOMツリーが3次元ですばやく表示され、開発者がページのどの部分にラッパーが多すぎるかを判断するのに役立ちます。

ツールの[DOM]タブは、開発者にWebページ全体の概要を提供し、ビューポートの外側の要素が表示されるまで、ズームアウトしてシーンをパンすることもできます。要素の1つをクリックすると、開発者は要素ツールに直接ジャンプできます。

z-indexスタッキングの問題のデバッグ：

3Dビューツールには、探索をより簡単かつ直感的にするZインデックスタブがあります。このツールを使用すると、どの要素がコンテキストをスタックしているか、および要素がz-indexに沿ってどのようにスタックされているかを確認できます。これは、一般的な問題をすばやく見つけるのに役立ちます。

グループレイヤーでのパフォーマンスの問題のデバッグ：

この新機能は、Webページを正しいまたは最適化された数のレイヤーに分割します。これにより、特に一部のコンポーネントが他のコンポーネントとは独立してアニメーション化または変更される場合に、パフォーマンスが大幅に向上します。

Microsoftは、作成されたレイヤーを検出するための新しい[複合レイヤー]タブを追加しました。左側のサイドバーにはレイヤーのリストが表示され、各レイヤーにカーソルを合わせると3Dシーンでレイヤーが強調表示されます。パネルには、レイヤーのレンダリングに必要なサイズやメモリなど、レイヤーに関する重要な情報が強調表示されます。