谷歌浏览器调试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 控制弹出窗口
Apr 10 Javascript
Js四则运算函数代码
Jul 21 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
详解vue中移动端自适应方案
May 05 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 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
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python创建字典的八种方式
2019/02/27 Python
Python 如何批量更新已安装的库
2020/05/26 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python 星号(*)的多种用途
2020/09/21 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
电子商务专业自我鉴定
2013/12/18 职场文书
青春无悔演讲稿
2014/05/08 职场文书
保护环境倡议书范文
2014/05/13 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年宣传工作总结
2015/04/08 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android