◆ Layers と Performance monitor

devtools に新しい機能のタブが増えても画面にはでてこないで More tools の中に隠れてます
なのでいつの頃からあったのかよくわからない機能も多いです

久々になにか増えてないか見たら便利かもしれないのが増えてました

Layers

今見てるのページのレイヤー構造が見えます
3D 表示になっていてマウスを使ってカメラを動かせます
どこが別レイヤになっているかや z-index の重なりを見たいときに助かります
ただ 3D 表示になるからか 結構重めなのが欠点です

昔は似たようなツールが Firefox にあって時々使ってたのですがいつのまにかなくなってたんですよね

Performance monitor

CPU 使用率・ JavaScript のヒープサイズ・ DOM Node の数・イベントリスナの数などが見れます
リアルタイムに更新されてグラフ表示されます

頻繁に要素を作り変えるページで見ていると DOM Node やリスナ数は増える一方で全然減ってません
変数に参照を持たせず innerHTML 書き換えや replace などで置き換えてるので GC されそうなんですけどね
devtools を開いてると WeakSet が GC されず Weak らしく動いてるのか確認できないとかもありましたし devtools 用に参照を持っていて減らないようです
devtools を閉じてもう一度開くと一気に減りました

ただヒープサイズは devtools 開きっぱなしでも時々減ってるので GC はされてるようです