如何检测内联样式及drop-right类的注入来源？

一、针对drop-right类的排查 #

• 用Chrome DevTools全局搜索：按Ctrl+Shift+F（Windows）/Cmd+Opt+F（Mac），输入drop-right，勾选「正则表达式」和「搜索文件内容」，遍历所有匹配的CSS、JS文件，重点找类的定义代码（如.drop-right{...}）或动态添加类的逻辑（如element.classList.add('drop-right')）。
• 聚焦JS文件排查：在Sources面板的文件列表中过滤出.js文件，再搜索drop-right，定位到执行添加类的代码块后，通过调用栈回溯触发该逻辑的上游操作。

二、针对内联定位样式的排查 #

• 启用子树修改断点：在购物车元素上右键选择「Break on → Subtree Modifications」，当元素属性或子节点被修改时触发断点，此时查看调用栈就能找到修改style属性的代码位置。
• 用Performance面板录制分析：打开Performance面板点击录制，触发购物车显示操作后停止录制，在「Main」线程的调用栈中筛选「Style」相关任务，定位修改left/top属性的代码。
• 排查响应式CSS规则：在Elements面板的Styles标签中，搜索position: absolute或left，查看是否有@media媒体查询规则作用于购物车元素，这类规则可能因页面布局差异触发不同的定位逻辑。

三、页面差异针对性排查 #

• 对比DOM结构差异：检查正常页面与异常页面的导航栏宽度、布局容器尺寸，购物车的定位值可能依赖父容器或导航元素的尺寸计算，异常页面的布局差异可能导致定位偏差。
• 对比加载的脚本差异：在Network面板中，对比正常页面和异常页面加载的JS文件列表，找出仅在异常页面加载的脚本，逐一排查其中是否有修改购物车定位的逻辑。

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