如何使用 Chrome 浏览器调试动态加载的 Javascript 脚本

时间:2022-02-15 21:13:17

在IE中,可以在调试程序的文档列表最下方看到一个“动态脚本”的文件夹,里面可以找到动态加载的脚本,但是。。。数量繁多,也不能自定义名称。。。

如何使用 Chrome 浏览器调试动态加载的 Javascript 脚本

但是在 Chrome 中,貌似根本找不到动态脚本,网上搜了一下,发现可以使用   //# sourceUrl=xxx.js   来自定义动态脚本的名称,非常方便!

如何使用 Chrome 浏览器调试动态加载的 Javascript 脚本

<script>
//# sourceUrl=xxx.js
//其它的js代码。。。
</script>

还可以使用 //# sourceURL=http://abc.com/xxx.js 这样的格式,用域名以及路径来分类不同的动态脚本!

如何使用 Chrome 浏览器调试动态加载的 Javascript 脚本

另附官方文档:https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps

 

根据IE官方博客的描述,在最新的IE中,貌似已经可以使用 sourceUrl 注释了,但是测试了一下,仍然没有任何效果。。。也可能是我使用的方法不对。。。(测试IE版本:11.0.9600.17842)

http://blogs.msdn.com/b/ie/archive/2014/04/14/what-s-new-in-f12-with-windows-8-1-update.aspx

其余(火狐?)浏览器暂未测试。。。好吧,刚去测试了一下,火狐也是支持的,没问题!