类实例引用的元素修改后Firefox代码审查器未即时更新是什么原因？

这是Firefox开发者工具的默认设计，为了避免调试暂停时DOM频繁变更带来的性能损耗，默认在JS执行线程暂停时不会实时更新审查器的DOM树展示，可通过以下方法解决：

• 手动刷新审查器节点
  调试暂停状态下，在审查器面板找到你修改的目标DOM节点，右键点击该节点，选择重新加载节点，即可同步最新的类名、属性等修改结果。
• 通过控制台跳转同步状态
  调试暂停时在控制台输入对应DOM元素，比如console.log(mainFolder.tabs[0])，右键点击控制台输出的DOM对象，选择在检查器中显示，此时审查器定位到的节点就是已更新类名的最新状态。
• 开启DOM突变断点
  调试开始前，先在审查器中找到目标节点，右键点击选择中断设置 > 属性更改时中断，当代码修改该节点的类名等属性时，调试器会自动触发断点，且此时审查器会自动同步节点的最新属性，无需手动刷新。
• 修改DevTools默认配置（永久生效）
  在Firefox地址栏输入about:config，搜索devtools.inspector.updateWhilePaused，将该配置项的值切换为true，之后调试器暂停状态下审查器也会自动同步DOM修改，不需要额外操作。

注：你提供的示例代码存在语法问题，selectTab方法被错误定义在了constructor内部，实际运行会报错，属于示例简化的笔误，不影响你描述的核心问题复现。

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