浏览器调试动态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 定义function的三种方式小结
Oct 16 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
itchat接口使用示例
2017/10/23 Python
详解小白之KMP算法及python实现
2019/04/04 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
使用Python封装excel操作指南
2021/01/29 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
大学生实习自我鉴定
2013/12/11 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
开学典礼感言
2014/02/16 职场文书
大学三年计划书范文
2014/04/30 职场文书
长城英文导游词
2015/01/30 职场文书