谷歌浏览器调试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 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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
玩转虚拟域名◎+ .
2006/10/09 PHP
php在线打包程序源码
2008/07/27 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php文件上传简单实现方法
2015/01/24 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
jquery获取transform里的值实现方法
2017/12/12 jQuery
nodejs更改项目端口号的方法
2018/05/13 NodeJs
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
Python实现视频下载功能
2017/03/14 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python实现静态服务器
2019/09/05 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
python中Mako库实例用法
2020/12/31 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
老师对学生的寄语
2014/04/09 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
军事理论课感想
2015/08/11 职场文书