Chrome浏览器JavaScript冻结问题：DevTools无法调试，求助解决方法

我在Chrome 128.0.6613.137（Windows 11）上复现了该问题：点击复选框后浏览器完全冻结约40秒，之后才更新列表底部Chiara的数值；Firefox 129.0则瞬间完成操作，无任何卡顿。

• 用Performance面板定位长任务：
  打开Chrome DevTools的Performance面板，点击录制按钮后立即触发复选框操作，等待卡顿结束后停止录制。查看Main线程的耗时统计，重点关注红色的长任务区块（超过50ms的任务会被高亮），展开调用栈就能找到持续占用主线程的代码逻辑。
• 启用“暂停长任务”自动断点：
  按F1打开DevTools设置，找到Pause on long tasks选项并勾选。当浏览器出现长任务时会自动暂停执行，直接定位到卡顿的代码位置，比手动断点更高效。
• 排查Web Component的观察者循环：
  检查组件的attributeChangedCallback、connectedCallback或自定义计算属性逻辑，看是否存在属性修改→触发计算→再次修改属性的无限循环，这种循环会持续占用主线程导致冻结。
• 排除扩展干扰：
  切换到Chrome隐身模式打开页面测试，或手动禁用所有浏览器扩展。部分脚本注入类、广告拦截类扩展可能与Web Component的自定义元素逻辑冲突，引发意外的重绘/重排循环。
• 简化DOM结构测试：
  临时删除页面中除复选框和Chiara项之外的所有DOM元素，逐步恢复其他内容，排查是否是大量DOM元素与组件交互导致的重排风暴。
• 用Coverage面板排查冗余执行：
  打开Coverage面板，录制点击复选框后的代码执行情况，查看是否有大量框架内部代码或自定义逻辑被重复执行，这往往是性能瓶颈的信号。

内容的提问来源于stack exchange，提问作者Nabab