谷歌浏览器调试JavaScript小技巧


Posted in Javascript onDecember 29, 2014

谷歌浏览器不仅仅可以用来上网,对于开发人员来说,它更像是一款强大的开发辅助工具。

工欲善其事必先利其器,接下来笔者给大家分享一些Chrome的使用方法。

假如读者了解如何在Chrome中添加JavaScript断点,那请继续阅读;否则,自行脑补。

假如有这样一段代码:

var a = 1;
function test(){

    var a, b, c, d, e;
    a = 2;

    b = a - 1;

    b = 9;

    c = 3;

    d = 4;

    e = (a + b * c) * (a - d);
    return e;

}
test();

代码本身并不重要,重要的是形式。

假如e是我们最终需要的结果,但是发现结果不正确,于是我们在给e赋值的这一行下断点。

谷歌浏览器调试JavaScript小技巧

下断点之后,把鼠标移动到某个变量上,稍作停留,Chrome便会提示你该变量此时的值。

谷歌浏览器调试JavaScript小技巧

但无奈于表达式比较复杂,仅仅看单个变量的值,没什么作用。看起来都挺正常,计算完就不对了。

这时候,你很可能想知道(a + b c)这一部分的结果,别着急,先将表达式选中,然后将鼠标移动到选中的区域上,稍作停留。

谷歌浏览器调试JavaScript小技巧

Chrome直接告诉你答案了。更有意思的还在后边。

直接在选中的区域单击鼠标右键,会弹出一个菜单,最上边两项分别为:[Add to watch]、[Evaluate in console]。具体对应的视图参考图片。

谷歌浏览器调试JavaScript小技巧

所谓watch,可以理解为监控,有些表达式比较重要,可能需要在整个调试过程中,实时监控该表达式的值,这时就可以用watch。

举个例子,我们把断点设置在"b = 9;"这一行,然后添加watch:"a - b",值为1。如图:

谷歌浏览器调试JavaScript小技巧

点击下一步,执行"b = 9;",也就是说b的值发生了变化,此时再看看watch:"a - b"的值,为-7。

谷歌浏览器调试JavaScript小技巧

这样就达到了实时监控的效果,调试起来更加方便快捷。

接下来再看看console是怎么回事。

console当然就是控制台了,表达式可以直接在控制台中求值。

比如想知道(a + b c)的结果,直接copy到控制台上,回车,结果就出来了。

等等,好像哪里不对的样子,凭什么控制台知道a、b、c的值?

在没有断点的情况下,在控制台中执行JavaScript代码,是面向全局的。也就是说,此时在控制台中定义一个变量x,这个x的作用域是全局的。

如果在程序中断的情况下使用控制台,那么控制台的作用域面向中断处的作用域。也就是说,在哪里设置的断点(或者是代码执行到了哪里),控制台的作用域就在哪里。

就本例而言,在全局范围内定义了一个变量a,值为1;同时又在function test作用域定义了一个局部变量a,值为2。在"a = 2;"处下断点,在控制台中输入a,回车,打印出undefined。

谷歌浏览器调试JavaScript小技巧

因为此时程序在function test内部中断,程序执行到了function test中,所以控制台的作用域也在function test中,因此输入a访问的是局部变量a,而此时局部变量a并未赋值,所以结果为undefined。

这次就先分享这么多,以后遇到给力的继续分享,希望对读者有所帮助。

Javascript 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
javascript window对象属性整理
Oct 24 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 #Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 #Javascript
jQuery中element选择器用法实例
Dec 29 #Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 #Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 #Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 #Javascript
浅谈重写window对象的方法
Dec 29 #Javascript
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php的正则处理函数总结分析
2008/06/20 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
工作交流会欢迎词
2014/01/12 职场文书
邮政员工辞职信
2014/01/16 职场文书
考试没考好检讨书
2014/01/31 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
领导党性分析材料
2014/02/15 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
坎儿井导游词
2015/02/09 职场文书
车队安全员岗位职责
2015/02/15 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
政工师工作总结2015
2015/05/26 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
MySQL 全文检索的使用示例
2021/06/07 MySQL
Python中的socket网络模块介绍
2022/07/23 Python