浏览器调试动态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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
vue-router源码之history类的浅析
May 21 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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
无线电广播的开始
2002/01/30 无线电
PHP循环结构实例讲解
2014/02/10 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
js获取form的方法
2015/05/06 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
手机端转换rem适应
2017/04/01 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
中海讯通笔试题
2015/09/15 面试题
社区七一党员活动方案
2014/01/25 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
三下乡个人总结
2015/03/04 职场文书
详解Redis复制原理
2021/06/04 Redis
SSM VUE Axios详解
2021/10/05 Vue.js