通过前面的介绍,相信读者已经对Chrome扩展和应用的开发有了初步的认识,本节将介绍Chrome扩展的调试方法与代码质量。 Chrome扩展的调试方法与一般的前端调试方法相同,均可通过Chrome提供的控制台查看debug信息。 通常我们在调试前端代码时,通过右键菜单中的“审查元素”,或者通过快捷键Ctrl+Shift+J(OS X系统使用Command+Option+J)唤出控制台。对于提供Popup窗口的扩展,我们同样可以在Popup页面上通过右键菜单中的“审查元素”打开控制台对Popup页面进行调试,也可以在扩展图标上点击右键,选择“审查弹出内容”,不过背景页面需要通过其他方式进入控制台。 对于背景页面的调试,我们首先需要进入扩展程序管理页面,可以通过“工具”—“扩展程序”进入,也可以直接在地址栏中输入chrome://extensions进入,之后通过点击相应扩展的“背景页”链接唤出控制台,对后台页面进行调试。 如图1-8所示,通过控制台可以看到背景页输出的debug信息,通过debug信息得知此应用没有成功建立socket,通过后续分析得知端口被占用。 图1-8 调试背景页面 通过console.log可以输出debug信息,比如: console.log('Hello World.'); 上述代码运行后,可以看到控制台输出“Hello World.”(见图1-9)。 图1-9 输出debug信息到控制台 我们还可以通过控制台提供的命令行直接运行JavaScript语句,这样就可以在不重载扩展的情况下动态调试代码,非常方便。 由于Chrome扩展是一个本地化的程序,相比于单纯的前端页面,它所提供的功能更加复杂,所以编写高性能的JavaScript是必要的。对于大型程序,往往需要多人合作开发,所以必要时应考虑JavaScript代码编写规范,编写可维护的JavaScript。在此推荐两本经典著作:《高性能JavaScript》和《编写可维护的JavaScript》。这两本著作分别详细讲解了JavaScript运行原理及高性能代码的实现,以及JavaScript的编写规范。虽然很多讲解JavaScript的书都多多少少会讲解到JavaScript代码高性能和可维护这两个方面,有的讲解Node.js的书也会介绍,但在此还是建议读者认真去品味上述两本著作,相信会让你有不同的感悟。 另外Google提供了Closure Compiler服务,该服务不仅对代码进行压缩,而且还会出于提高性能的考虑对代码进行优化,压缩后的代码在一定程度上也有加密的作用。 Closure Compiler服务可以在线通过http://closure-compiler.appspot.com/home使用,也可以通过https://github.com/google/closure-compiler获取Closure Compiler的源码。