ニュース
「Microsoft Edge」開発者ツールの3Dビューツールが強化
HTML構造の立体表示、Zオーダーだけでなく、合成レイヤーの情報まで取得可能に
2022年6月22日 15:23
米Microsoftは6月21日（現地時間）、「Microsoft Edge」の開発者ツール（DevTools）に搭載されている［3D View］ツールをアップデートしたと発表した。同社は最近、「Microsoft Edge」開発者ツールの改善に積極的だが、今回のアップデートでもその熱意がうかがえる。
3Dビュー（3D View）は、WebページのHTML構造を3次元で視覚化するツール。HTML要素の親子関係を調べながらWebページをデバッグするにはDOMツリーをたどるのが一般的だが、大量のHTML要素が入れ子になり、DOMツリーの階層が深くなってくると、どの要素がコンテナになっているのかを把握しづらくなることがある。そこで、それぞれのHTML要素に厚みを持たせ、DOMを積み木のように表現したのが3Dビューだ。3Dビューを利用すれば、HTML要素のZオーダーが一目でわかる。
また、要素がビューポートの外に飛び出しているのも簡単に見つけられるのも便利。たとえばWebページをデザインするとき、意図せずスクロールバーが表示されてしまうことはよくある。しかし、3Dビューを利用すればコンテナから飛び出している要素を簡単に突き止められる。
さらに、今回追加された［合成レイヤー］タブを利用すれば、Webページをレンダリングする際に作成された描画レイヤーを検出することも可能。
レンダリングエンジンはWebページを描画する際、全体をそのままペイントするのではなく、一部をレイヤー化することがある。頻繁に変更される部分とあまり変更のない部分をレイヤーに分けておけば、Webページ全体をまるごと再ペイントしなくても、前者だけをペイントし、あとで後者と合成するだけで済むので、ペイント処理の負荷を大きく削減することができる。
しかし、レンダリングエンジンにレイヤー化を任せていると、無駄なレイヤーが作られてメモリを過剰に消費することもある。［合成レイヤー］タブは、そんな不要なレイヤーがないかをチェックしたい場合に便利。レイヤーをクリックすると、そのサイズ（大きければ大きいほどメモリを消費する）とその理由が表示される。
