谷歌浏览器调试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实现的一个日期格式化函数分享
Dec 06 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python中map()与zip()操作方法
2016/02/27 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
学python最电脑配置有要求么
2020/07/05 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
暑期实习鉴定
2013/12/16 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
学校督导评估方案
2014/06/10 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
离职报告范文
2014/11/04 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
建国大业电影观后感
2015/06/01 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技