谷歌浏览器调试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实现给图片加链接
Aug 15 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php遍历CSV类实例
2015/04/14 PHP
php DES加密算法实例分析
2019/09/18 PHP
js异或加解密效果代码
2008/06/25 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JavaScript 异步调用
2017/10/25 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python del()函数用法
2013/03/24 Python
python函数的5种参数详解
2017/02/24 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python交互式图形编程的实现
2019/07/25 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
10个顶级Python实用库推荐
2021/03/04 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
公司JAVA开发面试题
2015/04/02 面试题
介绍一下linux的文件系统
2012/03/20 面试题
日语系毕业求职信
2014/07/27 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
工程部部长岗位职责
2015/02/12 职场文书
大学生个人学年总结
2015/02/15 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
教你怎么用Python监控愉客行车程
2021/04/29 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang