移动调试时Spy-Debugger断点就是不触发怎么办?

程序猿樱潼 阅读 27

大家好,我在用Chrome DevTools配合Spy-Debugger调试安卓真机时遇到个怪问题。设置了断点后页面明明走到那行代码了,断点就是不触发。之前用过微信开发者工具的调试方式没问题,但这次项目需要原生安卓调试…

尝试过重启USB调试、重装Spy-Debugger插件,甚至换过两台安卓设备都一样。控制台还报了个警告:Failed to load resource: net::ERR_FILE_NOT_FOUND,但文件路径明明是对的…

有没有遇到过类似情况?是配置哪里漏了吗?附上配置片段:


// vue.config.js里配置了
chainWebpack: config => {
  config.devtool('source-map'); // 已尝试过inline-source-map
},
我来解答 赞 7 收藏
二维码
手机扫码查看
2 条解答
南宫林莹
这个问题大概率是source map配置和调试环境的问题。你虽然在vue.config.js里设置了devtool,但这个配置在安卓真机调试时可能不够。

先说结论,你需要确保两件事:第一是正确配置了webpack的devtool,第二是要让安卓设备能够访问到source map文件。

建议把devtool改成eval-source-map,这个模式在开发环境下更适合移动端调试。然后重点来了,你看到的那个Failed to load resource警告很关键,说明安卓设备访问不到map文件。需要在vue.config.js里加上publicPath配置:

config.output.publicPath = 'http://你的本地ip:端口号/'

记得把"你的本地ip"替换成你电脑的实际局域网ip地址,比如192.168.x.x这种,端口号保持和devserver一致。

另外,确保Chrome DevTools里开启了“Discover network targets”,并且spy-debugger启动时加了--sourcemap参数。有时候还得检查下防火墙设置,别把本地的devserver端口给拦截了。

我之前也被这个坑过,尤其是当项目用了cdn或者反向代理的时候更容易出问题。按照这个思路调整应该就能正常触发断点了。
点赞 3
2026-02-17 16:02
Code°奕卓
source-map改成eval-cheap-source-map试试
控制台报错说明文件路径映射有问题
spy-debugger对sourcemap类型敏感
点赞 5
2026-02-06 13:16