Chrome,FireFox开发者工具无法找到js?

来源:互联网 发布:淘宝代金券怎么使用 编辑:程序博客网 时间:2024/05/29 18:22

今天一位同事找到我,说新的框架下前端无法进行JS调试了?由于忙着对接接口也没回答他。晚上出去玩了下,回来睡不着,在这里说明就这个问题说下原因和解决办法。

现在前端调试基本都用firebug和chrome强大的Consle Sources下进行js代码断点调试,但是一些框架主体加载后、其他界面都是通过XHR请求加载的。那找不到的js也同样是通过异步加载的方式。


通过实际操作来分析下:


我们在Network中看到product.js已经成功引入,但是它却属于XHR类请求,这样我们在Sources必然找不到它。




那还怎么进行断点调试呢???

我知道的有两种方法:

方法1(最方便简洁,反正我是用这种): 在product.js代码的头部或者尾部加上(这里的product.js 只是一个名字哈,任君取)

//@ sourceURL=product.js
然后在(no domain)里面找到它进行调试,看看效果:



方法2这种异步的方式换成创建script标签同步加载的方式:




var script = document.createElement("script");script.src = 前缀+"js/open/product.js";document.body.appendChild(script);


是不是轻松加愉快,想调哪个加哪个。



0 0
原创粉丝点击