JavaScript代码分析和调试

HTML和CSS一般都是声明型的代码，所以一般来说，代码修改和调试都比较容易。JavaScript是一种动态编写的代码，有很多的判断、循环等逻辑，因此，相比HTML和CSS来说，就更需要调试的功能。

Chrome提供的JS的调试功能十分的强大，又很简单易用。今天我们拿“全球最大的同性交友网站”Github来举例子分析。

先打开Github的首页，然后按F12打开开发者工具，看到如下：

我们看到代码面板有三个新区域：

1. 页面资源区（左侧）

这个区域有几个选项卡(Tab)，默认看到的是Page。

• Page。即当前页面，这个里面显示的是当前网页加载的各种资源及资源的来源。从上面的截图可以看到，从github.com加载了一个(index)的HTML内容；从collector.githubapp.com加载了用来收集用户行为数据的资源。表面看是加载，其实是发送了当前用户的行为数据到服务器，用户的行为数据都在URL的参数里面；从customer-stories-feed.github.com加载了一些页面的内容；从github.githubassets.com加载了页面的JS、CSS、图片、字体等文件，可以看出Github为了优化加载性能，把静态资源做了分离。
• Filesystem。用这个功能，可以把本地的JS/CSS等代码文件添加到Chrome，在Chrome的页面元素面板修改过之后，代码会被自动保存回原来的代码文件。这就使得边改代码，尤其是CSS代码就能不刷新页面实时看到修改效果，对JS来说，也可以刷新页面后看到效果，而不用在本地代码编辑器和浏览器之间频繁切换。
• Overrides。这个功能可以让你用本地的代码覆盖从服务器加载的代码，方便代码调试。通常情况下，生产环境上部署的JS/CSS代码都是经过混淆压缩过的，十分难懂，难以调试，而用这个功能让浏览器加载本地原始的代码，就可以轻松地在生产环境的页面上用本地的代码调试，可以摆脱额外用Fiddler等工具实现同样的效果了。
• Content Scripts。对程序员来说，我们一般喜欢给Chrome浏览器安装一些自己喜欢的扩展程序，这个功能能够把这些扩展程序加载的资源列出来，方便调试扩展程序的代码。
• Snippets。可以创建一些经常使用的代码片段，方便日常使用。

2. 代码区（中间）

左边资源区点击一个文件的话，这个代码区域就显示代码的内容，如果代码格式不易读的话，可以点下面的{}来对代码进行排版。如果要调试，那么可以在行号左侧点击加上断点，跟在IDE里面加断点的方式是一样的。刷新页面代码会重新执行，这时候如果有代码进入断点，那么代码就会暂停执行。

3. 调试区（右侧）

如果代码进入断点之后，左侧就能看到Watch、Call Stack、Breakpoints等小区域，可以分别看到观察的变量值、函数调用栈、及断点列表。跟后端常用IDE的用法也是一样，不再赘述。

可以看到，上面的界面覆盖了我们在本地其他常用的IDE里面常用的功能，完全可以轻松地进行代码的调试。