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

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

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

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

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

总结

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

您可能感兴趣的文章:

  • chrome浏览器如何断点调试异步加载的JS
  • 使用Chrome浏览器调试AngularJS应用的方法
  • 谷歌浏览器调试JavaScript小技巧
  • 利用浏览器的Javascript控制台调试PHP程序
  • 10个基于浏览器的JavaScript调试工具分享
  • 调试Javascript代码(浏览器F12及VS中debugger关键字)
  • 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
赞 (0)

相关推荐

  • 利用浏览器的Javascript控制台调试PHP程序

    利用浏览器的Javascript控制台调试PHP程序

    PHP是一种服务器端脚本语言,用来开发动态web应用程序.与JAVA相比,没有一个好的服务器端调试工具是其限制之一.通常我们都是在PHP代码中添加echo.var_dump等语句,将变量.数组的值显示在浏览器中来达到调试的目的. 现在,越来越多的浏览器都有了开发这工具或者Javascript控制台,通过这些工具,我们可以很方便的显示PHP代码中的变量或数组值.下面我们来做一个例子.例子中的PHP代码有四个跟踪级别:info, warn, log, error,开发人员可以使用浏览器控制台来显示错

  • 10个基于浏览器的JavaScript调试工具分享

    10个基于浏览器的JavaScript调试工具分享

    调试Javascript可能是web开发中最让人郁闷的事情.所以这里我们绝定来寻找一些好的工具来帮助大家调试.这里是10款我们精选的基于浏览器的JS在线调试工具,希望大家喜欢!Online Debugging Tools 1.PastebinPastebin是一个协作式的调试工具,帮助你在IRC,IM或者消息版上对话来分享和修改代码片段 2.JSON Formatter and ValidatorJSON格式化工具用来帮助打来调试JSON.因为JSON数据格式经常没有换行,可能非常难于阅读.这个

  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试 打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成. 我

  • 谷歌浏览器调试JavaScript小技巧

    谷歌浏览器调试JavaScript小技巧

    谷歌浏览器不仅仅可以用来上网,对于开发人员来说,它更像是一款强大的开发辅助工具. 工欲善其事必先利其器,接下来笔者给大家分享一些Chrome的使用方法. 假如读者了解如何在Chrome中添加JavaScript断点,那请继续阅读:否则,自行脑补. 假如有这样一段代码: 复制代码 代码如下: var a = 1; function test(){     var a, b, c, d, e; a = 2;     b = a - 1;     b = 9;     c = 3;     d = 4

  • 使用Chrome浏览器调试AngularJS应用的方法

    使用Chrome浏览器调试AngularJS应用的方法

    当我们构建AngularJS应用时,通过浏览器(如Chrome,Firefox和IE)的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难.下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用,使得应用可以比较容易进行测试,修改,甚至实时的修改我们的Angular应用: 1: 访问作用域 通过一行简单的JS程序访问页面中任何作用域(甚至是隔离的作用域!): > angular.element(targetNode).scope()

  • chrome浏览器如何断点调试异步加载的JS

    chrome浏览器如何断点调试异步加载的JS

    前言 在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看. 这是我们用Sources断点调试的实例图: 图中我们可以看到,在index.js中我们通过$.getScript引入test.js,看看表现如何: 我们在Network中看到test.js已经成功引入,但是它却属于XHR类请求,这样我们在Sources必然找不到它. 不出所料

  • 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript

    Javascript Debug Toolkit 是一个开源免费的eclipse插件,官方主页:http://code.google.com/p/jsdt 下图给出一个调试工具支持的浏览器对照表 工具\浏览器 Ie Firefox Safari Chrome Opera 其他 VS.net 支持 Microsoft Script Debugger 支持 Firebug 支持 venkman 支持 NebBeans 支持 支持 Aptana 支持 支持 Eclipose ATF 支持 MyEcli

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

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

    前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js脚本,后来观察了一下,脚本是动态在页面里引入的,可能是因为这样所以不显示出来,但是如果不能断点调试,只靠打印日志真要把人累死了,效率太低,网络搜索试验了一下,有两种方式可以解决: 1.在脚本里边增加 //# sourceURL=xxxxxxxxx.js,名称自己命名,可以直接使用文件名,如下图: 然后在网页里打开包含这个js的页面,这样就在开发者工具里能够看到了,可以像普通js一样正常打断点并进行调

  • jQuery+ajax实现动态执行脚本的方法

    本文实例讲述了jQuery+ajax实现动态执行脚本的方法.分享给大家供大家参考.具体分析如下: 有时候,在页面初次加载时就取得所需的全部JavaScript也是没有必要的.具体需要取得哪个脚本,要视用户的操作而定.虽然可以在需要时动态地引人<script>标签,但注人所需代码的更优雅的方式则是通过jQueiy直接加载.js文件. 向页面中注人脚本与加载HTML片段一样简单.但在这种情况下,需要使用全局函数 $.getScript(),这个全局函数与它的同辈函数类似,接受一个URL参数以查找脚

  • vscode调试node.js的实现方法

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具:点击进入Sources标签页,在页面的左侧就能看到JS代码的目录:找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source-m

  • Node.js npm命令运行node.js脚本的方法

    //通过npm运行node脚本 (控制台应用程序) cmd---cd package.json所在的目录---npm start (package.json中的scripts属性中设置start命令) cmd---npm (通过该命令可以查看npm后面能够设置的具体命令) package.json: { "scripts":{ "start": "node demo.js", // cmd环境中,npm start命令 就相当于 node dem

  • Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)

    http协议本身的原始方法不支持multipart/form-data请求,这个请求由原始方法演变而来的. multipart/form-data的基础方法是post,也就是说是由post方法来组合实现的,与post方法的不同之处:请求头,请求体. multipart/form-data的请求头必须包含一个特殊的头信息:Content-Type,且其值也必须规定为multipart/form-data,同时还需要规定一个内容分割符用于分割请求体中的多个post的内容,如文件内容和文本内容自然需要

  • flex chrome浏览器调试出现空白的解决方法

    flex 4 在 chrome中调试时,空白,原因是谷歌有个默认的flash播放器,只要将默认的播放器禁用,留下新安装的插件,就OK了,只要在浏览器地址栏中,输入:"chrome://plugins/",会看到flash player有两个文件,点击查看详细,将chrome下面的关闭就ok了.

  • node.js 动态执行脚本

    node.js最近新增了虚拟机模块,其实也不能说是新增的,只是把一些内部接口暴露出来罢了,从2.x就有了.我们可以从node / src / node.js看到这些代码: var Script = process.binding('evals').NodeScript; var runInThisContext = Script.runInThisContext; NativeModule.wrap = function(script) { return NativeModule.wrapper

  • JS脚本实现动态给标签控件添加事件的方法

    本文实例讲述了JS脚本实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • js实现动态加载脚本的方法实例汇总

    js实现动态加载脚本的方法实例汇总

    本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

  • JS动态插入脚本和插入引用外部链接脚本的方法

    在日常开发中,经常遇到 js 动态插入脚本 . 什么是 js 动态插入脚本 ? 指的是在页面加载时不存在,但将来的某一时刻通过修改该 DOM 动态添加的脚本.和操作 HTML 元素一样. js 动态插入脚本也有两种方式:插入 JavaScript 代码和插入外部文件. 一.直接插入 javascript 代码 <script type="text/javascript"> function sayHi() { alert("hi"); } </sc

随机推荐