浏览器调试动态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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
js实现的折叠导航示例
Nov 29 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 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
德生PL330的评价与改造
2021/03/02 无线电
杏林同学录(八)
2006/10/09 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
javascript 封装Date日期类实例详解
2017/05/28 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
python登陆asp网站页面的实现代码
2015/01/14 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python多进程间通信代码实例
2019/09/30 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
final, finally, finalize的区别
2012/03/01 面试题
犯错检讨书
2014/02/21 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2014年双拥工作总结
2014/11/21 职场文书
检讨书范文2000字
2015/01/28 职场文书
车辆管理制度范本
2015/08/05 职场文书
创业计划书详解
2019/07/19 职场文书