chrome浏览器如何断点调试异步加载的JS


Posted in Javascript onSeptember 05, 2016

前言

在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看。

这是我们用Sources断点调试的实例图:

chrome浏览器如何断点调试异步加载的JS

图中我们可以看到,在index.js中我们通过$.getScript引入test.js,看看表现如何:

chrome浏览器如何断点调试异步加载的JS

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

chrome浏览器如何断点调试异步加载的JS

不出所料,Sources里果然没有发现test.js的踪迹!高潮来了,那还怎么进行断点调试呢???

我知道两个方案,先来最简单的:

方案一: 在test.js代码的头部或者尾部加上//@ sourceURL=test.js,然后在(no domain)里面找到它进行调试,看看结果:

chrome浏览器如何断点调试异步加载的JS

方案二:$.getScript这种异步的方式换成创建script标签同步加载的方式,直接上图:

chrome浏览器如何断点调试异步加载的JS

总结

控制台断点对我们进行代码检查、功能检测、数据查看等等需求太有用了,我们尽量用断点替换那烦人的console.log吧,以上就是这篇文章的全部内容,希望对大家的学习和工作能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 #Javascript
Vue.js每天必学之表单控件绑定
Sep 05 #Javascript
深入分析node.js的异步API和其局限性
Sep 05 #Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 #Javascript
JS锚点的设置与使用方法
Sep 05 #Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 #Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 #Javascript
You might like
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python3 读写文件换行符的方法
2018/04/09 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python 发送邮件方法总结
2020/08/10 Python
了解一下python内建模块collections
2020/09/07 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
大学生秋游活动方案
2014/02/17 职场文书
小学生作文评语大全
2014/04/21 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL