谷歌浏览器调试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优化效率 提升性能解决方案
Sep 06 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
AngularJS 事件发布机制
Aug 28 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
合作协议书模板2014
2014/09/26 职场文书
爱护环境建议书
2015/09/14 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang