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

目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了。

在F12开发人员工具中进行调试

打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以执行相应的任务。

在HTML标签窗口中,工具栏中的按钮所执行的操作如下图:

CSS标签是用来查看样式的;控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件,左侧的下拉列表用来选择文件,右侧的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,我们在选中的文件中找到需要调试的位置,点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时,就可以进行调试了。

在这里,我们可以使用快捷键进行操作,常用的快捷键如下

F9:添加/移除 断点

F10:逐过程,即跳过该语句中的方法、表达式等

F11:逐语句调试,即单步调试,会跳入方法、表达式,进行逐语句的跟踪调试

在执行过程中,如果我们要执行即时的代码,我们就需要在右侧的窗格中输入代码,按回车即可。

如果要执行多行代码,点击运行按钮右侧的双箭头,就会打开多行模式。我就不再截图片了。

这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox FireDebug,只不过在细枝末叶上面有些不同罢了,主体的功能都是一样的。

按F12键进入开发者工具,可以查看源代码、样式和js。

点击Scripts按钮,可以打开这个调试窗口,里面包含了网页中脚本文件源码,点击左侧的按钮可以打开选择文件的侧窗口。右侧有调试的工具按钮,不过我不喜欢这些纯英文的界面,所以大部分的调试都还是在IE下进行。并且会在IE下转到VS中。

下面我就介绍如何在VS中调试我们的JS代码。

使用debugger关键字进行调试

这种方法很简单,我们只需要在进行调试的地方加入debugger关键字,然后当浏览器运行到这个关键字的时候,就会提示是否打开调试,我们选择是就可以了。这种调试可以选择调试工具,是新打开vs还是在现有的VS中调试,都可以选择,个人比较喜欢这中调试方式。

当我们运行这段程序的时候,会弹出调试提示窗口:

如果你的浏览器没有弹出这个窗口,你需要进行一下简单的设置,打开Internet选项:

将红色方框中的两项取消勾选就可以了。

设置以后就可以使用debugger关键字进行调试了;进过这样的设置,我们还可以捕获到意外的错误,进行跟踪调试。

好了,本文就介绍到这里,有不明白的地方请和我交流。调试是一个实践的过程,只有使用次数多了,才能掌握其中的方法和技巧。

时间: 2024-10-02 00:24:55

调试Javascript代码(浏览器F12及VS中debugger关键字)_javascript技巧的相关文章

通用javascript代码判断版本号是否在版本范围之间_javascript技巧

通用判断版本号是否在两者之间,也可以搭配判断是否大于某版本号,小于取反即可 PS:需确保版本规范一致,比如都是.号分割的n位版本号 var APP = {}; //判断指定版本是否在版本范围之间,需确保版本规范一致;比如 (..,..,..) APP.betweenVersion = function(curr,start,end,separator){ if(curr == start || curr == end){ return true; } var separator = separa

JavaScript检测浏览器cookie是否已经启动的方法_javascript技巧

本文实例讲述了JavaScript检测浏览器cookie是否已经启动的方法.分享给大家供大家参考.具体分析如下: JavaScript检测浏览器cookie是否已经启动,代码稍显复杂,通过写入一个测试cookie判断cookie是否已经启动 var dt = new Date(); dt.setSeconds(dt.getSeconds() + 60); document.cookie = "cookietest=1; expires=" + dt.toGMTString(); var

JavaScript代码判断点击第几个按钮_javascript技巧

最近很轻松,项目结束,趁个空余时间写了一段javascript代码实现判断点击第几个按钮的相关代码,具体代码如下所示: <html> <head> <meta charset='utf-'> </head> <body> <button>第一个</button> <button>第二个</button> <button>第三个</button> <button>第

javascript css在IE和Firefox中区别分析_javascript技巧

一.document.formName.item("itemName") 问题  问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

基于JavaScript实现移除(删除)数组中指定元素_javascript技巧

在Array对象中有给定的函数可以删除数组中指定的元素,虽然非常好用,但是总感觉看不到摸不着的比较别扭,下面就分享一个自定义的删除数组指定索引值元素的函数,希望给大家一个全新的思路. 代码实例如下: var array=[]; array[0]="一"; array[1]="二"; array[2]="三"; array[3]="四"; array[4]="五"; function remove(array

JavaScript asp.net 获取当前超链接中的文本_javascript技巧

<asp:LinkButton ID="BtnBaiyakuNo" runat="server" OnClientClick="openNo(this); return false;" TabIndex="0" /> function openNo(sender) { var linkNo = sender.toString().split("'")[1].replace(/\$/g,"

Javascript仿PHP $_GET获取URL中的参数_javascript技巧

复制代码 代码如下: /* 像PHP的 $_GET['arg'] 那样获得地址栏GET参数 */function getArgs() {    var args = {};    var query = location.search.substring(1); // Get query string    var pairs = query.split("&");                   // Break at ampersand     for(var i =

JavaScript声明变量时为什么要加var关键字_javascript技巧

在JavaScript中,var用来声明变量,但是这个语法并不严格要求,很多时修改,我们可以直接使用一个变量而不用var声明它. 复制代码 代码如下: var x = "XX"; y ="xxx"; 诸如此类.这有一个问题,比如说在代码中的某一行,我想使用的一个已声明的变量x,结果由于打字或者拼写错误,这个变量被写成y了,结果相当于"隐式"声明了一个变量y,在实际编程过程中,这种错误有时比较难以发现. 当你在当前上下文内进行这种"隐式&

已调试好的asp程序在VB中转换为组件的技巧(转)好象也有不少人问过类似的问题

程序|技巧|问题|转换 已调试好的asp程序在VB中转换为组件的技巧 2001年2月3日 在网易虚拟社区的"VB和Basic区"里有一篇<使用VB编写纯ASP程序 [转][Technology] >,其实我认为最好的方法应该这样: 原文中的定义如下: Dim m_objResponse As Response 其实对于我们写过.dll的来说,并不是很好,就是如果要将该程序拿到.asp程序中进行调试时,尤其是我们将已经调试通过的.asp程序做成.dll时,.asp程序里用的是