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

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

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


通过实际操作来分析下:


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

Chrome,FireFox开发者工具无法找到js?_第1张图片



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

我知道的有两种方法:

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

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

Chrome,FireFox开发者工具无法找到js?_第2张图片


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

Chrome,FireFox开发者工具无法找到js?_第3张图片



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


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



你可能感兴趣的:(js,js调试)