vue版本：3.2,41，在开发过程中，遇到了“Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')”问题，因为报错的调整栈，也没精确的和业务代码相关的信息，所以一度阻塞了我大半天的时间，白白浪费了我不少摸鱼时间。所以，在这里做个分享，希望可以帮大家省下更多摸鱼时间。
看掘金上一篇Vue3 报错：Cannot read properties of null (reading 'insertBefore')的文章。大意是说在v-if标签上同时绑定了其它指令，操作了dom删除，会导致这情况的出现。(还分析为源码，深层次分析了什么会有这问题的原因，但我没看[手动狗头])
但是，我对照着找了半天，也没找到项目里相关代码有这样的场景，来来去去各种尝试，一直未解决问题。
第二天的早上，突然有了想法，试下果然快速找到了代码位置。那就是使用Chrome的条件断点功能。
- 点击最终的代码报错信息，可以定位到报错位置。
- 右击行号，选择添加条件断点。
输入条件，我这里输入的是parent === null，回车。刷新后再复现报错
但是，到这里我仍然不明白出现这个问题的原因。因为这是并没有添加其它指令同时操作dom，为什么vue插入一句注释点位，而且没有找到父元素呢？
同时，上面之所以要使用条件断点，是因为复制报错场景时，这段代码会重复直接很多次，如果靠我们自己手动点，来判断parent是否为null，太浪费时间。
后面，经同事提醒，对比，发现是：是组件template里顶部有一个注释标签的问题，把注释移到到template外，问题解除。如下图：
但是，我通过最小demo的方式，并没有复现这个问题。
总结：
- 对于一段会频繁执行某些场景才报错的代码(通常是框架或库)，可以使用Chrome的条件断点功能更好的去打数点收集更多信息；
- 使用Vue时避免出现在v-else上又有其它指令移除dom的情况；
- 从Vue3开始，组件支持多个根元素，但尽量避免使用，在业务开发过程中会存在一些问题，特别是上述的把注释标签写在
