Chrome调试

 

      随着Web应用的成熟以及HTML5技术的广泛应用，Web开发已经不仅仅是DOM框架，或者DOM只占了很小的比例，随着逻辑框架的日益复杂和渲染技术的多样化，从早期的脚本模拟动画，再到后来的SVG，VML再到如今的canvas和webgl技术，JavaScript已经成为Web开发的利器，无处不在如影随形。JS可以处理CSS和DOM元素，也可以实现网络传输，也负责逻辑框架和功能实现，在HTML5中可以实现Canvas或WebGL的图形图像渲染。

       但这也带来了一个问题，JS需要处理各种细节，而目前带宽和硬件性能的提升，用户体验的要求也不断提高，如何更好的调试程序，找到性能的瓶颈和性能分析，以及对JS混淆代码的阅读，都是JS程序员需要掌握的地方，所谓工欲善其事必先利其器，如何高效调试已经是JS程序员的基本功。

       本人主要从事地图GIS行业，下面以此为背景，分享关于Chrome调试的一些经验，介绍一下Chrome浏览器调试的一些有效工具。

图1

       如图，以Nokia Here地图为例，F12快捷键打开调试界面，对于经常调试的开发人员来说，调试界面太小非常便使用，这里可以左键长摁 ，选择下面的UI方式，特别是双屏的开发人员非常的方便，这也算一个小技巧和大家推广一下。

图2

       如上是调试菜单的截图，Elements主要是HTML的DOM信息，Network主要监听网络请求，Sources主要用于源码调试，Timeline和Profiles主要是对性能，内存等的分析，也是非常好用的工具，而Console则是输出日志窗口，在此不多说。Resource主要是本地存储以及一些session，cookie信息等，我用的并不是太多，而Audits我从来没用过，搜索了一下主要是优化前端网页加载速度的，比如冗余的css等。

Elements

图3

       如图是DOM调试界面，主体是HTML要素，可以通过放大镜图片来实现UI界面的定位，同时右侧是对应的CSS风格信息，这里我们可以动态的进行修改和添删，并实时更新，方便我们对DOM元素的调试,我主要从事地图研发，所以比较关系地图Tile是image方式还是canvas或webgl渲染，通过放大镜点击，不停的删除上层的节点，直到找到我关注的要素，要么是image标签，要么是canvas，WebGL则有特有的工具来查看即可。

Network

       Network窗口是比较重要的一个，当我们调试源码等操作时，我主要是从事地图相关的，所以很关心url的格式以及传输的一些细节，所以这个是使用很频繁的一项。如下图：

图4      

        这个是我访问诺基亚HereMap 3D的一个Network界面，基础的大家应该试一下都没问题，我这里说一下我最常用也觉得很有用的几个功能。

       首先就是Filter，比如我比较关心诺基亚三维模型数据的传输，就写入n3m（Nokia 3D Model）,则只会筛选出N3M格式的内容。另外这个overview是新版本的功能，我觉得非常用价值，可以看到你的请求队列的总体情况，可以对比你的请求队列在某一时刻的具体下载，用来分析你的下载调度是否合理，比如这里同一时间下载数超过了6，Chrome中TCP最大为6，这里诺基亚用了多个数据服务器，所以增大了并发量，提高下载速度，自然用户体验也就牛逼。

       另外就是里面蓝绿色的条框，可以统计单个请求的详细情况，如下图，很简单就可以知道你的请求，等待，阻塞和下载时间的一个情况。

图5

       另外点击每一个队列，会有具体的请求和response信息，如下：

图6

       里面的信息量也很大，比如这里用到了gzip压缩，有无chunk等。这些对于优化服务端，分析优秀的网站都很有价值，相信你能学到很多别人优化性能的东西。

图7

       这里，如果鼠标放到脚本中，会显示调用该请求的队列，虽然多数都为混淆，但大致你也能了解脚本的一个逻辑，算是为调试远吗开了一个头。

       另外，在网络请求中，有时候会发生请求失败或者阻塞，原因不太容易查找，可以在chrome://net-internals/#events中搜索有问题的url，也可以分析请求的详细过程，如图，可以追踪整个请求过程的细节，进行分析。

图8

Source

       下面终于到了源码调试了，这个我就不多说了，调试快捷键，变量查看这些都是程序员的基本功。只说一点：

图9

       如上图，一般代码都是混淆的，无法调试，点击红色框框，看看，有没有奇迹，源码format了，可以调试了噻~，另外对于断点的设置，比如XHR方式，可以针对你的请求信息进行设置，也非常的使用。

Timeline&Profiles&Audits

       个人经验，这个用到的情况并不多,但如果你html5的部分比较多，对渲染性能，内存优化有较高要求，这也是一个利器。比如诺基亚是WebGL来渲染三维地球和城市模型，浏览一段后，记录的效果如下：

图10     

       可以看到渲染效率非常不错，基本都在60帧的范围内，对于JS内存的管理也不错，基本比较稳定，不会出现突变的释放和增加

图11

       这个是我自己的一个WebGL程序，可以看到内存上面问题也不大，使用的也不多，但渲染效率不高，都在30帧这个范围内，时间主要在js脚本上，说明我代码逻辑过于复杂。

       下面是Profiles

图12

       可以看到具体脚本里面的时间花费，了解你的性能瓶颈，因为公司的原因，我不太好贴我的程序的统计，通过这个可以调试你不太容易发现的性能瓶颈，比如一个简单的if判断或xml的parser，或者一块内存的申请，因为比较频繁，虽然简单也会导致性能的急剧下降，而且就只有简单几句话很难发现，所以通过这个非常便利的了解你的瓶颈。

图13

       如图，是Audits里面给出的优化建议，比如文件缓存，压缩等的建议，也是在传输，资源占用里面的一些统计，方便我们更好的认识自己代码的瓶颈和改进意见。当然再好的工具也是要有人来分析，才能发挥其价值。

总结

       Chrome的浏览器调试功能很强大，体现了Google的工程师文化，我面试经常会问两个问题：你用什么浏览器和搜索引擎，虽然不会影响面试结果，但对我来说，是我很喜欢的一个问题。另外，随着HTML5的到来，Web端渲染要求的提高，以往在C/S下的效果都可以在Web端实现，而且无插件跨平台，是以后一个巨大的发展点，对JS的要求也变高，导致JS的代码越来越复杂，越来越面向对象，而JS本身语言的限制和性能瓶颈，垃圾回收反而成了一个陷阱（毕竟各个浏览器处理方式不一样），种种类似问题以及服务端的优化，而JS已经不单单是效果的追求，对性能的优化反而要求更好也更为重要，对前端的调试技能也变高，这也是Chrome用起来得心应手的地方，希望分享后，大家有什么好的工具和建议，也都多多分享，to share is to gain~