前文

​ 其实之前也有过被 Chrome 扩展（又称插件）坑的经历，奈何「不长记性」这次又被坑了，查了大半天，很浪费时间。所以这次做个记录，一来加深印象，二来给同学们分享个思路做参照。

背景

​ 相信前端开发同学对 Chrome 扩展应该都不陌生，它是一种使用 Web 开发技术（如 HTML、CSS、JavaScript）来增强浏览器能力的应用，详情可参考官方文档。但也是因为 Chrome 扩展可任意修改当前网页的结构和内容，会导致前端开发同学遇到很多奇怪的问题。比如广告不显示了（被扩展 block 调了），页面样式错乱（被扩展覆盖或者修改 DOM 结构）。这次遇到的问题则是【有道词典】把 iframe 的根节点元素替换成 audio 元素，导致应用组件不能在画布中正常拖拽。详情可参考下图：

详情

​ 1、当我准备开发小程序组件的时候，我先 clone 项目并切换到对应分支，执行安装（npm i）和启动（npm start）命令后，打开应用发现无法把工具栏组件拖动到画布中，查看浏览器控制台也没发现错误（都是 warning）；

​ 2、怀疑是代码没更新导致，执行 git pull 发现远程分支也没改动，对比 commit 也完全一样，排除代码未更新原因；

​ 3、询问同项目另外俩位同学后反馈都是可以正常拖拽的，所以怀疑是不是 Node 版本不一致导致，于是用 n 把 Node 切换成和他们一样的版本(v14.15.1)，删除 node_modules 重新安装运行，发现还是不行（甚至还执行了 npm cache clean --force 清除缓存重新安装也不行）;

​ 4、没办法，只能 debug 代码，发现不能拖拽原因是拖拽元素后未触发 drop hook（项目拖拽基于 react-dnd 库），导致拖拽后不能生成元素，但原因还未知；

​ 5、审查元素查看当前画布结构，发现根元素变成 audio 元素（画布是基于 react-frame-component 用于实现样式隔离），感觉很奇怪，以为是这个库版本不对或者有特定的限制（此时还没想起浏览器扩展搞的鬼，错过真相）；

​ 6、执行 npm ls react-frame-component 对比安装包版本，和那两位同学是一致的；

​ 7、正在没有头绪之际，有位同学给了我灵感。他给我发来了他的 node_modules 安装包，让我排查下是不是某个安装包版本不对导致，我一下子想起是不是【浏览器的问题】，于是打开隐身模式访问可以正常拖拽了。。。；

​ 8、至此问题已定位，是浏览器扩展干的！打开浏览器扩展，浏览了一圈，感觉只有【有道词典】跟 audio 有关系（单词发音），关掉它后刷新，可以正常拖拽了。

总结

​ 梳理了下问题定位过程，感觉可以总结出一套（针对这种运行结果不一致）类似问题定位思路，即[代码]->[环境]->[包版本]->[浏览器]。

最后

​ 回想浪费的半天时间，心情郁闷，把【有道词典】删了！祝大家圣诞快乐！