浏览器调试动态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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
Javascript中this的用法详解
Sep 22 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 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
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python绘制封闭多边形教程
2020/02/18 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
师德师风整改措施
2014/10/24 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
历史博物馆观后感
2015/06/05 职场文书
家庭贫困证明
2015/06/16 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers