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


Posted in Javascript onJanuary 25, 2013

目前,常用的浏览器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等网页资源进行跟踪调试使用的。

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

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

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

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

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

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

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

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

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

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

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

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

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

F9:添加/移除 断点

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

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

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

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

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

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

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

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

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

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

使用debugger关键字进行调试

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

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

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

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

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

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

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

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

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

Javascript 相关文章推荐
JS获取当前日期和时间的简单实例
Nov 19 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 #Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 #Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 #Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 #Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 #Javascript
You might like
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP制作万年历
2015/01/07 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php实现学生管理系统
2020/03/21 PHP
实现PHP搜索加分页
2016/10/12 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
Python sys.path详细介绍
2013/10/17 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python 实现IP子网计算
2021/02/18 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
家长会邀请书
2014/01/25 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书