调试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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
如何让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
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php简单日历函数
2015/10/28 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
express的中间件cookieParser详解
2014/12/04 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python判断Abundant Number的方法
2015/06/15 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
求职信怎么写范文
2014/05/26 职场文书
党员评议个人总结
2014/10/20 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
河童之夏观后感
2015/06/11 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Python中的pprint模块
2021/11/27 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
详解Go语言中Get/Post请求测试
2022/06/01 Golang