CN101719093A - 企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法 - Google Patents

企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法 Download PDF

Info

Publication number
CN101719093A
CN101719093A CN200910200183A CN200910200183A CN101719093A CN 101719093 A CN101719093 A CN 101719093A CN 200910200183 A CN200910200183 A CN 200910200183A CN 200910200183 A CN200910200183 A CN 200910200183A CN 101719093 A CN101719093 A CN 101719093A
Authority
CN
China
Prior art keywords
debugging
debug
javascript
browser
module
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN200910200183A
Other languages
English (en)
Other versions
CN101719093B (zh
Inventor
曹宗伟
焦烈焱
马捷
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
PRIMETON INFORMATION TECHNOLOGY CO., LTD.
Original Assignee
SHANGHAI PRIMETON INFORMATION TECHNOLOGY Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by SHANGHAI PRIMETON INFORMATION TECHNOLOGY Co Ltd filed Critical SHANGHAI PRIMETON INFORMATION TECHNOLOGY Co Ltd
Priority to CN2009102001830A priority Critical patent/CN101719093B/zh
Publication of CN101719093A publication Critical patent/CN101719093A/zh
Application granted granted Critical
Publication of CN101719093B publication Critical patent/CN101719093B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • Debugging And Monitoring (AREA)

Abstract

本发明涉及一种企业Web应用系统中实现跨浏览器Javascript调试的系统,包括图形化Javascript调试平台和跨浏览器Javascript调试框架,其中图形化Javascript调试平台包括调试器引擎模块、Http服务器模块、代理服务器模块、编译引擎模块、调试服务器模块和调试器UI模块,跨浏览器的Javascript调试框架包括跨浏览器支持模块、调试代码API模块、调用堆栈管理模块以及调试命令解析模块。本发明还涉及一种基于该系统实现企业Web应用系统中跨浏览器Javascript调试的方法。采用该种企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法,调试效率高,操作简单快捷方便,系统性能稳定可靠,降低了开发维护成本,增强了系统可移植性和可扩展性,适用范围较为广泛,为企业Web应用软件技术的进一步发展奠定了坚实的基础。

Description

企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法
技术领域
本发明涉及计算机软件领域,特别涉及企业Web应用系统领域,具体是指一种企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法。
背景技术
随着现代社会科学技术的发展,大型企业的计算机软件系统即企业应用系统的不断进步,已经由过去的C/S(客户端/服务器)模式转变为现在的B/S(浏览器/服务器)模式,传统的企业应用系统已经成为企业Web应用系统。Javascript语言是企业Web应用系统开发过程中一种必不可少的脚本语言,它提供了控制浏览器和在客户端与用户交互的方法,弥补了简单HTML页面的不足,增强了网页与应用程序间的交互。
Javascript可以说是Internet上最流行的脚本语言,它工作在包括IE、Firefox、Safari、Opera和Google Chrome等主流浏览器中。随着web2.0的发展,RIA(富Internet应用,Rich InternetApplication)应用层出不穷,Javascript在其中担任的角色越来越重要。另一方面,chrome等浏览器的发布,firefox和safari等浏览器不断推出新版本,都给Javascript发展带来了新的契机。
程序调试目前主要存在两种方式,一种是编译调试目标文件,即将调试所用的语句编译到目标代码中,一种是调用该程序语言的运行容器接口。C/C++语言的调试采用的是前一种方式,例如目前比较流行的调试工具GDB和微软的Visual Studio自带的Debugger,在这种方式中首先需要编译一个“debug”模式的程序并将调试语句编译到程序中,同时在调试过程中debugger深层介入程序的运行,掌握和控制运行态的一些信息并将这些信息及时返回。Java调试采用的是后一种方式,即使用Java虚拟机工具接口(Java Virtual Machine Tool Interface,JVMTI)提供的调试接口。
目前的Javascript调试工具也采用后一种方式,IE和Firefox分别提供了Javascript的调试接口,调试Javascript主要在IE和Firefox下进行。例如Firefox提供的调试接口是:jsdIDebuggerService,通过向其中注入一些调试钩子来实现调试。jsdIDebuggerService提供的调试接口主要有breakpointHook、debuggerHook、debugHook、errorHook、functionHook、interruptHook、scriptHook、throwHook、topLevelHook等。使用者只要实现这些接口并注册到jsdIDebuggerService中,即可在Firefox中调试Javascript。Firebug、venkman、aptana、netbeans以及MyEclipse等都是使用这些接口在Firefox下实现Javascript调试。
采用第二种调试方式的Javascript调试工具存在如下弊端:首先不能跨浏览器,各个浏览器提供的调试接口都不相同,基于浏览器开发出来的调试工具无法通用,实现一个整合了多个浏览器引擎的调试工具本身也相当困难。其次需要安装插件,此类调试工具都需要在浏览器上安装插件。而且浏览器版本的升级会导致调试工具无法使用。
发明内容
本发明的目的是克服了上述现有技术中的缺点,提供一种不依赖于具体浏览器和调试插件的Javascript调试支持、系统架构简单、使用维护方便快捷、工作性能稳定可靠、适用范围较为广泛的企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法。
为了实现上述的目的,本发明的企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法如下:
该企业Web应用系统中实现跨浏览器Javascript调试的系统,包括图形化Javascript调试平台和跨浏览器Javascript调试框架,其主要特点是,所述的图形化Javascript调试平台包括:
调试器引擎模块,解析Javascript和Html,为编译引擎模块和调试器用户界面模块提供Javascript源代码的调试信息,在断点配置时及编译引擎中被调用;
Http服务器模块,与浏览器、Web应用服务器以及本地文件系统进行通信;
代理服务器模块,提供访问远程Web应用服务器中URL的功能,统一URL域,支持跨域URL访问;
编译引擎模块,将调试源文件编译为带调试代码的调试目标文件;
调试服务器模块,接受来自浏览器的调试代码API的Ajax请求,解析调试代码发送的指令、调用堆栈、变量等信息,并将断点、指令等信息返回给浏览器端运行的调试代码;
调试器用户界面模块;提供与用户交互的断点管理、源文件定位、调试启动、查看变量和调试动作功能,通过调试事件和调试服务器模块交互;
所述的跨浏览器的Javascript调试框架包括:
跨浏览器支持模块,封装有跨浏览器的Javascript应用程序接口;
调试代码应用程序接口模块,提供调试函数,在浏览器中运行的Javascript代码在每一行代码执行之前,都会调用该调试函数来判断程序是否进行中断,如果遇到断点或单步执行等中断时,就向调试服务器发送同步Ajax请求,将当前的资源、行号、调用堆栈和调试数据信息发送给调试服务器;
调用堆栈管理模块,提供客户端调用堆栈管理功能,在跟进、跟出操作过程中进行堆栈判断;
调试命令解析模块,用于与调试服务器模块交互时解析调试服务器模块传回的调试指令。
该企业Web应用系统中实现跨浏览器Javascript调试的系统中的调试信息包括总行数和可以下断点的行号。
该企业Web应用系统中实现跨浏览器Javascript调试的系统中的调试动作包括跟出stepover、跟进stepinto、返回stepreturn、继续执行resume和终止terminate。
该企业Web应用系统中实现跨浏览器Javascript调试的系统中的Javascript应用程序接口包括Ajax调用接口、json格式转换和存储调用堆栈接口。
该企业Web应用系统中实现跨浏览器Javascript调试的系统中的调试指令包括跟进stepInto、跟出stepOver、返回stepReturn、继续执行resume和终止terminate。
该基于上述的系统实现企业Web应用系统中跨浏览器Javascript调试的方法,其主要特点是,所述的方法包括图形化Javascript调试平台的预处理操作、断点配置操作和调试中断操作,所述的图形化Javascript调试平台的预处理操作,包括以下步骤:
(11)所述的图形化Javascript调试平台进行初始化操作;
(12)所述的调试器用户界面模块根据预先配置的调试端口启动一个Http服务器模块,并记录调试服务器模块的地址;
(13)所述的图形化Javascript调试平台生成客户端URL;
(14)所述的图形化Javascript调试平台打开浏览器;
(15)所述的浏览器向Http服务器模块发送地址为该客户端URL的HTTP请求;
(16)所述的Http服务器模块向用户输入的URL发送HTTP请求,获得该URL上的调试源文件并保存;
(17)所述的图形化Javascript调试平台将该Http服务器模块所获得的调试源文件的代码文本显示在调试器用户界面模块中;
(18)所述的Http服务器模块调用编译引擎模块生成编译后的调试目标文件;
(19)所述的编译引擎模块将编译后的调试目标文件输出到浏览器中执行;
所述的断点配置操作,包括以下步骤:
(21)用户通过调试器用户界面模块在调试源文件中设置断点标记;
(22)所述的调试器用户界面模块向跨浏览器Javascript调试框架中的断点管理器添加Javascript断点标记;
(23)所述的调试命令解析模块每隔一系统预设的时间间隔周期性地向调试服务器模块发送异步Ajax请求来获取Javascript断点信息;
(24)所述的调试服务器模块读取该断点管理器中所有的断点信息;
(25)所述的调试服务器模块将获得的所有断点信息返回给所述的调试命令解析模块;
(26)所述的调试命令解析模块将断点信息保存到浏览器端;
所述的调试中断操作包括以下步骤:
(31)根据用户的操作,所述的调试器用户界面模块将相应的调试指令发送到所述的调试服务器模块;
(32)所述的调试服务器模块将该调试指令输出到浏览器;
(33)所述的调试命令解析模块解析收到的该调试指令并执行相应的操作;
(34)浏览器执行某一行Javascript代码之前的调试代码应用程序接口模块中的调试函数;
(35)所述的调试代码应用程序接口模块根据指令信息判断浏览器执行的当前行是否需要中断;
(36)所述的调试代码应用程序接口模块发送同步Ajax请求给所述的调试服务器模块;
(37)所述的调试服务器模块构造数据模型并向所述的调试器用户界面模块发送调试事件;
(38)所述的调试器用户界面模块向所述的调试服务器模块请求数据模型并更新调试视图;
(39)所述的调试服务器模块挂起当前的同步Ajax请求,并把当前的请求对象和当前的堆栈关联起来;
(310)所述的调试器用户界面模块接收到调试事件和调试相关的资源、行号、调用堆栈、变量等数据;
(311)所述的调试器用户界面模块根据调试资源的相对路径找到保存的调试源文件;
(312)所述的调试器用户界面模块定位到调试源文件中的中断行并显示调试数据。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的图形化Javascript调试平台进行初始化操作,包括以下步骤:
(111)根据用户的操作,所述的图形化Javascript调试平台在所述的调试器用户界面模块中创建一个新的调试实例;
(112)所述的图形化Javascript调试平台将用户输入的URL和浏览器路径信息发送到启动调试界面。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的图形化Javascript调试平台生成客户端URL,包括以下步骤:
(121)所述的图形化Javascript调试平台从所述的调试器用户界面模块中获取调试服务器端口和用户输入的URL;
(122)分别使用本地网络地址127.0.0.1和调试服务器端口替换用户输入的URL中的服务器地址和端口,调试文件的文件名保持不变。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的用户输入的URL格式为:
http://[服务器地址]:[端口]/[文件名]。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的客户端URL格式为:
http://127.0.0.1:[调试端口]/[文件名]。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的Http服务器模块调用编译引擎模块生成编译后的调试目标文件,包括以下步骤:
(131)所述的Http服务器模块传入调试源文件的URL和文本内容;
(132)所述的Http服务器模块调用编译引擎编译源文件资源;
(133)所述的编译引擎模块根据对传入资源的每一行判断是否能下断点,根据判断结果分别执行以下步骤:
(a)如果该行能下断点,则在该行前面加上调试代码;
(b)如果该行不能下断点,则前进到下一行;
(134)所述的编译引擎模块将编译完成后的代码存为调试目标文件。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的用户通过调试器用户界面模块在调试源文件中设置断点标记,包括以下步骤:
(211)所述的调试器用户界面模块传入调试源文件的URL和文本内容;
(212)用户在资源编辑器中添加Javascript断点;
(213)所述的调试器用户界面模块判断当前行是否能下断点,并根据判断结果分别执行以下步骤:
(a)如果当前行能下断点,调试器UI往断点管理器中添加一个断点并通知调试视图显示断点;
(b)如果当前行不能下断点,则用户的操作无效。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的系统预设的时间间隔为500ms。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试命令解析模块发送的异步Ajax请求数据的格式为:
[COMMAND]:[调试事件]。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试服务器模块返回给调试命令解析模块的断点信息数据的格式为:
[COMMAND]:[调试事件][断点]:[[断点1:[资源路径][行号]][断点2:[资源路径][行号]]]。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试指令包括跟进stepInto、跟出stepOver、返回stepReturn、继续执行resume和终止terminate。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试服务器模块输出到浏览器的指令格式为:
[COMMAND]:[调试指令]。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试命令解析模块解析收到的调试指令并执行相应的操作,包括以下步骤:
(321)所述的调试命令解析模块解析收到的调试指令;
(322)所述的调试命令解析模块根据调试指令来执行相应的操作,具体包括以下步骤:
(a)如果收到的指令是终止terminate,则抛出一个终止terminate异常,终止程序执行;
(b)如果收到的指令是跟进stepInto、返回stepReturn、继续执行resume或者跟出stepOver,则把当前指令状态存放起来,下一句用户的Javascript代码执行前的调试代码应用程序接口模块会根据当前指令和堆栈等信息判断是否挂起;
(c)如果不需要挂起,则继续执行用户Javascript;
(d)如果需要挂起,则进行下一个调试中断操作。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试代码应用程序接口模块根据指令信息判断浏览器执行的当前行是否需要中断,包括以下步骤:
(331)所述的调试代码应用程序接口模块获取当前的调试指令、断点信息、以及当前的调用堆栈数据;
(332)调试代码应用程序接口模块判断浏览器执行的当前行是否需要中断,并根据判断结果分别执行以下步骤:
(a)如果当前行不需要中断,则继续执行;
(b)如果当前行需要中断,则调试代码应用程序接口模块调用调试堆栈管理获得当前的堆栈以及当前的变量并传送给调试服务器模块。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试服务器模块构造数据模型并向所述的调试器用户界面模块发送调试事件,包括以下步骤:
(341)所述的调试服务器模块接收中断请求;
(342)所述的调试服务器模块根据调试代码应用程序接口模块传入的数据构造调试数据模型;
(343)所述的图形化Javascript调试平台向调试器用户界面模块发送调试事件。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试器用户界面模块定位到调试源文件中的中断行并显示调试数据,包括以下步骤:
(351)所述的调试器用户界面模块根据调试源文件路径打开调试源文件并根据当前行号定位到中断行;
(352)所述的调试器用户界面模块根据调试数据模型显示调试状态及调试数据。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试代码应用程序接口模块发送的同步Ajax请求数据格式为:
[COMMAND]:[调试事件][调用堆栈]:[调用堆栈和变量]
[资源路径]:[资源文件URL][行号]:[当前Javascript行号]。
该实现企业Web应用系统中跨浏览器Javascript调试的方法中的调试事件包括断点breakpoint、跟出stepOver、跟进stepInto、返回stepRetrun、继续执行resume、终止terminate。
采用了该发明的企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法,由于在图形化调试平台中对要进行调试的Html源文件或Javascript源文件进行了编译,将调试代码API添加到了源文件中可以设置断点的代码行前,生成了调试目标文件并在浏览器中执行,当浏览器运行到Javascript代码的断点处时,调试代码API根据图形化调试平台发送的调试指令判断执行中断,将相关调试数据以同步Ajax请求的形式发送到图形化调试平台,最后调试平台根据断点信息进行断点的展现操作,从而实现了跨浏览器的Javascript图形化集成环境调试,增强了调试的直观效果,提高了调试的效率,不仅操作简单形象,而且快捷方便,整个调试环境的运行效率较高,系统性能稳定可靠,降低了开发维护的成本;同时增强了系统可移植性和可扩展性;不仅如此,该方法还能够快速回应业务需求的变化和技术变化,能够支撑建立高度模块化而且又高度整合的软件系统,不依赖于具体浏览器和调试插件的Javascript调试支持,系统架构简单,使用维护方便快捷,工作性能稳定可靠,适用范围较为广泛,为企业Web应用软件技术的进一步发展奠定了坚实的基础。
附图说明
图1为本发明的企业Web应用系统中实现跨浏览器Javascript调试的系统的整体架构组成示意图。
图2为本发明的企业Web应用系统中实现跨浏览器Javascript调试的系统在Eclipse调试框架中的启动框架模型的类图。
图3为本发明的企业Web应用系统中实现跨浏览器Javascript调试的系统在Eclipse调试框架中的调试模块模型的类图。
图4为本发明的企业Web应用系统中实现跨浏览器Javascript调试的系统在Eclipse调试框架中的断点模型的类图。
图5为本发明的企业Web应用系统中实现跨浏览器Javascript调试的系统在Eclipse环境下Javascript Debug Toolkit(调试工具)调试界面的示意图。
图6为本发明的实现企业Web应用系统中跨浏览器Javascript调试的方法的图形化调试平台的预处理操作的流程图。
图7为本发明的实现企业Web应用系统中跨浏览器Javascript调试的方法的断点配置操作的流程图。
图8为本发明的实现企业Web应用系统中跨浏览器Javascript调试的方法的调试中断操作的流程图;
具体实施方式
为了能够更清楚地理解本发明的技术内容,特举以下实施例详细说明。
请参阅图1所示,该企业Web应用系统中实现跨浏览器Javascript调试的系统,包括图形化Javascript调试平台和跨浏览器Javascript调试框架,其中,所述的图形化Javascript调试平台包括:
(1)调试器引擎模块,解析Javascript和Html,为编译引擎模块和调试器用户界面模块提供Javascript源代码的调试信息,在断点配置时及编译引擎中被调用;其中,该调试信息包括总行数和可以下断点的行号;
(2)Http服务器模块,与浏览器、Web应用服务器以及本地文件系统进行通信;
(3)代理服务器模块,提供访问远程Web应用服务器中URL的功能,统一URL域,支持跨域URL访问;
(4)编译引擎模块,将调试源文件编译为带调试代码的调试目标文件;
(5)调试服务器模块,接受来自浏览器的调试代码API的Ajax请求,解析调试代码发送的指令、调用堆栈、变量等信息,并将断点、指令等信息返回给浏览器端运行的调试代码;
(6)调试器用户界面模块;提供与用户交互的断点管理、源文件定位、调试启动、查看变量和调试动作功能,通过调试事件和调试服务器模块交互;其中该调试动作包括跟出stepover、跟进stepinto、返回stepreturn、继续执行resume和终止terminate;
所述的跨浏览器的Javascript调试框架包括:
(1)跨浏览器支持模块,封装有跨浏览器的Javascript应用程序接口;该Javascript应用程序接口包括Ajax调用接口、json格式转换和存储调用堆栈接口;
(2)调试代码应用程序接口模块,提供调试函数,在浏览器中运行的Javascript代码在每一行代码执行之前,都会调用该调试函数来判断程序是否进行中断,如果遇到断点或单步执行等中断时,就向调试服务器发送同步Ajax请求,将当前的资源、行号、调用堆栈和调试数据信息发送给调试服务器;
(3)调用堆栈管理模块,提供客户端调用堆栈管理功能,在跟进、跟出操作过程中进行堆栈判断;
(4)调试命令解析模块,用于与调试服务器模块交互时解析调试服务器模块传回的调试指令;该调试指令包括跟进stepInto、跟出stepOver、返回stepReturn、继续执行resume和终止terminate。
在实际使用当中,企业Web应用系统中实现跨浏览器Javascript调试的系统中包括图形化Javascript调试平台和跨浏览器Javascript调试框架,其中的图形化Javascript调试平台包括调试器引擎模块、Http服务器模块、代理服务器模块、编译引擎模块、调试服务器模块和调试器用户界面(UI)模块;跨浏览器的Javascript调试框架包括跨浏览器支持模块、调试代码应用程序接口(API)模块、调用堆栈管理模块以及调试命令解析模块,具体如下:
●调试器引擎模块——主要功能是解析Javascript和Html,为编译引擎和调试器UI提供Javascript源代码的调试信息,包括总行数、可以下断点的行号等内容,在断点配置时及编译引擎中被调用。
●Http服务器模块——提供了与浏览器、Web应用服务器以及本地文件系统通信的功能,基于Http服务器的图形化Javascript调试平台提供了代理服务器、编译引擎和调试服务器三个功能模块。
●代理服务器模块——提供了访问远程Web应用服务器中URL的功能,代理服务器的主要作用是统一URL域,解决Javascript调试中的跨域问题。
●编译引擎模块——提供了将调试源文件编译为带调试代码的调试目标文件的引擎。
●调试服务器模块——接受来自浏览器的调试代码API的Ajax请求,解析调试代码发送的指令、调用堆栈、变量等信息,并将断点、指令等信息返回给浏览器端运行的调试代码。
●调试器UI模块——提供断点管理、源文件定位、调试启动、查看变量、调试动作(stepover、stepinto、stepretrun、resume、terminate)等与用户交互的功能,通过调试事件和调试服务器交互。
●跨浏览器支持模块——封装了跨浏览器的Javascript API,主要是Ajax调用、json格式转换和存储调用堆栈等方面的底层API,这些API是跨浏览器的,因此Javascript调试工具可以实现跨浏览器的Javascript调试。
●调试代码API模块——提供了一个$jsd函数,在浏览器中运行的Javascript代码在每一行代码执行之前,都会调用该函数来判断程序是否进行中断;如果遇到断点或单步执行等中断时,就向调试服务器发送同步Ajax请求,将当前的资源、行号、调用堆栈、调试数据等内容发送给调试服务器。
●调用堆栈管理模块——提供了一个客户端调用堆栈管理的功能,主要在跟进、跟出等操作过程中起堆栈判断作用。
●调试命令解析模块——主要用于与调试服务器交互时解析调试服务器传回的指令,包括执行、跟进、跟出、下一步等。
调试器UI需要实现Eclipse调试框架的几个基本模块:
(1)启动框架(Launch Framework)
再请参阅图2所示,其中表示Launch Framework中的模型类图,其中:
●Launch configuration types——可用的Launch类型
●Launch configurations——Launch方式和内容的描述
●Launch manager——负责存储Launch类型,配置及Launch对象
●Launch delegates——执行Launch
●Launch objects——Launched process进程/debug targets目标的容器
●Tab groups——编辑Launch配置信息的UI界面
(2)调试模块(Debug Model)
再请参阅图3所示,其表示Debug Model的模型类图,其中:
●Debug Model Elements——被调试的程序元素
●Capabilities——对stepping、resuming、terminating的支持
●Debug Events——在执行目标或进程时发生的事件
●Views——显示调试会话信息的视图-threads、frames、variables等
●Actions——与被调试程序之间交互动作的菜单-step、resume等
●Debug Model Presentation——为debug model elements提供标签和图片
(3)断点(Breakpoint)
再请参阅图4所示,其表示断点模型的类图,断点Breakpoint是在某位置或者满足某种条件下挂起(suspend)程序的一种方式。断点模型提供Add、Remove和Change断点的通知机制,并提供跨工作台调用断点的持久化机制。其中:
●Breakpoint extension——扩展断点的扩展点
●Breakpoint——代表断点实例的模型对象
●Marker——用于持久化断点属性以及在编辑器中显示断点
●Breakpoint Manager——断点仓库,提供断点变化的事件通知
●Debug Target——安装断点的底层运行
而图5为本发明的企业Web应用系统中实现跨浏览器Javascript调试的系统在Eclipse环境下Javascript Debug Toolkit(调试工具)调试界面的示意图。
再请参阅图6至图8所示,该基于上述的系统实现企业Web应用系统中跨浏览器Javascript调试的方法,其中包括图形化Javascript调试平台的预处理操作、断点配置操作和调试中断操作,所述的图形化Javascript调试平台的预处理操作,包括以下步骤:
(11)所述的图形化Javascript调试平台进行初始化操作,包括以下步骤:
(a)根据用户的操作,所述的图形化Javascript调试平台在所述的调试器用户界面模块中创建一个新的调试实例;
(b)所述的图形化Javascript调试平台将用户输入的URL和浏览器路径信息发送到启动调试界面;该用户输入的URL格式为:
http://[服务器地址]:[端口]/[文件名];
(12)所述的调试器用户界面模块根据预先配置的调试端口启动一个Http服务器模块,并记录调试服务器模块的地址;
(13)所述的图形化Javascript调试平台生成客户端URL,包括以下步骤:
(a)所述的图形化Javascript调试平台从所述的调试器用户界面模块中获取调试服务器端口和用户输入的URL;
(b)分别使用本地网络地址127.0.0.1和调试服务器端口替换用户输入的URL中的服务器地址和端口,调试文件的文件名保持不变;
(14)所述的图形化Javascript调试平台打开浏览器;
(15)所述的浏览器向Http服务器模块发送地址为该客户端URL的HTTP请求;该客户端URL格式为:
http://127.0.0.1:[调试端口]/[文件名];
(16)所述的Http服务器模块向用户输入的URL发送HTTP请求,获得该URL上的调试源文件并保存;
(17)所述的图形化Javascript调试平台将该Http服务器模块所获得的调试源文件的代码文本显示在调试器用户界面模块中;
(18)所述的Http服务器模块调用编译引擎模块生成编译后的调试目标文件,包括以下步骤:
(a)所述的Http服务器模块传入调试源文件的URL和文本内容;
(b)所述的Http服务器模块调用编译引擎编译源文件资源;
(c)所述的编译引擎模块根据对传入资源的每一行判断是否能下断点,根据判断结果分别执行以下步骤:
(i)如果该行能下断点,则在该行前面加上调试代码;
(ii)如果该行不能下断点,则前进到下一行;
(d)所述的编译引擎模块将编译完成后的代码存为调试目标文件;
(19)所述的编译引擎模块将编译后的调试目标文件输出到浏览器中执行;
所述的断点配置操作,包括以下步骤:
(21)用户通过调试器用户界面模块在调试源文件中设置断点标记,包括以下步骤:
(a)所述的调试器用户界面模块传入调试源文件的URL和文本内容;
(b)用户在资源编辑器中添加Javascript断点;
(c)所述的调试器用户界面模块判断当前行是否能下断点,并根据判断结果分别执行以下步骤:
(i)如果当前行能下断点,调试器UI往断点管理器中添加一个断点并通知调试视图显示断点;
(ii)如果当前行不能下断点,则用户的操作无效;
(22)所述的调试器用户界面模块向跨浏览器Javascript调试框架中的断点管理器添加Javascript断点标记;
(23)所述的调试命令解析模块每隔一系统预设的时间间隔周期性地向调试服务器模块发送异步Ajax请求来获取Javascript断点信息;该系统预设的时间间隔为500ms;该调试命令解析模块发送的异步Ajax请求数据的格式为:
[COMMAND]:[调试事件];
该调试事件包括断点breakpoint、跟出stepOver、跟进stepInto、返回stepRetrun、继续执行resume、终止terminate;
(24)所述的调试服务器模块读取该断点管理器中所有的断点信息;
(25)所述的调试服务器模块将获得的所有断点信息返回给所述的调试命令解析模块;该调试服务器模块返回给调试命令解析模块的断点信息数据的格式为:
[COMMAND]:[调试事件][断点]:[[断点1:[资源路径][行号]][断点2:[资源路径][行号]]];
(26)所述的调试命令解析模块将断点信息保存到浏览器端;
所述的调试中断操作包括以下步骤:
(31)根据用户的操作,所述的调试器用户界面模块将相应的调试指令发送到所述的调试服务器模块;该调试指令包括跟进stepInto、跟出stepOver、返回stepReturn、继续执行resume和终止terminate;
(32)所述的调试服务器模块将该调试指令输出到浏览器;该调试服务器模块输出到浏览器的指令格式为:
[COMMAND]:[调试指令];
(33)所述的调试命令解析模块解析收到的该调试指令并执行相应的操作,包括以下步骤:
(a)所述的调试命令解析模块解析收到的调试指令;
(b)所述的调试命令解析模块根据调试指令来执行相应的操作,具体包括以下步骤:
(i)如果收到的指令是终止terminate,则抛出一个终止terminate异常,终止程序执行;
(ii)如果收到的指令是跟进stepInto、返回stepReturn、继续执行resume或者跟出stepOver,则把当前指令状态存放起来,下一句用户的Javascript代码执行前的调试代码应用程序接口模块会根据当前指令和堆栈等信息判断是否挂起;
(iii)如果不需要挂起,则继续执行用户Javascript;
(iv)如果需要挂起,则进行下一个调试中断操作;
(34)浏览器执行某一行Javascript代码之前的调试代码应用程序接口模块中的调试函数;
(35)所述的调试代码应用程序接口模块根据指令信息判断浏览器执行的当前行是否需要中断,包括以下步骤:
(a)所述的调试代码应用程序接口模块获取当前的调试指令、断点信息、以及当前的调用堆栈数据;
(b)调试代码应用程序接口模块判断浏览器执行的当前行是否需要中断,并根据判断结果分别执行以下步骤:
(i)如果当前行不需要中断,则继续执行;
(ii)如果当前行需要中断,则调试代码应用程序接口模块调用调试堆栈管理获得当前的堆栈以及当前的变量并传送给调试服务器模块;
(36)所述的调试代码应用程序接口模块发送同步Ajax请求给所述的调试服务器模块;
(37)所述的调试服务器模块构造数据模型并向所述的调试器用户界面模块发送调试事件,包括以下步骤:
(a)所述的调试服务器模块接收中断请求;
(b)所述的调试服务器模块根据调试代码应用程序接口模块传入的数据构造调试数据模型;
(c)所述的图形化Javascript调试平台向调试器用户界面模块发送调试事件;
(38)所述的调试器用户界面模块向所述的调试服务器模块请求数据模型并更新调试视图;
(39)所述的调试服务器模块挂起当前的同步Ajax请求,并把当前的请求对象和当前的堆栈关联起来;该同步Ajax请求数据格式为:
[COMMAND]:[调试事件][调用堆栈]:[调用堆栈和变量]
[资源路径]:[资源文件URL][行号]:[当前Javascript行号];
(310)所述的调试器用户界面模块接收到调试事件和调试相关的资源、行号、调用堆栈、变量等数据;
(311)所述的调试器用户界面模块根据调试资源的相对路径找到保存的调试源文件;
(312)所述的调试器用户界面模块定位到调试源文件中的中断行并显示调试数据,包括以下步骤:
(a)所述的调试器用户界面模块根据调试源文件路径打开调试源文件并根据当前行号定位到中断行;
(b)所述的调试器用户界面模块根据调试数据模型显示调试状态及调试数据。
在实际使用当中,该企业Web应用系统中实现跨浏览器Javascript调试的方法,包括图形化Javascript调试平台的预处理操作、断点配置操作和调试中断操作,所述的图形化Javascript调试平台的预处理操作包括以下步骤:
(1)图形化Javascript调试平台的初始化操作,包括以下步骤:
(a)根据用户的操作,图形化Javascript调试平台在调试器UI中创建一个新的调试实例;
(b)图形化Javascript调试平台将用户输入的URL和浏览器路径信息发送到启动调试界面,所述的用户输入的URL格式为:
http://[服务器地址]:[端口]/[文件名];
(2)调试器UI根据预先配置的调试端口启动一个Http服务器,并记录调试服务器地址;
(3)图形化Javascript调试平台生成客户端URL,包括以下步骤:
(a)图形化Javascript调试平台从调试器UI中获取调试服务器端口和用户输入的URL;
(b)分别使用本地网络地址127.0.0.1和调试服务器端口替换用户输入URL中的服务器地址和端口,调试文件的文件名保持不变,所述的客户端URL格式为:
http://127.0.0.1:[调试端口]/[文件名];
(4)图形化Javascript调试平台打开浏览器;
(5)浏览器向Http服务器发送地址为客户端URL的HTTP请求;
(6)Http服务器向用户输入的URL发送HTTP请求并获得该URL上的调试源文件并保存;
(7)图形化Javascript调试平台将Http服务器获得的调试源文件的代码文本显示在调试器UI中;
(8)Http服务器调用编译引擎生成编译后的调试目标文件,包括以下步骤:
(a)Http服务器传入调试源文件的URL和文本内容;
(b)Http服务器调用编译引擎编译源文件资源;
(c)编译引擎根据对传入资源的每一行判断是否能下断点,分别执行以下步骤:
(i)如果该行能下断点,则在该行前面加上调试代码;
(ii)如果该行不能下断点,则前进到下一行;
(d)编译引擎将编译完成后的代码存为调试目标文件。
(9)编译引擎将编译后的调试目标文件输出到浏览器中执行。
所述的断点配置操作包括以下步骤:
(1)用户通过调试器UI在调试源文件中设置断点标记,包括以下步骤:
(a)调试器UI传入调试源文件的URL和文本内容;
(b)用户在资源编辑器中添加Javascript断点;
(c)调试器UI判断当前行是否能下断点,分别执行以下步骤:
(i)如果当前行能下断点,调试器UI往断点管理器中添加一个断点并通知调试视图显示断点;
(ii)如果当前行不能下断点,则用户的操作无效;
(2)调试器UI向跨浏览器Javascript调试框架中的断点管理器添加Javascript断点标记;
(3)调试命令解析模块定期向调试服务器发送异步Ajax请求来获取Javascript断点信息,所述的时间间隔为500ms;
上述的调试命令解析模块发送的异步Ajax请求数据的格式为:
[COMMAND]:[调试事件];
(4)调试服务器读取断点管理器中所有的断点信息;
(5)调试服务器将获得的所有断点信息返回给调试命令解析模块,所述的断点信息数据的格式为:
[COMMAND]:[调试事件][断点]:[[断点1:[资源路径][行号]][断点2:[资源路径][行号]]];
(6)调试命令解析模块将断点信息保存到浏览器端。
所述的调试中断操作包括以下步骤:
(1)根据用户的操作,调试器UI将相应的调试指令发送到调试服务器,所述的调试指令包括跟进(stepInto)、跟出(stepOver)、返回(stepReturn)、继续执行(resume)、终止(terminate);
(2)调试服务器将调试指令输出到浏览器,所述的调试指令格式为:
[COMMAND]:[调试指令];
(3)调试命令解析模块解析收到的调试指令并执行相应的操作,包括以下步骤:
(a)调试命令解析模块解析收到的调试指令;
(b)调试命令解析模块根据指令来执行相应的操作,分别包括以下步骤:
(i)如果收到的指令是terminate,则抛出一个terminate异常,终止程序执行;
(ii)如果收到的指令是stepInto、stepReturn、resume、stepOver等则把当前指令状态存放起来,下一句用户的Javascript代码执行前的调试代码API会根据当前指令和堆栈等信息判断是否挂起;
(iii)如果不需要挂起则继续执行用户Javascript;
(iv)如果需要挂起则进行下一个调试中断操作;
(4)浏览器执行某一行Javascript代码之前的调试代码API;
(5)调试代码API根据指令信息判断浏览器执行的当前行是否需要中断,包括以下步骤:
(a)调试代码API获取当前的调试指令、断点信息、以及当前的调用堆栈数据;
(b)调试代码API判断浏览器执行的当前行是否需要中断,分别执行以下步骤:
(i)如果当前行不需要中断,则继续执行;
(ii)如果当前行需要中断,则调试代码API调用调试堆栈管理获得当前的堆栈以及当前的变量并传送给调试服务器;
(6)调试代码API发送同步Ajax请求给调试服务器,所述的同步Ajax请求数据格式为:[COMMAND]:[调试事件][调用堆栈]:[调用堆栈和变量][资源路径]:[资源文件URL][行号]:[当前Javascript行号];
(7)调试服务器构造数据模型并向调试器UI发送调试事件,所述的调试事件包括断点(breakpoint)、跟出(stepOver)、跟进(stepInto)、返回(stepRetrun)、继续执行(resume)、终止(terminate);
上述的构造数据模型并向调试器UI发送调试事件的操作包括以下步骤:
(a)调试服务器接收中断请求;
(b)调试服务器根据调试代码API传入的数据构造调试数据模型;
(c)调试平台向调试器UI发送调试事件;
(8)调试器UI向调试服务器请求数据模型并更新调试视图;
(9)调试服务器挂起当前的同步Ajax请求,并把当前的请求对象和当前的堆栈关联起来;
(10)调试器UI接收到调试事件和调试相关的资源、行号、调用堆栈、变量等数据;
(11)调试器UI根据调试资源的相对路径找到保存的调试源文件;
(12)调试器UI定位到调试源文件中的中断行并显示调试数据,包括以下步骤:
(a)调试器UI根据调试源文件路径打开调试源文件并根据当前行号定位到中断行;
(b)调试器UI根据调试数据模型显示调试状态及调试数据。
在实际应用中,本发明的跨浏览器Javascript调试的方法的具体过程如下:
1、添加断点
在Javascript调试平台的实现中,添加断点实际上就是为Javascript或Html调试源文件对应的IFile添加一个marker,并且设置了marker的属性resource.createMarker(markerType);将断点注册到断点管理器:
DebugPlugin.getDefault().getBreakpointManager().addBreakpoint(this)。
Marker中记录的信息有:IFile的路径、行号、断点属性等。
在Javascript调试平台添加断点的过程中,需要先调用调试器引擎的API判断该行是否能添加断点。调试器引擎基于mozilla的开源框架rhino引擎,提供的核心API为:IJsEngine:
public interface IJsEngine{
     //编译javascript
     public void compileJs(String url,String text);
     public void compileHtml(String url,String text);
     public boolean canBreakLine(String url,int line);
     }
具体过程如下:
(1)调试器UI判断当前文件是Javascript调试源文件还是Html调试源文件;
(2)如果是Javascript调试源文件,就调用compileJs方法,传入调试源文件的URL和文本内容;
(3)如果是Html调试源文件,就调用compileHtml方法,传入调试源文件的URL和文本内容;
(4)用户在Html或Javascript编辑器中添加Javascript断点;
(5)调试器UI调用canBreakLine方法,传入调试源文件的URL和当前的行号,判断当前行是否能下断点;
(6)如果当前行能下断点,调试器UI调用Eclipse的断点管理器BreakPointManager的addBreakPoint方法,添加一个断点;
(7)Eclipse的断点管理器BreakPointManager通知Eclipse的各个视图显示断点;
(8)如果当前行不能下断点,则用户的操作无效;
2、删除断点
删除断点实际上就是删除Javascript或Html调试源文件对应的IFile上对应的IMarker,resource.removeMarker(markerType);在断点管理器中注销断点:
DebugPlugin.getDefault().getBreakpointManager().removeBreakpoint(this)。
3、将Html或Javascript调试源文件编译为调试目标文件
(1)判断源文件是Html调试源文件还是Javascript调试源文件;
(2)如果是Javascript调试源文件则直接调用rhino引擎的(new Dim()).sourceInfo(url)方法解析Javascript。如果是Html调试源文件则先解析html文件,只留下<script>标签中的Javascript内容,再调用rhino引擎的(new Dim()).sourceInfo(url)方法解析Javascript;
(3)Rhino引擎解析Javascript后把源代码信息存在SourceInfo类中,SourceInfo类提供了breakableLines属性用于记录哪些行可以下断点;
(4)编译引擎遍历源代码的行,根据SourceInfo的breakablesLines判断该行是否能够下断点,如果能够下断点则在该行前面添加调试代码,调试代码包含当前的源文件路径、行号、当前上下文等内容,调试代码的示例为:$jsd(″test.js″,1,...);
编译引擎编译前后的Javascript代码:
调试源代码   function test(a,b){var c=a+b;return c;}
调试目标代码   $jsd(″test.js″,1,...);function test(a,b){$jsd(″test.js″,3,...);var c=a+b;$jsd(″test.js″,5,...);return c;$jsd(″test.js″,6,...);}
编译引擎编译前后的Html代码:
调试源代码   <html><head><script>test();</script></head><body></body></html>
调试目标代码   <script src=”jsdebug.js”></script><html><head><script>$jsd(″test.js″,4,...);test();</script></head><body></body></html>
4、在进行Javascript调试过程中定位Javascript断点
由于在编译引擎将Html和Javascript调试源文件编译为调试目标文件时已经将文件路径和行号添加到了每行可以下断点的Javascript代码前,因此不需要额外的操作来查找相关信息;当执行到断点时,调试代码API根据当前代码情况调用调试堆栈管理获得当前的堆栈信息,并发送同步Ajax请求给调试服务器。
调试代码API发送的数据如下:
{
″STACK″:{window:{document:{body:{tagName:”BODY”}}},a:undefined},
″COMMAND″:″BREAKPOINT″,
″RESOURCE″:″/jsdebug/jsdt-s0.5/test/test.js″,
″LINE″:2
}
5、调试中的中断判断
调试目标文件的调试代码在Javascript代码的每一行代码之前,因此在执行每一行代码前都会先调用调试代码,调试代码调用了调试代码API。调试代码API首先判断当前行是否有断点,如果有断点则执行中断操作,如果没有断点则根据当前用户的调试指令(resume、setpInto、stepOver、stepReturn、terminate)做下一步判断:
(1)如果用户的调试指令是resume,则跳出调试代码,执行用户的javascript代码;
(2)如果用户的调试指令是stepInto,则调试代码API会调用当前的调用堆栈管理的API判断当前的堆栈和上一个堆栈是否是同一个,如果是同一个堆栈,则跳出调试代码,继续执行用户的Javascript代码,如果不是同一个堆栈,则执行中断操作;
(3)如果用户的调试指令是setpOver则执行中断操作;
(4)如果用户的调试指令是setpReturn,则调试代码API会调用当前的调用堆栈管理的API判断当前的堆栈和上上一个堆栈是否是同一个,如果是同一个,则执行中断操作,否则跳出调试代码,继续执行用户的Javascript代码;
(5)如果用户的调试指令是terminate,则抛出一个terminate的异常,结束调试;
调试中断是指中断当前执行的Javascript代码行,并在调试平台的UI上显示当前调试的行,采用的是同步的Ajax请求技术来向调试服务器发送Ajax请求:
(1)调试代码API通过调用堆栈管理的API获得当前的调用堆栈和用户定义变量的信息。调用堆栈管理的API通过arguments.callee.caller获得当前的调用堆栈。调用堆栈管理通过解析arguments.callee.caller函数的源代码获得用户定义的变量,通过eval函数获得这些变量的值;
(2)调试代码API将调用堆栈、上下文变量、源文件路径、当前行号等信息组合为json格式的数据发送给调试服务器;
(3)调试服务器接收到Ajax请求,根据调试代码API传入的数据构造调试器UI所需要的数据模型,然后事件处理器向调试器UI发送调试事件。调试器UI会根据调试数据模型更新调试视图。
本发明的Web应用系统中实现跨浏览器Javascript调试的方法有以下优点:
1、跨浏览器
下表是Javascript Debug Toolkit和其他主流调试工具对浏览器的支持情况对比:
software\browser IE Firefox chrome opera safari   MobileBrowser Other
  VS.NET   √   ×   ×   ×   ×   ×   ×
  Firebug/Venkman   ×   √   ×   ×   ×   ×   ×
  Aptana   ×   √   ×   ×   ×   ×   ×
  Netbeans   √   √   ×   ×   ×   ×   ×
  MyEclipse   ×   √   ×   ×   ×   ×   ×
  Javascript DebugToolkit   √   √   √   √   √   √   √
2、无插件
目前其他调试工具都需要在浏览器中安装插件,譬如Firebug和Venkman都是firefox上的插件,NetBeans也需要在Firefox和IE上安装插件,而Javascript Debug Toolkit不需要安装浏览器插件。
3、不需要随着浏览器的版本而升级
随着浏览器版本的升级,很多工具都无法支持新的版本,譬如Firefox2升能到Firefox3版本的时候,Firebug、Aptana等工具都不能正常使用,而使用Javascript Debug Toolkit却不需要关心浏览器的版本。
采用了上述的企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法,由于在图形化调试平台中对要进行调试的Html源文件或Javascript源文件进行了编译,将调试代码API添加到了源文件中可以设置断点的代码行前,生成了调试目标文件并在浏览器中执行,当浏览器运行到Javascript代码的断点处时,调试代码API根据图形化调试平台发送的调试指令判断执行中断,将相关调试数据以同步Ajax请求的形式发送到图形化调试平台,最后调试平台根据断点信息进行断点的展现操作,从而实现了跨浏览器的Javascript图形化集成环境调试,增强了调试的直观效果,提高了调试的效率,不仅操作简单形象,而且快捷方便,整个调试环境的运行效率较高,系统性能稳定可靠,降低了开发维护的成本;同时增强了系统可移植性和可扩展性;不仅如此,该方法还能够快速回应业务需求的变化和技术变化,能够支撑建立高度模块化而且又高度整合的软件系统,不依赖于具体浏览器和调试插件的Javascript调试支持,系统架构简单,使用维护方便快捷,工作性能稳定可靠,适用范围较为广泛,为企业Web应用软件技术的进一步发展奠定了坚实的基础。
在此说明书中,本发明已参照其特定的实施例作了描述。但是,很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此,说明书和附图应被认为是说明性的而非限制性的。

Claims (23)

1.一种企业Web应用系统中实现跨浏览器Javascript调试的系统,包括图形化Javascript调试平台和跨浏览器Javascript调试框架,其特征在于,所述的图形化Javascript调试平台包括:
调试器引擎模块,解析Javascript和Html,为编译引擎模块和调试器用户界面模块提供Javascript源代码的调试信息,在断点配置时及编译引擎中被调用;
Http服务器模块,与浏览器、Web应用服务器以及本地文件系统进行通信;
代理服务器模块,提供访问远程Web应用服务器中URL的功能,统一URL域,支持跨域URL访问;
编译引擎模块,将调试源文件编译为带调试代码的调试目标文件;
调试服务器模块,接受来自浏览器的调试代码API的Ajax请求,解析调试代码发送的指令、调用堆栈、变量等信息,并将断点、指令等信息返回给浏览器端运行的调试代码;
调试器用户界面模块;提供与用户交互的断点管理、源文件定位、调试启动、查看变量和调试动作功能,通过调试事件和调试服务器模块交互;
所述的跨浏览器的Javascript调试框架包括:
跨浏览器支持模块,封装有跨浏览器的Javascript应用程序接口;
调试代码应用程序接口模块,提供调试函数,在浏览器中运行的Javascript代码在每一行代码执行之前,都会调用该调试函数来判断程序是否进行中断,如果遇到断点或单步执行等中断时,就向调试服务器发送同步Ajax请求,将当前的资源、行号、调用堆栈和调试数据信息发送给调试服务器;
调用堆栈管理模块,提供客户端调用堆栈管理功能,在跟进、跟出操作过程中进行堆栈判断;
调试命令解析模块,用于与调试服务器模块交互时解析调试服务器模块传回的调试指令。
2.根据权利要求1所述的企业Web应用系统中实现跨浏览器Javascript调试的系统,其特征在于,所述的调试信息包括总行数和可以下断点的行号。
3.根据权利要求1所述的企业Web应用系统中实现跨浏览器Javascript调试的系统,其特征在于,所述的调试动作包括跟出stepover、跟进stepinto、返回stepreturn、继续执行resume和终止terminate。
4.根据权利要求1所述的企业Web应用系统中实现跨浏览器Javascript调试的系统,其特征在于,所述的Javascript应用程序接口包括Ajax调用接口、json格式转换和存储调用堆栈接口。
5.根据权利要求1所述的企业Web应用系统中实现跨浏览器Javascript调试的系统,其特征在于,所述的调试指令包括跟进stepInto、跟出stepOver、返回stepReturn、继续执行resume和终止terminate。
6.一种基于权利要求1所述的系统实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的方法包括图形化Javascript调试平台的预处理操作、断点配置操作和调试中断操作,所述的图形化Javascript调试平台的预处理操作,包括以下步骤:
(11)所述的图形化Javascript调试平台进行初始化操作;
(12)所述的调试器用户界面模块根据预先配置的调试端口启动一个Http服务器模块,并记录调试服务器模块的地址;
(13)所述的图形化Javascript调试平台生成客户端URL;
(14)所述的图形化Javascript调试平台打开浏览器;
(15)所述的浏览器向Http服务器模块发送地址为该客户端URL的HTTP请求;
(16)所述的Http服务器模块向用户输入的URL发送HTTP请求,获得该URL上的调试源文件并保存;
(17)所述的图形化Javascript调试平台将该Http服务器模块所获得的调试源文件的代码文本显示在调试器用户界面模块中;
(18)所述的Http服务器模块调用编译引擎模块生成编译后的调试目标文件;
(19)所述的编译引擎模块将编译后的调试目标文件输出到浏览器中执行;
所述的断点配置操作,包括以下步骤:
(21)用户通过调试器用户界面模块在调试源文件中设置断点标记;
(22)所述的调试器用户界面模块向跨浏览器Javascript调试框架中的断点管理器添加Javascript断点标记;
(23)所述的调试命令解析模块每隔一系统预设的时间间隔周期性地向调试服务器模块发送异步Ajax请求来获取Javascript断点信息;
(24)所述的调试服务器模块读取该断点管理器中所有的断点信息;
(25)所述的调试服务器模块将获得的所有断点信息返回给所述的调试命令解析模块;
(26)所述的调试命令解析模块将断点信息保存到浏览器端;
所述的调试中断操作包括以下步骤:
(31)根据用户的操作,所述的调试器用户界面模块将相应的调试指令发送到所述的调试服务器模块;
(32)所述的调试服务器模块将该调试指令输出到浏览器;
(33)所述的调试命令解析模块解析收到的该调试指令并执行相应的操作;
(34)浏览器执行某一行Javascript代码之前的调试代码应用程序接口模块中的调试函数;
(35)所述的调试代码应用程序接口模块根据指令信息判断浏览器执行的当前行是否需要中断;
(36)所述的调试代码应用程序接口模块发送同步Ajax请求给所述的调试服务器模块;
(37)所述的调试服务器模块构造数据模型并向所述的调试器用户界面模块发送调试事件;
(38)所述的调试器用户界面模块向所述的调试服务器模块请求数据模型并更新调试视图;
(39)所述的调试服务器模块挂起当前的同步Ajax请求,并把当前的请求对象和当前的堆栈关联起来;
(310)所述的调试器用户界面模块接收到调试事件和调试相关的资源、行号、调用堆栈、变量等数据;
(311)所述的调试器用户界面模块根据调试资源的相对路径找到保存的调试源文件;
(312)所述的调试器用户界面模块定位到调试源文件中的中断行并显示调试数据。
7.根据权利要求6所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的图形化Javascript调试平台进行初始化操作,包括以下步骤:
(111)根据用户的操作,所述的图形化Javascript调试平台在所述的调试器用户界面模块中创建一个新的调试实例;
(112)所述的图形化Javascript调试平台将用户输入的URL和浏览器路径信息发送到启动调试界面。
8.根据权利要求7所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的图形化Javascript调试平台生成客户端URL,包括以下步骤:
(121)所述的图形化Javascript调试平台从所述的调试器用户界面模块中获取调试服务器端口和用户输入的URL;
(122)分别使用本地网络地址127.0.0.1和调试服务器端口替换用户输入的URL中的服务器地址和端口,调试文件的文件名保持不变。
9.根据权利要求8所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的用户输入的URL格式为:
http://[服务器地址]:[端口]/[文件名]。
10.根据权利要求8所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的客户端URL格式为:
http://127.0.0.1:[调试端口]/[文件名]。
11.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的Http服务器模块调用编译引擎模块生成编译后的调试目标文件,包括以下步骤:
(131)所述的Http服务器模块传入调试源文件的URL和文本内容;
(132)所述的Http服务器模块调用编译引擎编译源文件资源;
(133)所述的编译引擎模块根据对传入资源的每一行判断是否能下断点,根据判断结果分别执行以下步骤:
(a)如果该行能下断点,则在该行前面加上调试代码;
(b)如果该行不能下断点,则前进到下一行;
(134)所述的编译引擎模块将编译完成后的代码存为调试目标文件。
12.根据权利要求11所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的用户通过调试器用户界面模块在调试源文件中设置断点标记,包括以下步骤:
(211)所述的调试器用户界面模块传入调试源文件的URL和文本内容;
(212)用户在资源编辑器中添加Javascript断点;
(213)所述的调试器用户界面模块判断当前行是否能下断点,并根据判断结果分别执行以下步骤:
(a)如果当前行能下断点,调试器UI往断点管理器中添加一个断点并通知调试视图显示断点;
(b)如果当前行不能下断点,则用户的操作无效。
13.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的系统预设的时间间隔为500ms。
14.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试命令解析模块发送的异步Ajax请求数据的格式为:
[COMMAND]:[调试事件]。
15.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试服务器模块返回给调试命令解析模块的断点信息数据的格式为:
[COMMAND]:[调试事件][断点]:[[断点1:[资源路径][行号]][断点2:[资源路径][行号]]]。
16.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试指令包括跟进stepInto、跟出stepOver、返回stepReturn、继续执行resume和终止terminate。
17.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试服务器模块输出到浏览器的指令格式为:
[COMMAND]:[调试指令]。
18.根据权利要求16所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试命令解析模块解析收到的调试指令并执行相应的操作,包括以下步骤:
(321)所述的调试命令解析模块解析收到的调试指令;
(322)所述的调试命令解析模块根据调试指令来执行相应的操作,具体包括以下步骤:
(a)如果收到的指令是终止terminate,则抛出一个终止terminate异常,终止程序执行;
(b)如果收到的指令是跟进stepInto、返回stepReturn、继续执行resume或者跟出stepOver,则把当前指令状态存放起来,下一句用户的Javascript代码执行前的调试代码应用程序接口模块会根据当前指令和堆栈等信息判断是否挂起;
(c)如果不需要挂起,则继续执行用户Javascript;
(d)如果需要挂起,则进行下一个调试中断操作。
19.根据权利要求18所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试代码应用程序接口模块根据指令信息判断浏览器执行的当前行是否需要中断,包括以下步骤:
(331)所述的调试代码应用程序接口模块获取当前的调试指令、断点信息、以及当前的调用堆栈数据;
(332)调试代码应用程序接口模块判断浏览器执行的当前行是否需要中断,并根据判断结果分别执行以下步骤:
(a)如果当前行不需要中断,则继续执行;
(b)如果当前行需要中断,则调试代码应用程序接口模块调用调试堆栈管理获得当前的堆栈以及当前的变量并传送给调试服务器模块。
20.根据权利要求19所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试服务器模块构造数据模型并向所述的调试器用户界面模块发送调试事件,包括以下步骤:
(341)所述的调试服务器模块接收中断请求;
(342)所述的调试服务器模块根据调试代码应用程序接口模块传入的数据构造调试数据模型;
(343)所述的图形化Javascript调试平台向调试器用户界面模块发送调试事件。
21.根据权利要求20所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试器用户界面模块定位到调试源文件中的中断行并显示调试数据,包括以下步骤:
(351)所述的调试器用户界面模块根据调试源文件路径打开调试源文件并根据当前行号定位到中断行;
(352)所述的调试器用户界面模块根据调试数据模型显示调试状态及调试数据。
22.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试代码应用程序接口模块发送的同步Ajax请求数据格式为:
[COMMAND]:[调试事件][调用堆栈]:[调用堆栈和变量]
[资源路径]:[资源文件URL][行号]:[当前Javascript行号]。
23.根据权利要求6至10中任一项所述的实现企业Web应用系统中跨浏览器Javascript调试的方法,其特征在于,所述的调试事件包括断点breakpoint、跟出stepOver、跟进stepInto、返回stepRetrun、继续执行resume、终止terminate。
CN2009102001830A 2009-12-09 2009-12-09 企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法 Active CN101719093B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN2009102001830A CN101719093B (zh) 2009-12-09 2009-12-09 企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN2009102001830A CN101719093B (zh) 2009-12-09 2009-12-09 企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法

Publications (2)

Publication Number Publication Date
CN101719093A true CN101719093A (zh) 2010-06-02
CN101719093B CN101719093B (zh) 2011-11-23

Family

ID=42433669

Family Applications (1)

Application Number Title Priority Date Filing Date
CN2009102001830A Active CN101719093B (zh) 2009-12-09 2009-12-09 企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法

Country Status (1)

Country Link
CN (1) CN101719093B (zh)

Cited By (29)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101944061A (zh) * 2010-09-15 2011-01-12 青岛海信移动通信技术股份有限公司 一种代码调试的方法及装置
CN102662838A (zh) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 一种浏览器中Flash的调试方法及系统
CN102693122A (zh) * 2011-03-25 2012-09-26 晟鑫科技股份有限公司 桌面软件开发框架的方法
CN103324567A (zh) * 2012-03-22 2013-09-25 百度在线网络技术(北京)有限公司 一种应用引擎的调试方法和调试系统
CN103365707A (zh) * 2012-03-30 2013-10-23 国际商业机器公司 控制异步调用的返回的方法和装置
CN103530289A (zh) * 2012-07-02 2014-01-22 腾讯科技(深圳)有限公司 网页显示方法和装置
CN103678135A (zh) * 2013-12-25 2014-03-26 普元信息技术股份有限公司 大数据环境下实现跨进程与跨线程调试的系统与方法
CN104252409A (zh) * 2013-06-26 2014-12-31 阿里巴巴集团控股有限公司 一种获取WebApp执行过程的方法及系统
CN104375940A (zh) * 2014-11-28 2015-02-25 浪潮电子信息产业股份有限公司 一种对javaScript文件的调试方法
CN105159669A (zh) * 2015-08-13 2015-12-16 浪潮(北京)电子信息产业有限公司 一种有序处理多个Ajax数据源的方法与系统
CN105354126A (zh) * 2015-10-13 2016-02-24 金蝶软件(中国)有限公司 监控页面脚本文件中异常的方法和装置
CN106663171A (zh) * 2014-08-11 2017-05-10 日本电信电话株式会社 浏览器模拟器装置、构建装置、浏览器模拟方法、浏览器模拟程序、构建方法以及构建程序
CN107172180A (zh) * 2017-06-05 2017-09-15 深圳市成为信息技术有限公司 一种外设平台系统及其运行方法和使用方法
CN107678938A (zh) * 2017-08-24 2018-02-09 阿里巴巴集团控股有限公司 一种应用程序的调试方法及设备
CN107977307A (zh) * 2016-10-25 2018-05-01 腾讯科技(深圳)有限公司 一种应用的调试方法及装置
CN108073389A (zh) * 2017-12-11 2018-05-25 长沙海米网络技术有限公司 一种基于脚本语言的引擎系统
CN108182149A (zh) * 2017-12-28 2018-06-19 深圳Tcl数字技术有限公司 嵌入式浏览器调试方法、调试终端及计算机可读存储介质
CN108280027A (zh) * 2018-02-08 2018-07-13 金蝶软件(中国)有限公司 一种脚本的并发调试渲染方法及装置
CN108614704A (zh) * 2017-01-17 2018-10-02 腾讯科技(深圳)有限公司 代码编译方法及装置
CN108829591A (zh) * 2018-05-31 2018-11-16 北京理工大学 一种基于Web的协同调试系统及方法
WO2019062082A1 (zh) * 2017-09-28 2019-04-04 平安科技(深圳)有限公司 一种断点数据跟进方法、电子装置及计算机可读存储介质
CN109597955A (zh) * 2018-12-06 2019-04-09 中国电子科技集团公司第十五研究所 一种基于云平台的多浏览器数据解析服务平台
CN109669876A (zh) * 2018-12-30 2019-04-23 艾普阳科技(深圳)有限公司 一种javascript代码的调试控制方法及系统
CN109800159A (zh) * 2018-12-27 2019-05-24 百富计算机技术(深圳)有限公司 程序调试方法、程序调试装置、终端设备及存储介质
CN110795354A (zh) * 2019-10-30 2020-02-14 北京小米移动软件有限公司 信息处理方法、装置及存储介质
CN111258887A (zh) * 2020-01-09 2020-06-09 支付宝(杭州)信息技术有限公司 脚本语言应用的调试方法及其装置、终端
CN114968751A (zh) * 2021-02-24 2022-08-30 中国联合网络通信集团有限公司 一种无代码开发平台的程序调试方法和程序调试装置
CN115481021A (zh) * 2022-09-01 2022-12-16 上海弘玑信息技术有限公司 自动化流程的调试方法、电子设备及存储介质
CN117472784A (zh) * 2023-12-25 2024-01-30 图灵人工智能研究院(南京)有限公司 基于浏览器的Serverless代码在线调试方法

Cited By (42)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101944061A (zh) * 2010-09-15 2011-01-12 青岛海信移动通信技术股份有限公司 一种代码调试的方法及装置
CN102693122A (zh) * 2011-03-25 2012-09-26 晟鑫科技股份有限公司 桌面软件开发框架的方法
CN103324567B (zh) * 2012-03-22 2016-03-02 百度在线网络技术(北京)有限公司 一种应用引擎的调试方法和调试系统
CN103324567A (zh) * 2012-03-22 2013-09-25 百度在线网络技术(北京)有限公司 一种应用引擎的调试方法和调试系统
CN102662838B (zh) * 2012-03-29 2015-11-25 北京奇虎科技有限公司 一种浏览器中Flash的调试方法及系统
CN102662838A (zh) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 一种浏览器中Flash的调试方法及系统
CN103365707A (zh) * 2012-03-30 2013-10-23 国际商业机器公司 控制异步调用的返回的方法和装置
CN103530289A (zh) * 2012-07-02 2014-01-22 腾讯科技(深圳)有限公司 网页显示方法和装置
CN103530289B (zh) * 2012-07-02 2018-06-22 腾讯科技(深圳)有限公司 网页显示方法和装置
CN104252409A (zh) * 2013-06-26 2014-12-31 阿里巴巴集团控股有限公司 一种获取WebApp执行过程的方法及系统
CN103678135A (zh) * 2013-12-25 2014-03-26 普元信息技术股份有限公司 大数据环境下实现跨进程与跨线程调试的系统与方法
US10621347B2 (en) 2014-08-11 2020-04-14 Nippon Telegraph And Telephone Corporation Browser emulator device, construction device, browser emulation method, browser emulation program, construction method, and construction program
CN106663171A (zh) * 2014-08-11 2017-05-10 日本电信电话株式会社 浏览器模拟器装置、构建装置、浏览器模拟方法、浏览器模拟程序、构建方法以及构建程序
CN106663171B (zh) * 2014-08-11 2019-12-10 日本电信电话株式会社 浏览器模拟器装置、构建装置、浏览器模拟方法以及构建方法
CN104375940A (zh) * 2014-11-28 2015-02-25 浪潮电子信息产业股份有限公司 一种对javaScript文件的调试方法
CN105159669A (zh) * 2015-08-13 2015-12-16 浪潮(北京)电子信息产业有限公司 一种有序处理多个Ajax数据源的方法与系统
CN105354126B (zh) * 2015-10-13 2018-07-27 金蝶软件(中国)有限公司 监控页面脚本文件中异常的方法和装置
CN105354126A (zh) * 2015-10-13 2016-02-24 金蝶软件(中国)有限公司 监控页面脚本文件中异常的方法和装置
CN107977307A (zh) * 2016-10-25 2018-05-01 腾讯科技(深圳)有限公司 一种应用的调试方法及装置
CN107977307B (zh) * 2016-10-25 2021-02-09 腾讯科技(深圳)有限公司 一种应用的调试方法及装置
CN108614704B (zh) * 2017-01-17 2021-04-02 腾讯科技(深圳)有限公司 代码编译方法及装置
CN108614704A (zh) * 2017-01-17 2018-10-02 腾讯科技(深圳)有限公司 代码编译方法及装置
CN107172180A (zh) * 2017-06-05 2017-09-15 深圳市成为信息技术有限公司 一种外设平台系统及其运行方法和使用方法
CN107678938A (zh) * 2017-08-24 2018-02-09 阿里巴巴集团控股有限公司 一种应用程序的调试方法及设备
WO2019062082A1 (zh) * 2017-09-28 2019-04-04 平安科技(深圳)有限公司 一种断点数据跟进方法、电子装置及计算机可读存储介质
CN108073389A (zh) * 2017-12-11 2018-05-25 长沙海米网络技术有限公司 一种基于脚本语言的引擎系统
CN108073389B (zh) * 2017-12-11 2021-05-04 长沙海米网络技术有限公司 一种基于脚本语言的引擎系统
CN108182149A (zh) * 2017-12-28 2018-06-19 深圳Tcl数字技术有限公司 嵌入式浏览器调试方法、调试终端及计算机可读存储介质
CN108280027A (zh) * 2018-02-08 2018-07-13 金蝶软件(中国)有限公司 一种脚本的并发调试渲染方法及装置
CN108280027B (zh) * 2018-02-08 2021-06-01 金蝶软件(中国)有限公司 一种脚本的并发调试渲染方法及装置
CN108829591A (zh) * 2018-05-31 2018-11-16 北京理工大学 一种基于Web的协同调试系统及方法
CN109597955A (zh) * 2018-12-06 2019-04-09 中国电子科技集团公司第十五研究所 一种基于云平台的多浏览器数据解析服务平台
CN109800159A (zh) * 2018-12-27 2019-05-24 百富计算机技术(深圳)有限公司 程序调试方法、程序调试装置、终端设备及存储介质
CN109800159B (zh) * 2018-12-27 2021-02-23 百富计算机技术(深圳)有限公司 程序调试方法、程序调试装置、终端设备及存储介质
CN109669876A (zh) * 2018-12-30 2019-04-23 艾普阳科技(深圳)有限公司 一种javascript代码的调试控制方法及系统
CN109669876B (zh) * 2018-12-30 2022-03-08 艾普阳科技(深圳)有限公司 一种javascript代码的调试控制方法及系统
CN110795354A (zh) * 2019-10-30 2020-02-14 北京小米移动软件有限公司 信息处理方法、装置及存储介质
CN111258887A (zh) * 2020-01-09 2020-06-09 支付宝(杭州)信息技术有限公司 脚本语言应用的调试方法及其装置、终端
CN114968751A (zh) * 2021-02-24 2022-08-30 中国联合网络通信集团有限公司 一种无代码开发平台的程序调试方法和程序调试装置
CN115481021A (zh) * 2022-09-01 2022-12-16 上海弘玑信息技术有限公司 自动化流程的调试方法、电子设备及存储介质
CN117472784A (zh) * 2023-12-25 2024-01-30 图灵人工智能研究院(南京)有限公司 基于浏览器的Serverless代码在线调试方法
CN117472784B (zh) * 2023-12-25 2024-03-19 图灵人工智能研究院(南京)有限公司 基于浏览器的Serverless代码在线调试方法

Also Published As

Publication number Publication date
CN101719093B (zh) 2011-11-23

Similar Documents

Publication Publication Date Title
CN101719093B (zh) 企业Web应用系统中实现跨浏览器Javascript调试的系统及其方法
US9342321B2 (en) System and method for cross-platform applications on a wireless phone
CN100485636C (zh) 一种基于模型驱动进行电信级业务开发的调试方法及装置
AU2008206688B2 (en) Method and system for creating IT-oriented server-based web applications
US9003312B1 (en) Method and apparatus for updating a web-based user interface
KR20180038539A (ko) 소프트웨어 개발 키트로 데이터 추적을 구현하는 방법 및 시스템
CN101887370B (zh) 创建系统用户界面的方法及装置
CN105068815A (zh) 页面编辑器交互装置和方法
CN103678135A (zh) 大数据环境下实现跨进程与跨线程调试的系统与方法
CN104317591A (zh) 一种基于OSGi的web界面框架系统及web业务处理方法
CN104866327A (zh) 一种php开发方法及框架
CN1728700B (zh) 基于struts框架的web电信网管系统及其方法
CN103744680A (zh) 一种业务流程处理方法及装置
CN101226479A (zh) 一种实现手机菜单动态配置的方法
CN111176629A (zh) 一种应用开发的方法和装置
CN103473034B (zh) 一种动态发布Web服务的方法和装置
CN112506854A (zh) 页面模板文件的存储和页面生成方法、装置、设备及介质
CN116974620A (zh) 应用程序的生成方法、运行方法以及相应的装置
CN114217789A (zh) 功能组件拓展方法、装置、设备、存储介质及程序产品
CN113448650A (zh) 直播功能插件加载方法、装置、设备及存储介质
CN101876998A (zh) 一种实现数据编辑的方法和系统
CN105930166A (zh) 一种基于web界面弹出层的方法
US20130307854A1 (en) Method and System for Visualising a System Model
CN112068879A (zh) 基于配置化的客户端应用程序开发框架构建方法及装置
CN100464312C (zh) 构件化软件系统中实现非Java构件的调试的方法

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant
C56 Change in the name or address of the patentee

Owner name: PRIMETON INFORMATION TECHNOLOGY CO., LTD.

Free format text: FORMER NAME: PRIMETON TECHNOLOGIES LTD.

CP03 Change of name, title or address

Address after: 201203, Shanghai Zhangjiang hi tech park, Pudong New Area, No. 456 blue wave road, 4F

Patentee after: PRIMETON INFORMATION TECHNOLOGY CO., LTD.

Address before: 201203, Shanghai Zhangjiang hi tech park, No. 456 blue wave road, 4F

Patentee before: Primeton Technologies Ltd.