浏览器调试动态js脚本的方法(图解)


Posted in Javascript onJanuary 19, 2018

前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js脚本,后来观察了一下,脚本是动态在页面里引入的,可能是因为这样所以不显示出来,但是如果不能断点调试,只靠打印日志真要把人累死了,效率太低,网络搜索试验了一下,有两种方式可以解决:

1、在脚本里边增加 //# sourceURL=xxxxxxxxx.js,名称自己命名,可以直接使用文件名,如下图:

浏览器调试动态js脚本的方法(图解)

然后在网页里打开包含这个js的页面,这样就在开发者工具里能够看到了,可以像普通js一样正常打断点并进行调试

浏览器调试动态js脚本的方法(图解)

2、第二种方法是利用 console.log("让我调试吧!") 打印日志,在浏览器console里看到输出后,点击后面的链接,即跳入动态脚本。名字一般为vmXXX,如下图:

浏览器调试动态js脚本的方法(图解)

浏览器调试动态js脚本的方法(图解)

总结

以上所述是小编给大家介绍的浏览器调试动态js脚本的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
vue debug 二种方法
Sep 16 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 #Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 #Javascript
web前端vue实现插值文本和输出原始html
Jan 19 #Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 #Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
解决js ajax同步请求造成浏览器假死的问题
Jan 18 #Javascript
js实时监控文本框输入字数的实例代码
Jan 18 #Javascript
You might like
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
python 基础教程之Map使用方法
2017/01/17 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
金讯Java笔试题目
2013/06/18 面试题
农行实习自我鉴定
2013/09/22 职场文书
户外婚礼策划方案
2014/02/08 职场文书
2014年采购工作总结
2014/11/20 职场文书
开学典礼致辞
2015/07/29 职场文书
关爱空巢老人感想
2015/08/11 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
怎么用Python识别手势数字
2021/06/07 Python