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 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
vue如何判断dom的class
Apr 26 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
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
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
利用Python开发实现简单的记事本
2016/11/15 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
this关键字的作用
2016/01/30 面试题
2013英文求职信模板范文
2013/11/15 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
开学典礼决心书
2014/03/11 职场文书
经济管理自荐书
2014/06/09 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js