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~