便利かもしれない機能が devtools に増えてた
◆ Layers と Performance monitor
devtools に新しい機能のタブが増えても画面にはでてこないで More tools の中に隠れてます
なのでいつの頃からあったのかよくわからない機能も多いです
久々になにか増えてないか見たら便利かもしれないのが増えてました
3D 表示になっていてマウスを使ってカメラを動かせます
どこが別レイヤになっているかや z-index の重なりを見たいときに助かります
ただ 3D 表示になるからか 結構重めなのが欠点です
昔は似たようなツールが Firefox にあって時々使ってたのですがいつのまにかなくなってたんですよね
リアルタイムに更新されてグラフ表示されます
頻繁に要素を作り変えるページで見ていると DOM Node やリスナ数は増える一方で全然減ってません
変数に参照を持たせず innerHTML 書き換えや replace などで置き換えてるので GC されそうなんですけどね
devtools を開いてると WeakSet が GC されず Weak らしく動いてるのか確認できないとかもありましたし devtools 用に参照を持っていて減らないようです
devtools を閉じてもう一度開くと一気に減りました
ただヒープサイズは devtools 開きっぱなしでも時々減ってるので GC はされてるようです
なのでいつの頃からあったのかよくわからない機能も多いです
久々になにか増えてないか見たら便利かもしれないのが増えてました
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 はされてるようです