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

目前，常用的浏览器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关键字进行调试了；进过这样的设置，我们还可以捕获到意外的错误，进行跟踪调试。

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

赞 (0)

相关推荐

  • js中的this关键字详解

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码 代码如下: function test(){ this.x = 1; } 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 下面分四种情况,详细讨论this的用法. 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 请看下面这段代码,它的运行结果是1.

  • Javascript this关键字使用分析

    关于js中的this关键字的文章已经不少了,我看过几篇,我写这篇文章的目的是从实例中分析出this的工作原理,希望对大家有所帮助. 一.基本的: 复制代码 代码如下: function doSomething(){ alert(this.id); } alert(window.doSomething);//证明了doSomething是属于window的 doSomething();//undefined window.onload = function(){ document.getEleme

  • JavaScript 过滤关键字

    JavaScript 过滤关键字

    效果图: 话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> em { font-size: 16px; color: red; } </style> </head> <body> <p i

  • Javascript new关键字的玄机 以及其它

    Javascript new关键字的玄机 以及其它

    (接上)先看张对老手不新鲜但对菜鸟很有趣的图: What the heck is that? 简直是luan lun. new 抛开上面的图,先看看上篇文章留下的第二个问题,让我们在构造器的函数体内加点东西,看会发生什么. function A(){this.p = 1}var a = new A() 会得到如下结果: 为什么用new关键字构造出来的a,会获得p这个属性?new A()这行代码做了什么事情?根据上篇文章中Function的创建过程第4步,A这个对象会有一个Construct属性(

  • javascript 常用关键字列表集合

    Javascript关键字(Reserved Words)是指在Javascript语言中有特定含义,成为Javascript语法中一部分的那些字.Javascript关键字是不能作为变量名和函数名使用的.使用Javascript关键字作为变量名或函数名,会使Javascript在载入过程中出现编译错误. Javascript关键字列表:  break delete function return typeof  case do if switch var  catch else in this

  • 关于js里的this关键字的理解

    this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字的理解. 关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:knockout,有时候不明白为什么不直接使用this,而要把 this 作为参数传入. 接下来你谈谈我对它的理解,也作为一个笔记,

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • 用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

  • Javascript中的return作用及javascript return关键字用法详解

    javascript 中的return一直用的都比较火,关于javascript中的return作用大家了解吗,下面通过本文给大家详细介绍,具体内容如下所示: return 语句从当前函数退出,并从那个函数返回一个值. 语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值.如果省略,则该函数不返回值. 用 return 语句来终止一个函数的执行,并返回 expression 的值.如果 expression 被省略,或在函数内没有 re

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

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

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

  • 如何通过vscode运行调试javascript代码

    初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 javascript 代码,总结了两种方法,分享给大家. 方法一: 在 js 后缀文件中写 javascript 代码. 1. 环境配置: (1). 需要安装 nodejs (在Bing搜索中输入 nodejs, 找到nodejs官网,然后找到适合你电脑配置的安装包进行下载安装,最后要输入 node

  • 在vs2010中调试javascript代码方法

    在vs2010中调试javascript代码方法

    操作步骤如下: 1. javascript代码中插入:debugger,如下: <script type="text/javascript"> debugger; </script> 2.将IE浏览器中的"禁止脚本调试"这一项的勾给去掉. 然后在点击vs中的调试即可.

  • 实现在 Chrome 中执行 JavaScript 代码

    实现在 Chrome 中执行 JavaScript 代码

    目录 一.打开开发者工具 1.右键“检查” 2.快捷键F12 3.菜单进入 二.开发者工具中执行JavaScript代码 1.Console窗口执行 2.Snippet脚本 前言: 要在浏览器中执行 JavaScript 脚本,首先你的浏览器得支持.现在主流推荐 Chrome 浏览器,也可以使用基于 Chromium的 Edge 浏览器.下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码. 一.打开开发者工具 Chrome 中的开发者工具

  • JavaScript代码调试方法实例小结

    本文实例讲述了JavaScript代码调试方法.分享给大家供大家参考,具体如下: 1 把消息记录到控制台 IE8.Firefox.Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息,它有这些方法: error(message):错误性消息. info(message):信息性消息. log(message):一般性消息. warn(message):警告性消息. Opera 10.5 之前的版本,是使用 opera.postError() 方

  • 在Chrome DevTools中调试JavaScript的实现

    由浅入深说一说怎么样在 Chrome DevTools 中调试 JavaScript. 一.案发现场 为了方便理解,我写了一个小demo. 点击打开demo: 在num1中输入6: 在num2中输入9: 点击 num1+num2,按钮下方的标签显示 69,结果应为 15,这就是我们需要断点调试找出的 BUG . 二.熟悉一下 Sources 面板 DevTools 可为更改 CSS.分析页面加载性能和监控网络请求等不同的任务提供许多不同的工具. 我们就在 Sources 面板中调试 JavaSc

  • JavaScript实现浏览器网页自动滚动并点击的示例代码

    JavaScript实现浏览器网页自动滚动并点击的示例代码

    1. 打开浏览器控制台窗口 JavaScript通常是作为开发Web页面的脚本语言,本文介绍的JavaScript代码均运行在指定网站的控制台窗口.一般浏览器的开发者窗口都可以通过在当前网页界面按F12快捷键调出,然后在上面的标签栏找到Console点击就是控制台窗口,在这里可以直接执行JavaScript代码,而chrome系浏览器的控制台界面可以使用快捷键Ctrl+Shift+J直接打开 2. 实时查看鼠标坐标 首先为了获取当前的鼠标位置的x.y坐标,需要先重写一个onmousemove函数

  • 不使用浏览器运行javascript代码的方法

    有时候我们想用js写一段小程序,但是又觉得使用浏览器去运行挺麻烦的,那么现在我们来看一下如何使用java程序调用javascript程序,这样就可以不借助浏览器就可执行js代码了. 之所以有这个需求是因为这几天在做的一个项目中碰到了这样的问题,我有一个javascript脚本,但是这个项目的其他代码都是用C\C++写的,不想将js代码转成C,感觉太麻烦了,所以就想如果可以在C下面直接调用javascript代码就好了,或者在shell中有一个可以不借助浏览器就可以直接运行js代码的工具也行.现在

  • Edge浏览器开发者工具代码修改同步到Vscode中

    Edge浏览器开发者工具代码修改同步到Vscode中

    目录 使用 大家好,我是零一,你们一定一定一定遇到过这样一个情况: 假设我们在浏览器的开发者工具调试自己写的页面样式,调了半天终于调好了,于是打开你本地的代码找到对应的代码把你刚刚在浏览器调试修改的代码一个个在本地代码中再修改一遍.如下图所示: 确实怪麻烦的.你如果改的代码少一点还好说,要是改的多了,又碰上项目热更新导致页面刷新,你刚才改的所有代码都找不到记录了,得,瞎忙活! 基于这个痛点,Microsoft Edge团队提出了一个不错的点子,并且已经正在实验这个功能了,那就是 "将Edge浏览

  • iOS中使用JSPatch框架使Objective-C与JavaScript代码交互

    JSPatch是GitHub上一个开源的框架,其可以通过Objective-C的run-time机制动态的使用JavaScript调用与替换项目中的Objective-C属性与方法.其框架小巧,代码简洁,并且通过系统的JavaScriptCore框架与Objective-C进行交互,这使其在安全性和审核风险上都有很强的优势.Git源码地址:https://github.com/bang590/JSPatch. 一.从一个官方的小demo看起 通过cocoapods将JSPath集成进一个Xcod

随机推荐