JavaScript调试器软件架构

王婷婷，申启杰

(1.铜仁学院数学与信息工程系，中国 铜仁 554300； 2.中交第四航务工程局有限公司信息中心，中国 广州 510231)

JavaScript调试器软件架构

王婷婷1*，申启杰2

(1.铜仁学院数学与信息工程系，中国 铜仁 554300； 2.中交第四航务工程局有限公司信息中心，中国 广州 510231)

JavaScript编程变得越来越重要，一个独立运行的轻量的JavaScript调试器工具成为许多Web应用开发人员迫切需要的一种工具.采用基于C++的V8引擎作为调试器的脚本解释器,构建出包含编辑模块、结果显示模块、JavaScript模块三个模块的JavaScript调试器.其中JavaScript模块又包含JavaScript引擎、代码检查器、参数配置器、代码压缩器、代码辅助五个子模块.使用委派的信息交互方式来实现模块间的信息传递，使提出的调试器具有简便易用、突出重点、容错高的软件界面．

JavaScript编程；C#语言；V8引擎；JavaScript调试器；委派；软件界面

当前，基于Web浏览器的应用越来越受到用户的喜爱和开发商的重视，而越来越多的成熟用户对Web应用的易用性提出新的高要求，这就迫使开发商不断地改进应用．例如，使用JavaScript代码控制Web页面的展现；使用AJAX技术改善Web页面的控制等等．这些都使得作为Web应用的开发人员不得不去学习并使用JavaScript语言编写应用程序．

提供JavaScript代码调试的工具目前主要分为两类：第一类工具是与大型的IDE工具集成的调试工具，如微软的InterDev，Visual Studio. NET 2003/2005，Eclipse上的HTML编辑器插件，NetBeans上的HTML编辑器等等；第二类工具是作为浏览器的一个插件的调试工具，如FireFox浏览器上的FireBug插件[1-2]．这两类工具不同的是：第一类不能对JavaScript代码进行单步调试、设置断点等代码的跟踪功能.相同的地方就是：为了调试JavaScript代码，不得不启动应用自身，从而占用大量不必要的系统内存资源．

尽管JavaScript的编程变得越来越重要，目前还没有真正独立的JavaScript调试工具．因此，一个独立运行的轻量的调试器工具成为许多Web应用开发人员迫切需要的一种工具．它将使得Web应用的开发人员能更好地调试JavaScript代码，从而减轻开发的成本、提高开发工作的效率．

笔者采用C#语言构建了一个独立的、轻量的JavaScript代码调试工具．所谓独立性，是指该JavaScript代码调试工具无须与现在的IDE和Web浏览器结合，它是一个独立的应用；所谓轻量级，是指该JavaScript代码调试工具只占用系统很少的资源．该JavaScript代码调试工具提供如下主要功能为：(1)对JavaScript代码的单步调试；(2)设置断点；(3)取消断点；(4)跟踪指定的变量；(5)定位出错代码位置．本文主要介绍该JavaScript代码调试工具的软件架构思想．

1 软件模块

图1 JavaScript调试器的整体架构Fig.1 Overall architecture of JavaScript debugger

JavaScript调试器分为3个模块：编辑模块，结果显示模块，JavaScript模块[3-4]．整体架构如图1所示．

在JavaScript调试器中，编辑模块负责编辑功能，包括新建文档、打开文档、保存、另存为、剪切、复制、粘贴、查找、撤销、重做、跳转到指定行列、放大、缩小等基本功能．编辑模块采用窗体控制器对多个编辑窗口进行管理和控制，支持多文档的打开和编辑．

JavaScript模块是JavaScript调试器的核心，包括JavaScript引擎、代码检查器、参数配置器、代码压缩器、代码辅助5个子模块[5-7]．

JavaScript调试器的结果显示模块以列表的形式显示当前JavaScript代码的错误．结果显示模块分析代码检查器的检查结果，显示错误总数及错误明细，错误明细会细致显示出错的行号、字符位置、错误描述．

2 JavaScript模块架构

JavaScript模块是软件的核心，JavaScript模块包括JavaScript引擎、代码检查器、参数配置器、代码压缩器、代码辅助5大子模块[8-9]，如图2所示．

图2 JavaScript调试器的模块架构Fig.2 The module architecture of JavaScript debugger

2.1 JavaScript调试器的C#开发语言和V8引擎

JavaScript引擎是JavaScript代码执行的解释器[10-11]．目前，国际上开源的JavaScript引擎是Mozilla公司的Rhino和Google公司的V8[12-14]．Rhino是用纯 Java 实现的开源 JavaScript 引擎，Firefox浏览器采用了该引擎；而V8引擎则是用C++开发的开源引擎，用于Chrome浏览器上[15]．Rhino引擎和V8引擎都为客户端提供了JavaScript脚本执行能力．它们都是开源的引擎，能很方便地将JavaScript脚本嵌入到程序中．

由于本软件使用C#进行开发，所以设计者采用基于C++的V8引擎作为调试器的脚本解释器，并用C#把V8引擎封装起来，作为一个独立的运行模块.通过向CLI提供接口，使得调试器的其他部件能够通过C#函数直接调用V8引擎．封装后的V8引擎提供了C#语言到JavaScript语言的直接映射，能够通过C#语言直接对JavaScript变量赋值；能够获取运行中的JavaScript变量的值；也能够直接获得JavaScript脚本的运行结果．

2.2 JavaScript调试器的代码检查器

代码检查器是JSLint标准的封装，JSLint是JavaScript验证工具，它定义了一组比欧洲计算机制造商协会(ECMA)定义更为严格的编码约定，可以扫描JavaScript源代码来查找问题．如果JSLint发现一个问题，便会显示描述这个问题的消息，并指出错误在源代码中的大致位置．代码检查器封装了JSLint，对外开放3个接口：(1)参数配置接口，可以接受参数配置器设置的调试信息；(2)代码解释接口，用于连接JavaScript引擎，将JavaScript提交到引擎中执行；(3)结果输出接口，可以格式化输出错误信息(包括出错的行、字符、错误描述)，供结果显示模块进行显示．

2.3 JavaScript调试器的代码压缩器

代码压缩器使用了YUICompressor对JavaScript代码进行压缩处理．用户在编辑JavaScript语言时，应当做到格式清晰、注释清楚、变量含义明确．但是这样会导致JavaScript文件的体积变大，不利于网络的传输．于是很有必要对编写的代码进行代码压缩，实现去除注释、去除空格、去除换行、替换长的函数或变量名等操作，将大而松散的JavaScript文件变得小巧而紧凑．

图3 JavaScript调试器的参数配置器配置界面Fig.3 The parameters configuration screen of JavaScript debugger

2.4 JavaScript调试器的参数配置器

参数配置器主要用于配置整个JavaScript模块的参数，包括代码检查器的参数、压缩器的参数、脚本检查超时时间等．这些配置参数会以xml配置文件的形式保存在本地，当程序执行时，从xml配置文件读取配置信息，存储在程序的临时变量中，以方便程序快速调用．当使用参数配置器进行参数配置后，参数配置器一方面将配置结果存储到xml配置文件，另一方面更新临时变量的配置值，使配置能够马上生效．

参数配置器配置界面如图3所示．

2.5 JavaScript调试器的代码辅助子模块

代码辅助子模块提供JavaScript编辑窗的代码折叠、语法高亮、代码片段、代码缩进功能．代码辅助模块的功能是基于xml配置的，xml中配置了需要高亮的语法关键词、代码缩进空格数、代码片段等信息．

3 JavaScript调试器的软件架构

图4 JavaScript调试器的软件架构Fig.4 Software architecture of JavaScript debugger

3.1 JavaScript调试器的软件架构

JavaScript调试器采用了柔性可扩展的软件架构，调试器的底层，为一个软件基础平台，主要用于个模块的接口通讯，基础平台之上，则是各个核心模块，如图4所示．上层模块之间是相互独立的，只要符合模块的接口规范，可以很简易的将功能模块进行优和升级．

比如Javascript引擎模块，有常见的V8和Rhino，它们通过不同的语言进行编写，通过封装后，都可以动态部署到软件中．又比如常见的代码检查模块，有JSLint和JSHint，它们提供了不同规范程度的语法检查，Javascript调试器的这种柔性架构，能够很方便的在它们之间进行选择，也可以更具实际的需要，选择其他的一些代码检查器．

通过这种架构的设计，核心的功能都实现了可配置、可替换、可升级．当有新的Javascript标准发布，或者更好的功能模块时，能够快速实现软件升级，而不会对整个系统造成影响．

3.2 模块间信息传递

软件使用了松散耦合的设计思想，不同的模块都是独立设计的，在与其他模块进行交互的时候，不直接操作对方模块，而是使用基础平台的接口．本软件主要使用委派的信息交互方式来实现模块间的信息传递．

图5 A、B对象之间的委派Fig.5 The delegate between the object A and B

委派其实是一个容器，或称为函数指针，里面存放需要调用的接口函数，如图5所示．完全封闭的两个对象A和B．A对象中有一个接口，负责处理传递过来的消息．B对象中定义了委派(Delegate)，指向A对象中的Interface A，当B对象需要传递消息时，对委派(Delegate)进行调用(Invoke)，将消息传递到A对象，由Interface A对消息进行处理．

软件中广泛使用了委派来处理不同封闭对象的信息传递．比如代码检查后，将检查结果传递到结果显示模块，就是这样处理的．如图6所示，DocumentForm中包含了ShowDebugResultArr的定义，这个定义指向DebugResultForm对象中的ShowDebugResultAction，当语法检查完成后，检查的结果会通过委派，将语法检查结果传递到错误显示窗口(DebugResultForm)中，DebugResultForm通过函数ShowDebugResultAction来对传过来的信息进行处理和加工，并显示到错误显示窗口中．

图6 JavaScript调试器中使用的委派Fig.6 The delegate used in JavaScript debugger

4 软件界面

JavaScript调试器的软件界面具有简便易用、突出重点、容错高等特点，见图7．

图7 JavaScript调试器的软件界面Fig.7 The software interface of JavaScript debugger

5 结论

上文所述独立运行的轻量的JavaScript调试器的软件结构思想为：

第一，基于C#的V8引擎作为调试器的脚本解释器，通过C#将V8引擎封装，并向CLI开放函数接口；

第二，包含编辑模块、结果显示模块、JavaScript模块3个模块；

第三，JavaScript模块包含JavaScript引擎、代码检查器、参数配置器、代码压缩器、代码辅助5个子模块；

第四，使用委派的信息交互方式来实现模块间的信息传递；

第五，软件界面简便易用、重点突出、容错高．

[1] SURPASS L．Javascript脚本的调试工具有哪些 [DB/OL]．(2012-01-06)[2013-12-01].http://www.cnblogs.com/lidabo/archive/2012/01/06/2314739.html．

[2] 佚 名．5个优秀的Javascript 调试工具[DB/OL]．(2012-02-24)[2013-12-01].http://www.php100.com/html/webkaifa/javascript/2012/0224/9911.html．

[3] 廖立新，全秀娥．基于Flash的热传导综合实验仪的模拟软件设计[J]．吉首大学学报自然科学版，2013，34 (6):22-25．

[4] 薛 辉，邓 军，叶柏龙，等．分布式数据交换平台在电子政务中设计与实现[J]．湖南师范大学自然科学学报，2012，35(6):44-47．

[5] 谷 伟．基于网络的自适应测试系统的设计与实现[J]．湘潭大学自然科学学报，2013，35(2):98-102．

[6] 李振亭，王一博．基于云计算的网络学习生态系统模型[J]．河南师范大学学报:自然科学版，2013，41(2)：64-67．

[7] 罗江河，孙松林，肖名涛，等．基于Matlab的油菜移栽机栽植机构运动学建模与分析 [J]．湖南农业大学学报:自然科学版，2013，39(6):693-698．

[8] 武俊生．双基、改性双基数据库应用系统设计[J]．湖南师范大学自然科学学报，2013，36(2):35-39．

[9] 文雄军,刘树锟，廖曙光．智能公交系统电子站牌的研究与设计[J]．湖南师范大学自然科学学报，2012，35(5):42-46．

[10] [美]JOHN R．精通JavaScript DOM [M]．陈贤安，江疆，译．北京：人民邮电出版社，2008．

[11] 张亚飞．JavaScript开发王[M]．北京：电子工业出版社，2008．

[12] 陈争航．JavaScript编程宝典[M]．2版.北京：电子工业出版社，2008．

[13] [美]DAVID F．JavaScript权威指南[M]．5版.李强，译．北京：机械工业出版社，2007．

[14] [英]JEREMY K. JavaScript DOM编程艺术[M]．杨涛，王建桥，杨晓云，等译．北京：人民邮电出版社，2007．

[15] [美]JOHN R. NET 2.0应用程序调试[M]．陈缘，邹建峰，郑琼，译．北京：电子工业出版社，2008．

(编辑 胡文杰)

重要启事

“优先数字出版”是以纸质版期刊录用稿件为出版内容，先于纸质期刊出版日期出版的数字期刊出版方式．我刊已于2012年起与中国学术期刊(光盘版)电子杂志社签订了优先数字出版协议．凡被我刊录用的稿件一经优先数字出版，读者即可在中国知网(CNKI)全文数据库进行检索和下载．凡向本刊投稿的作者，如无特别申明，均被视为作者授权本刊编辑部在纸质期刊出版前，可以在中国学术期刊(光盘版)电子杂志社主办的“中国知网”(www.cnki.net)上优先数字出版；也被视为作者同意并授权我刊与其他电子杂志社签订的协议，并许可其在全球范围内使用该文的信息网络传播权、数字化复制权、数字化汇编权、发行权及翻译权，并不再额外支付稿酬．

本刊编辑部

The Software Architecture of JavaScript Debugger

WANGTing-ting1*,SHENQi-jie2

(1.Department of Mathematics and Information Engineering, Tongren University, Tongren 554300, China;2. IT Department, CCCC Fourth Harbor Engineering Co., Ltd., Guangzhou 510231, China)

JavaScript programming is becoming increasingly important. An independent-running lightweight JavaScript debugger has become an important tool for Web application developers. The JavaScript debugger three modules, namely the editing module, the result displaying module and the JavaScript module is constructed by the script interpreter which adopts v8 engine based on C# language as debugger. Among them, the JavaScript module includes five submodules such as JavaScript engine, code checker, parameters configuration, code compressors and code assistance. Using the delegation information-interacted means to achieve information transmission between modules, the established debuger owns a software interface with qualities as using simply and easily, highlighting the keys and high fault tolerance.

JavaScript programming; C# language; V8 engine; JavaScript debugger; delegation; software interface

2014-03-12

贵州省教育厅自然科学基金资助项目(黔教科2007097)

*

,E-mail：wttxb8@163.com

TP311

A

1000-2537(2014)06-0088-05

图1 鱼类4种色素细胞的显微观察(A：红色素细胞(E)和虹彩细胞(I)； B：黑色素细胞(M)和黄色素细胞(X))(P.25)Fig.1 Four types of pigment cells in fish (A: Erythrocyte(E) and Iridocyte(I)；B: Melanocyte(M) and Xanthophore(X))(P.25)

图2 濉溪县浅层地下水中氟质量浓度等值线图(P.9)Fig.2 Isogram of fluoride in shallow groundwater, Suixi(P.9)

图3 浅层地下水富水量及流向图(P.9)Fig.3 Diagram of water yield and flow of shallow groundwater(P.9)