辅助脚本：查看全局属性

cxxjackie

steven026 发表于 2022-7-18 20:24
GG发现一个bug
测试网址https://gltyx.github.io/omsi-loops/，加载完直接运行脚本就会报错 ...

上次改完有点bug，已经修好了，请更新到1.2.0。另外这页面有个问题是搜索深度不能太大，按默认的20很容易卡死（看电脑配置），嵌套太多了。我加了个最大收集数的限制，超过这个数字会弹提示要求改小搜索深度（防止页面卡死），这个页面建议不要超过12。

steven026

cxxjackie 发表于 2022-8-5 22:49
上次改完有点bug，已经修好了，请更新到1.2.0。另外这页面有个问题是搜索深度不能太大，按默认的20很容易 ...

ggnb
昨晚研究了好久，新版造成卡死内存溢出的原因，但是没研究出解决方案【……

上个版本没有卡死是因为哥哥绕过了遍历Proxy，而这个版本可以遍历Proxy了，但这个页面存在大量的Proxy所以导致卡死了？
为啥这个页面正向的时候存在这么多Proxy不会卡死，而我们逆向遍历的时候会内存溢出？
我在想是不是能手动回收一些变量？但是没啥头绪 我尝试把const改成let，用完就=null销毁，似乎没啥区别，难道是因为for循环？
（我查了下资料说for(let i=0;i<arrs.length;i++)的内存占用会比for(let arr of arrs)的小，我控制台自己手动尝试了下的确是，但我昨天尝试下改写了下这个脚本，对于这个脚本似乎并没有什么作用）
我在想是不是能优化下代码的写法，减少for循环嵌套，但暂时没什么很好的思路，今天晚上有空我再研究一下，不知道哥哥对此有什么看法吗？

cxxjackie

steven026 发表于 2022-8-6 11:44
ggnb
昨晚研究了好久，新版造成卡死内存溢出的原因，但是没研究出解决方案【……

其实卡死跟Proxy无关，单纯是因为对象太多了，代码每次递归都涉及堆栈操作，会在内存里保留一些局部变量之类的东西，递归次数多了就会内存占用暴涨。这个问题应该是有可能优化的，回头我再折腾一下看看。至于for of改for，这种区别非常小，相比堆栈的性能消耗不是一个数量级的，一般来说不需要关注这种“微优化”，而且不同浏览器上表现也不一样。
之前说这个脚本的代码写得不太好，我还记得当初是道哥说让我发个脚本，我就随手从我另一个脚本上扒下来的，所以代码显得非常散乱。已经在着手重构了，之后可能会加入Vue和React的搜索支持，只是不确定性能会不会更糟。

cxxjackie

steven026 发表于 2022-8-6 11:44
ggnb
昨晚研究了好久，新版造成卡死内存溢出的原因，但是没研究出解决方案【……

新版本已更新，我修改了算法，原来的算法是有缺陷的，假设这两条路径指向同一引用：
window.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p.q.r.s.t
window._t
如果第一条路径的检查先于第二条，由于达到最大深度，之后的属性都不会被收集；检查到第二条时，由于引用重复也会停止收集。这主要是出于速度考虑，但其实有点掩耳盗铃，因为第二条路径之后的属性会被丢弃，而这明明是一条短路径，最终会导致很多属性收集不到。新算法优化了这个问题，路径不再是实时生成的，而是基于最短路径原则动态更新的。因此新版本收集到的属性会比原来更多，路径也更短，但带来的影响就是性能消耗更大了。虽然有做一些优化，但速度仍然不理想，出于平衡考虑，我改小了默认搜索深度（长路径的价值更低了），去除收集数的限制（异步更不容易卡死了）。另外长路径大多是由框架引起的，新版可以搜索Vue和React，也能在一定程度上平衡这些问题。

steven026

cxxjackie 发表于 2022-8-21 12:27
新版本已更新，我修改了算法，原来的算法是有缺陷的，假设这两条路径指向同一引用：
window.a.b.c.d.e.f. ...

GGNB，
另外关于Vue的属性，好像只能通过$searchKey搜到？
能在全局属性里面加一个分类node吗？这样就能一目了然有多少vue的node了

cxxjackie

steven026 发表于 2022-8-21 20:22
GGNB，
另外关于Vue的属性，好像只能通过$searchKey搜到？
能在全局属性里面加一个分类node吗？这样就能 ...

加倒是可以加，只是这些node的属性严格来说不属于全局的，加进去容易引起误解。而且显示全局属性和收集属性是2个过程，我改成异步了，要把node放进全局属性的话就得先完成属性的收集，这样你按下菜单命令的时候控制台第一时间是没有任何输出的，体感上有点糟糕（你可能不确定自己按没按），虽然可以通过加输出解决，不过我个人是挺反感往控制台塞太多东西的。其实我一开始的计划是加3个函数：$searchKey、$searchVue、$searchReact，后来也是感觉多此一举，就全合并到一个了。
只是想看Vue的node的话，其实一条命令就足够了：$searchKey('_isVue')

李恒道

cxxjackie 发表于 2022-8-6 20:54
其实卡死跟Proxy无关，单纯是因为对象太多了，代码每次递归都涉及堆栈操作，会在内存里保留一些局部变量 ...

没办法
说实话我贼喜欢看哥哥的文章和代码！

xu28124

6666666666666

zui猛虎

dawdawawdasd

steven026

本帖最后由 steven026 于 2022-9-25 16:25 编辑

本帖最后由 steven026 于 2022-9-25 16:24 编辑

哥哥 react的全局属性有点问题

这个路径没有被搜索到

document.querySelector(".resources")[Object.keys(document.querySelector(".resources")).find(i=>i.includes("Fiber"))].memoizedProps.children[0].props.stats.resources.Gold

然后显示搜索到的2个路径都不存在

['return']['pendingProps']['stats']['resources']['Gold']
['return']['updateQueue']['lastEffect']['deps'][0]'discoveredResources']['Gold']

测试地址：https://g1tyx.github.io/cards-n-catapults-idle/

另外path:"node[prop]……"实际用起来不太方便，能不能再加一个键直接存储完整的JS路径
比如这样

{
JSpath: document.querySelector(".resources")['__reactFiber$g0o5zkwlekh']['return']['updateQueue']
node: div.card-inventory,
path: "node[prop]['return']['updateQueue']",
prop: "__reactFiber$g0o5zkwlekh"
}