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

JavaScript debugger 语句

开启 debugger ,代码在执行到第三行前终止。

var x = 15 * 5;

debugger;

document.getElementbyId("demo").innerHTML = x;

定义和用法

debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。

使用 debugger 语句类似于在代码中设置断点。

通常,你可以通过按下 F12 开启调试工具, 并在调试菜单中选择 "Console" 。

注意: 如果调试工具不可用,则调试语句将无法工作。

在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关键字进行调试了;进过这样的设置,我们还可以捕获到意外的错误,进行跟踪调试。

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

f12弹出debug_调试Javascript代码(浏览器F12及VS中debugger关键字)相关推荐

  1. VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置

    前言 重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了.这两天一直在试终于搞定了.这里查找的问题当然主要是VS里面调式JavaScript代码了. 第一种方式设置V ...

  2. php屏蔽弹出窗口,可以不被浏览器拦截的弹出窗口JS代码

    转载: 一个强制弹出窗口的JavaScript类:ForceWindow 一个可以不被广告拦截器拦截的弹出窗口 ForceWindow.iclass.js代码如下(使用.讲解.相关说明全部在注释中): ...

  3. IE调试网页之五:使用 F12 开发人员工具调试 JavaScript 错误 (Windows)

    使用 F12 开发人员工具,Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码. 通过内置到每个 Windows Internet Explorer 9 安装中,F12 ...

  4. vscode 调试参数_如何通过vscode运行调试javascript代码

    初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 ...

  5. CSSJS弹出层效果,兼容所有浏览器

    直接上DEMO,不过IE中会提示加载ActiveX控件! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN&q ...

  6. JS教程()js弹出小窗口(没有浏览器窗口地址栏,工具栏,菜单栏,显示栏,只有关闭和最小化按钮)

    使用js弹出小窗口(没有浏览器窗口地址栏,工具栏,菜单栏,显示栏,只有关闭和最小化按钮)代码如下:<input type="text" name="ok" ...

  7. VSCode配置调试JavaScript代码

    VSCode配置调试JavaScript代码 官网说明调试 1.创建配置 launch.json 文件 按照图示点击创建 LeetCode 是文件夹的名字,以文件夹配置 选择Node.js调试器 Le ...

  8. Webstorm 调试 JavaScript 代码

    通常前端项目的 JavaScript 代码调试是通过浏览器的开发者工具(右键菜单中点击 "检查")来完成.这种调试的方式的舒适度很差,显示页面的区域占了很大一块空间,留给调试窗口的 ...

  9. html弹出框教程,JavaScript 弹出框

    JavaScript 弹出框 在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框 警告框是最简单的弹 ...

最新文章

  1. 页面切换语言包使用session不用cookie
  2. keras从入门到放弃(四)多分类问题
  3. linux的常用操作——查看和修改文件权限
  4. Mac MongoDB未正常关闭导致重启失败
  5. html 中rem是什么单位,了解并使用CSS中的rem单位
  6. python模拟三次输入密码_python 3.0 模拟用户登录功能并实现三次错误锁定
  7. BZOJ 2339 卡农(组合数学)
  8. short转换byte
  9. aardio - 【库】libxl库,一个dll操作excel
  10. 利用空闲服务器搭建frps服务端-实现穿透代理
  11. Windows 10 D盘操作需要管理员权限
  12. Android 性能优化之网络优化
  13. 服务器操作系统windows2016,微软正式发布服务器操作系统系统Windows Server 2016
  14. what is RPC?
  15. 4.2 热储存与冷储存
  16. 编写shell脚本判断当前主机的CPU生产商
  17. 使用电源管理模块有效控制GaN功率放大器的电源开关
  18. SpringCloud 教程 (二) 服务链路追踪(Spring Cloud Sleuth)
  19. 将base64格式的字体信息解码成可用的字体文件
  20. Coursera课程答案分享

热门文章

  1. opencv调试-内存泄露
  2. 8_UART串口编程
  3. 计算机一级ps考试试题,2020年计算机一级Photoshop考试专项练习题及答案
  4. IIC 通信协议 (一)
  5. ES6 | let、const以及与var之间的区别
  6. SQL复制表数据到另一张表
  7. 如何调用 caffe 训练好的模型对输入图片进行测试
  8. 电容笔做的比较好的品牌有哪些?高性价比电容笔测评
  9. -fpic与-fPIC
  10. 如何在S4中分配新成本组件分割结构到评估范围