如何排查莫名出现的element.style及HTML额外属性的根源？

嘿，我之前也碰到过类似的诡异情况——明明自己没碰这块代码，DOM却凭空多了一堆奇怪属性，给你梳理几个最可能的原因和排查方法：

• 浏览器扩展搞的鬼：看你新增的属性带datasq前缀，大概率是某个页面编辑、样式定制类的浏览器扩展（比如可视化页面编辑器插件，或是Stylus这类自定义样式工具）在后台悄悄修改了DOM。最快的排查方法：禁用所有浏览器扩展，或者直接用Chrome无痕模式打开页面，看看这些额外属性会不会消失。
• 全局JS脚本的影响：你说只改了另一页面的JavaScript，但如果那个JS是全局引入的（比如在公共头部/尾部加载的），可能里面的逻辑不小心遍历或修改了所有页面的nav元素。另外也要检查页面里的第三方脚本（比如统计、广告SDK），有些第三方脚本会偷偷操作DOM元素。
• 缓存或本地存储残留：有时候浏览器缓存了旧的页面资源，或是某些脚本依赖的本地存储数据异常，也会导致DOM渲染出问题。可以试试强制刷新页面（Ctrl+Shift+R），或是清理浏览器缓存后再打开。

精准定位的小技巧 #

打开Chrome开发者工具（F12），跟着这几步走：

1. 找到被修改的nav元素，右键选择Break on > Attribute modifications
2. 刷新页面，当有脚本修改这个元素的属性时，调试器会自动断住
3. 此时查看调用栈，就能直接找到是哪个脚本文件、哪一行代码在修改DOM了！

如果按上面的方法还是找不到问题根源，可以把你修改的JS代码片段或者页面引入的脚本列表贴出来，大家再帮你深挖～

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