使用强大的Chrome开发者工具——javascript篇

调试js可以说是Chrome开发者工具中最重要的功能,不过这一片通过其他站点作demo不是太好,一来我并它们的js很可能是压缩混淆过的,二来即使它们的代码没有压缩混淆,解析它们的代码也有不敬之嫌。所以这一篇,我打算写一些js片段用来做实验演示。

说起调试js,最古老的方式就是直接alert了,这种方式简单粗暴,调试完还要删除,已经不适合现代的web开发了,后来有了控制台,调试方法有了一个质的跨越,我们就从控制台讲起。

1.控制台

这个是最基本的调试功能了,无论是IE9,Firefox等,都有js控制台,只要在js代码中调用console.log等api,信息都会输出到这里。它的位置在与Elements同级的最后一个大标签(除非你的浏览器安装了可以扩充面板的插件,比如AngularJS调试工具)。在此面板下的顶部,还有一些实用工具如图:

QQ20150330-2

可以清空控制台,选择不同frame框架文档,过滤信息(字符串,正则,信息类型方式)等,非常方便人性化。读者可以自行探索,很快就能上手。

需要单独说一下的功能是,在控制台里也可以利用css“画出”酷炫的效果,可以给文字加链接,设置颜色,大小,还可以插入图片!上个人家的图吸引一下眼球:

02212412-e89814c32f944e6fac1773a76064fae8

还有人家的介绍 http://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html

2.断点调试

在html中敲上这样一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8”>
<title></title>
</head>
<body>
</body>
<script>
function test() {
var a = 1;
var b = a + 2;
console.log(b);
}
test();
</script>
</html>

然后,用Chrome打开它,再打开控制台,选择Sources标签,再左侧找到当前的html,在console.log那一行的行号上点击一下,就会出现断点了,像这样:

QQ20150330-3

 

然后,刷新一下页面,代码的执行,立即停在了刚刚打断点的那行。这时,就可以查看作用域内的各个变量,一种方法是鼠标悬停在想查看的变量上,一种方法是在右侧的Watch Expression栏添加监控。如图:

4BE9DD95-552D-4445-9F18-F867546E03DC

 

Watch Expression下面依次是Call Stack(调用堆栈),Scope Variables(本地变量),Breakpoints(断点列表),DOM Breakpoints(DOM 断点),XHR Breakpoints(XMLHttpRequest 断点列表),Event Listener Breakpoints(事件监听断点)。其中,Watch Expression,Call Stack是最常用的,尤其在查找bug的时候二者结合非常有用。另外几个,在面临一个完全陌生的站点时,想寻找一个代码切入点的时候比较有用,尤其再结合Elements面板中,选择某一节点右键->选择Break on…后面还有三个选项可供切换,分别是Subtree Modifications(此节点树有变化时),Attributes Modifications(属性变化时), Node Removal(节点删除时),当这些情况发生时,代码将自动中断在即将发生这些变化的代码上:

QQ20150330-5

 

另一种断点,是我最常用的,就是在js代码中添加debugger关键字,并单独成行。在开启开发者工具的情况下,只要代码执行到这一行,Chrome就会自动在这一行暂停执行代码,就和在行号上打断点效果一样。请看:

QQ20150330-4

 

比起行号断点,debugger的好处是,不需要去Sources中寻找代码,尤其是在行号持续在变的时候。

 

ps:这篇写的不是太详细,如果要详细,可能篇幅会翻倍,我更希望读者能自行研究,如果有问题,可留言。