CN105224465A - 网页调试方法及装置 - Google Patents

网页调试方法及装置 Download PDF

Info

Publication number
CN105224465A
CN105224465A CN201510783204.1A CN201510783204A CN105224465A CN 105224465 A CN105224465 A CN 105224465A CN 201510783204 A CN201510783204 A CN 201510783204A CN 105224465 A CN105224465 A CN 105224465A
Authority
CN
China
Prior art keywords
webpage
page data
data
debugging
debugging task
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
CN201510783204.1A
Other languages
English (en)
Other versions
CN105224465B (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.)
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke 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 Beijing Jingdong Century Trading Co Ltd, Beijing Jingdong Shangke Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN201510783204.1A priority Critical patent/CN105224465B/zh
Publication of CN105224465A publication Critical patent/CN105224465A/zh
Application granted granted Critical
Publication of CN105224465B publication Critical patent/CN105224465B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Information Transfer Between Computers (AREA)
  • Debugging And Monitoring (AREA)

Abstract

本发明公开了一种网页调试方法及装置,能够跨浏览器进行网页调试。该网页调试方法包括:页面数据收集步骤,从作为调试对象的网页收集该网页的页面数据;页面数据记录步骤,将页面数据存储到数据库中;页面数据展示步骤,从数据库中读取页面数据,根据读取到的页面数据生成与浏览器种类无关的展示信息,并进行展示;调试任务生成步骤,监控展示信息,判断展示信息中的数据是否与预先设定的数据相比发生了变化,在判断为发生了变化时,生成相应的调试任务,并将调试任务存储到数据库中;和调试任务执行步骤,从数据库中读取调试任务以及页面数据,并根据调试任务来相应地修改页面数据,并将修改后的页面数据渲染到作为调试对象的网页上。

Description

网页调试方法及装置
技术领域
本发明涉及网页调试领域,具体涉及一种能够跨浏览器的网页调试方法及设备。
背景技术
随着Web应用及Web浏览便携式设备(例如,智能手机、平板电脑等)的不断普及和发展,Web应用开发任务正在迅猛增长。在Web应用开发过程中最重要的一个环节之一就是网页调试,即,针对页面数据(HTML、CSS、JavaScript)进行调试的场景,在这些场景中,需要实时地观察网页当前页面的详情情况、以及对页面局部内容修改后的实时展示情况。
在进行网页调试的时候,对于Web应用开发者来说,浏览器的兼容性是个大问题。五花八门的浏览器种类和版本(包括移动版)导致应用的展示效果有时候各不相同,需要经过在各种浏览器场景下利用所附带的开发者工具进行调试才能保证正常的呈现效果。
例如,现有的手机网页调试运行步骤包括:
手机页面内嵌JavaScript文件的步骤;
JavaScript通过浏览器开放的调试协议连接PC端浏览器的步骤;
PC端浏览器展示手机浏览器页面数据,即HTML结构、CSS样式值以及JavaScript值的步骤;
在PC端浏览器修改页面数据,即HTML结构、CSS样式值或JavaScript值的步骤;和
调试对象(例如,手机端)浏览器获得修改后的值进行渲染的步骤。
在这种现有的网页调试技术中,要利用浏览器开放的远程调试协议(调试工具)来实现调试。而这些开放的远程调试协议(调试工具)都是基于各自浏览器而开发的不同工具。因此,现有的调试技术都依存于浏览器本身附带的调试工具,Web应用开发者不得不需要熟悉各种浏览器的各种调试工具,使得网页调试任务成为Web应用开发者极为棘手及繁琐的工作。
发明内容
本发明是鉴于现有的上述技术问题而做出的,其目的在于提供一种能够跨浏览器的网页调试方法及装置。
本发明的一个方面的网页调试方法,是能够跨浏览器的网页调试方法,包括:页面数据收集步骤(S100),从作为调试对象的网页收集该网页的页面数据;页面数据记录步骤(S200),将所述页面数据存储到数据库中;页面数据展示步骤(S300),从所述数据库中读取所述页面数据,根据读取到的所述页面数据生成与浏览器种类无关的展示信息,并进行展示;调试任务生成步骤(S400),监控所述展示信息,判断所述展示信息中的数据是否与预先设定的数据相比发生了变化,在判断为发生了变化时,生成相应的调试任务,并将所述调试任务存储到所述数据库中;和调试任务执行步骤(S500),从所述数据库中读取所述调试任务以及所述页面数据,并根据所述调试任务来相应地修改所述页面数据,并将修改后的页面数据渲染到作为调试对象的所述网页上。
根据本发明的一个方面的网页调试方法,所述展示信息包括:HTML结构的Dom树、CSS样式值信息以及JavaScript值信息。
根据本发明的一个方面的网页调试方法,所述预先设定的数据是预先设定的期望显示效果的数据。
根据本发明的一个方面的网页调试方法,在所述页面数据展示步骤(S300)中,利用预先设定的页面显示程序来展示所述展示信息。
根据本发明的一个方面的网页调试方法,所述调试任务生成步骤(S400)包括:步骤(S401),遍历利用所述页面信息显示程序展示的所述展示信息中的数据进行监控;步骤(S402),逐个判断所述展示信息中的数据是否与预先设定的期望显示效果的数据相比发生了变化,在判断为发生了变化时,转移至步骤(S403),在判断为未发生变化时,跳转至步骤(S405);步骤(S403),根据所发生的变化,生成相应的调试任务;步骤(S404),将生成的上述调试任务存储到所述数据库中;和步骤(S405),判断数据是否全部遍历完毕,在未遍历完毕时,返回所述步骤(S401),遍历下一个数据,在遍历完毕时,转移至上述调试任务执行步骤(S500)。
根据本发明的一个方面的网页调试方法,所述相应的调试任务是指:使利用所述页面信息显示程序展示的所述展示信息中的数据与所述预先设定的期望显示效果的数据相符的调试任务。
根据本发明的一个方面的网页调试方法,所述页面数据收集步骤(S100)包括:步骤(S101),读取作为调试对象的网页的所述页面数据;步骤(S102),逐个收集所述页面数据;和步骤(S103),判断所述网页的所述网页数据是否全部读取完毕,在未全部读取完毕时,返回上述步骤(S101),读取下一个数据,在全部读取完毕时,将所收集到的所述页面数据传递给上述页面数据记录步骤(S200)。
根据本发明的一个方面的网页调试方法,所述页面数据记录步骤(S200)包括:步骤(S201),接收由上述页面数据收集步骤(S100)传递来的所述页面数据;步骤(S202),对接收到的所述页面数据进行解析并分类;和步骤(S203),将分类后的所述页面数据按照分类存储到所述数据库中。
根据本发明的一个方面的网页调试方法,在所述步骤(S202)中,将接收到的所述页面数据解析并分类成HTML结构信息、CSS样式值信息以及JavaScript值信息。
根据本发明的一个方面的网页调试方法,所述调试任务执行步骤(S500)包括:步骤(S501),从所述数据库读取所述调试任务以及所述页面数据;步骤(S502),对读取到的所述调试任务进行解析并分类,以便与从所述数据库读取到的已被解析并分类后的所述页面数据相对应;步骤(S503),根据解析并分类后的所述调试任务,对应地修改读取到的所述页面数据;和步骤(S504),在作为调试对象的所述网页上渲染修改后的页面数据。
根据本发明的一个方面的网页调试方法,在所述步骤(S503)中,根据解析并分类后的所述调试任务,利用网页用脚本语言来对应地修改读取到的所述页面数据。
根据本发明的一个方面的网页调试方法,所述网页用脚本语言是JavaScript。
根据本发明的一个方面的网页调试方法,将所述页面数据收集步骤(S100)和所述调试认为执行步骤(S500)集成合并成网页嵌入步骤(SA100),并将所述网页嵌入步骤(SA100)制成网页用脚本语言文件嵌入到作为调试对象的所述网页中。
根据本发明的一个方面的网页调试方法,所述网页用脚本语言文件是JavaScript文件。
根据本发明的一个方面的网页调试方法,所述调试任务生成步骤(S400)在完成所述调试任务的生成之后,向所述网页嵌入步骤(SA100)发送调试指令。
根据本发明的一个方面的网页调试方法,所述网页嵌入步骤(SA100)包括:步骤(SA101),作为所述网页用脚本语言文件而嵌入到作为调试对象的所述网页中;步骤(SA102),运行所述网页;步骤(SA103),检测所述网页是否呈现完毕,若尚未呈现完毕,则待机,若呈现完毕,则进入步骤(S104);步骤(SA104),启动所述页面数据收集步骤(S100);步骤(SA105),待机直到接收到所述调试任务生成步骤(S100)发送来的所述调试指令;步骤(SA106),检测是否接收到所述调试指令,在未接收到所述调试指令时,返回所述步骤(SA105),继续待机,在接收到所述调试指令时,进入步骤(SA107);和步骤(SA107),启动所述调试任务执行步骤(S500)。
根据本发明的一个方面的网页调试方法,所述页面数据包括:HTML结构信息、CSS样式值信息以及JavaScript值信息。
根据本发明的一个方面的网页调试方法,所述作为调试对象的所述网页是手机网页。
本发明的另一个方面的网页调试装置,是能够跨浏览器的网页调试装置,包括:页面数据收集单元,从作为调试对象的网页收集该网页的页面数据;页面数据记录单元,将所述页面数据存储到数据库中;页面数据展示单元,从所述数据库中读取所述页面数据,根据读取到的所述页面数据生成与浏览器种类无关的展示信息,并进行展示;调试任务生成单元,监控所述展示信息,判断所述展示信息中的数据是否与预先设定的数据相比发生了变化,在判断为发生了变化时,生成相应的调试任务,并将所述调试任务存储到所述数据库中;和
调试任务执行单元,从所述数据库中读取所述调试任务以及所述页面数据,并根据所述调试任务来相应地修改所述页面数据,并将修改后的页面数据渲染到作为调试对象的所述网页上。
根据本发明的另一个方面的网页调试装置,所述展示信息包括:HTML结构的Dom树、CSS样式值信息以及JavaScript值信息。
根据本发明的另一个方面的网页调试装置,所述预先设定的数据是预先设定的期望显示效果的数据。
根据本发明的另一个方面的网页调试装置,所述页面数据展示装置,利用预先设定的页面信息显示程序来展示所述展示信息。
根据本发明的另一个方面的网页调试装置,所述页面数据包括:HTML结构信息、CSS样式值信息以及JavaScript值信息。
根据本发明的另一个方面的网页调试装置,所述作为调试对象的所述网页是手机网页。
综上所述,根据本发明的能够跨浏览器的网页调试方法及装置,Web应用开发者不再依赖浏览器随带的远程调试工具来调试代码,无需熟悉各种浏览器的各种调试工具,从而将Web应用开发者由繁琐的调试任务中解放出来,极大简化了网页调试任务。
附图说明
图1是本发明的实施例1的网页调试方法的整体流程示意图。
图2是本发明的实施例1的网页调试方法的页面数据收集步骤S100的流程图。
图3是本发明的实施例1的网页调试方法的页面数据记录步骤S200的流程图。
图4是本发明的实施例1的网页调试方法的页面数据展示步骤S300的流程图。
图5是本发明的实施例1的网页调试方法的调试任务生成步骤S400的流程图。
图6是本发明的实施例1的网页调试方法的调试执行步骤S500的流程图。
图7是本发明的实施例2的网页调试方法的整体流程示意图。
图8是本发明的实施例2的网页调试方法的页面嵌入步骤SA100的流程图。
图9是对应于本发明的实施例1的网页调试方法的网页调试装置100的结构简图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白,以下结合具体实施例,并参照附图,对本发明进一步详细说明。
(实施例1)
图1是本发明的实施例1的网页调试方法的整体流程示意图。其中,以带箭头虚线示意性地表示了数据、任务等的传递情形。
如图1所示,本发明的实施例1的网页调试方法包括:页面数据收集步骤S100;页面数据记录步骤S200;页面数据展示步骤S300;调试任务生成步骤S400;和调试任务执行步骤S500。
在页面数据收集步骤S100中,从作为调试对象的网页W收集该网页W的页面数据WD,上述页面数据WD,例如,包括:网页W中的HTML结构信息、CSS样式值信息以及JavaScript值信息。然后,将收集到的页面数据WD传递至页面数据记录步骤S200,且步骤转移至页面数据记录步骤S200。
在页面数据记录步骤S200中,接收由页面数据收集步骤S100传递来的页面数据WD,并将接收到的页面数据WD存储到数据库DB中,且步骤转移至页面数据展示步骤S300。
在页面数据展示步骤S300中,从上述数据库DB中读取所存储的页面数据WD,并根据所读取的页面数据WD,例如,根据(例如,HTML结构信息、CSS样式值信息以及JavaScript值信息),生成展示信息DI,并利用预先设定的页面信息显示程序DP(例如,既可以是WEB网页,也可以是文本显示程序等)展示上述展示信息DI,且步骤转移至调试任务生成步骤S400。其中,作为上述展示信息DI,例如,包括:网页W的HTML结构的Dom树、CSS样式值信息以及JavaScript值信息,该展示信息DI是网页的数据,即是与浏览器种类无关的信息,可以使用网页程序或非网页程序展示。
在调试任务生成步骤S400中,监控利用页面信息显示程序DP所展示的展示信息DI,判断展示信息DI中的数据是否与预先设定的数据(例如,预先设定的期望显示效果的HTML结构、CSS样式值以及JavaScript值等数据)相比发生了变化,例如,HTML结构的变化、CSS样式值的变化、JavaScript值的变化,作为监控结果,当所述展示信息DI中任1个数据发生了变化时,就生成1条相应的调试任务TT,并将该调试任务TT存储到数据库DB中,监控完所有的展示信息DI后,步骤转移至调试任务执行步骤S500。其中,上述相应的调试任务TT是指:使利用页面信息显示程序DP所展示的展示信息DI中的数据与预先设定的期望显示效果的数据相符的调试任务。作为示例可举例:预先设定作为调试对象的网页W中的元素A的高度为100px,监控利用页面信息显示程序DP所展示的信息DI,判断元素A的高度是否达到100px,若没有到达,则生成调试任务TT,并将调试任务TT存储到数据库DB中。
在调试任务执行步骤S500中,从数据库DB中读取所存储的上述调试任务TT以及页面数据WD,并根据上述调试任务TT,相应地修改页面数据WD,例如,修改HTML结构、CSS样式值、JavaScript值,并在作为调试对象的网页W上渲染修改后的页面数据WD。最后,结束网页调试。
以下,针对本发明的实施例1的网页调试方法的各个步骤进行详细说明。
图2是本发明的实施例1的网页调试方法的页面数据收集步骤S100的流程图。如图2所示,在页面数据收集步骤S100中,首先,读取作为调试对象的网页W的页面数据WD(步骤S101)。接着,逐个收集页面数据WD,例如,页面的HTML结构信息、CSS样式值信息以及JavaScript值信息(步骤S102)。然后,判断是否全部读取完毕,在未全部读取完毕时,返回步骤S101,读取下一个数据,在全部读取完毕时,将所收集到的页面数据WD传递给页面数据记录步骤S200,步骤转移至页面数据记录步骤S200(步骤S103)。
图3是本发明的实施例1的网页调试方法的页面数据记录步骤S200的流程图。如图3所示,在页面数据记录步骤S200中,首先,接收由上述页面数据收集步骤S100传递来的页面数据WD(步骤S201)。接着,解析所接收到的页面数据WD,并进行分类,例如,解析并分类成HTML结构信息、CSS样式值信息以及JavaScript值信息(步骤S202)。然后,将分类后的页面数据WD按照分类存储到数据库DB中,步骤转移至页面数据展示步骤S300(步骤S203)。
图4是本发明的实施例1的网页调试方法的页面数据展示步骤S300的流程图。如图4所示,在页面数据展示步骤S300中,首先,从数据库DB中读取所存储的上述页面数据WD(步骤S301)。接着,根据上述页面数据WD生成展示信息DI(步骤S302)。其中,作为上述展示信息DI,例如,包括:HTML结构的Dom树、CSS样式值信息以及JavaScript值信息,且该展示信息DI是与浏览器种类无关的信息。然后,利用预先设定的页面信息显示程序DP(例如,既可以是WEB网页,也可以是文本显示程序等)展示上述展示信息DI,步骤转移至调试任务生成步骤S400(步骤S303)。其中,作为上述展示信息DI是网页的数据,即是与浏览器种类无关的信息,例如,包括:HTML结构的Dom树、CSS样式值信息以及JavaScript值信息,可以使用网页程序或非网页程序展示。
图5是本发明的实施例1的网页调试方法的调试任务生成步骤S400的流程图。如图5所示,在调试任务生成步骤S400中,首先,遍历利用页面信息显示程序DP所展示的展示信息DI中的数据进行监控(步骤S401)。接着,逐个判断展示信息DI中的数据是否与预先设定的数据(例如,预先设定的期望显示效果的HTML结构、CSS样式值以及JavaScript值等数据)相比发生了变化,在判断为发生了变化时,转移至步骤S403,在判断为未发生变化时,直接跳转至步骤S405(步骤S402)。在步骤S403中,根据所发生的变化,生成相应的调试任务TT,步骤转移至步骤S404。其中,上述相应的调试任务TT是指:使利用页面信息显示程序DP所展示的展示信息DI中的数据与预先设定的期望显示效果的数据相符的调试任务。在步骤S404中,将所生成的上述相应的调试任务TT存储到数据库DB中,步骤转移至步骤S405。在步骤S405中,判断是否全部遍历完毕,在未遍历完毕时,返回步骤S401,遍历下一个数据,在遍历完毕时,步骤转移至调试任务执行步骤S500。
图6是本发明的实施例1的网页调试方法的调试执行步骤S500的流程图。如图6所示,首先,从数据库DB读取调试任务TT以及页面数据WD(步骤S501)。接着,对所读取的调试任务TT进行解析并分类,以便与从数据库DB读取的已被解析并分类后的页面数据WD相对应(步骤S502)。然后,根据解析并分类后的调试任务TT,利用例如JavaScript等网页用脚本语言来对应地修改所读取的页面数据WD(步骤S503)。最后,在作为调试对象的网页W上渲染修改后的页面数据(步骤S504),结束调试。
根据上述的本发明的实施例1的网页调试方法,由于不再浏览器随带的远程调试工具来进行调试,而是将页面数据WD存储到数据库DB中,并根据数据库DB中所存储的页面数据WD来生成与浏览器种类无关的展示信息DI,且利用预先设定的页面信息显示程序DP来展示该展示信息DI,通过监控该展示信息DI中的数据与预定的所期望的显示效果的数据的比较,来生成调试任务,最后,根据调试任务来修改页面数据WD,并渲染到调试网页上,从而实现了跨浏览器的网页调试。
(实施例2)
本发明人进一步考虑到利用现有网页调试技术中通常采用的、例如本发明的上述背景技术中所述的“手机页面内嵌JavaScript文件的步骤”,来集成并简化本发明的上述实施例1的网页调试方法。
图7是本发明的实施例2的网页调试方法的整体流程示意图。在该图7中,以虚线简化地表示了与实施例1相同的部分。如图7所示,其与实施例1的不同之处在于,将实施例1的页面数据收集步骤S100和调试任务执行步骤S500统一到1个页面内嵌步骤SA100中。此外,在实施例1的调试任务生成步骤S400的最后,要发送1个调试指令来启动页面内嵌步骤SA100中的实施例1的调试任务执行步骤S500。
以下,利用图8来具体说明本发明的实施例2的网页调试方法的页面嵌入步骤SA100。
图8是本发明的实施例2的网页调试方法的页面嵌入步骤SA100的流程图。其中,简化了与实施例1相同的部分,并以虚线表示。如图8所示,在页面嵌入步骤SA100中,首先,作为1个网页用脚本语言(例如,JavaScript)文件而嵌入到作为调试对象的网页W中(步骤SA101)。接着,运行该网页W(步骤SA102),例如,在手机上运行该网页W。然后,检测该网页W是否呈现完毕,若尚未呈现完毕,则待机,若呈现完毕,则进入步骤SA104(步骤SA103)。在步骤SA104中,启动实施例1的页面数据收集步骤S100。之后,待机直到接收到实施例1的调试任务生成步骤S100发送来的调试指令(步骤SA105)。检测是否接收到调试指令,在未接收到调试指令时,返回步骤SA105继续待机,在接收到调试指令时,进入步骤SA107(步骤SA106)。在步骤SA107中,启动实施例1的调试任务执行步骤S500。
这样,根据本发明的实施例2的网页调试方法,能够以与现有网页调试技术类似的方式,将该页面内嵌步骤SS100利用例如JavaScript等网页用脚本语言作成一个模块文件,并将该模块文件内嵌入作为调试对象的页面中,从而能够将直接针对作为调试对象的页面进行操作(从页面的读取以及向页面的渲染)集成并内嵌于该页面,进一步实现了调试方法的集成及简化。
以上,针对本发明的网页调试的技术方案,以实施例1、2为例进行了详细说明。虽然在上述的实施例1、2中是通过软件流程的方式进行了说明,但就本领域技术人员而言,这些技术方案的一部分或全部均可以由硬件、软件或硬件与软件的组合来实现,这是不言而喻的。
以下,作为变形例,参照附图来分别说明对应于本发明的实施例1的网页调试方法的网页调试装置的结构。
(变形例)
图9是对应于本发明的实施例1的网页调试方法的网页调试装置100的结构简图。如图9所示,网页调试装置100包括:页面数据收集单元101;页面数据记录单元102;页面数据展示单元103;调试任务生成单元104;和调试任务执行单元105。
在页面数据收集单元101中,从作为调试对象的网页收集该网页的页面数据,上述页面数据,例如,包括:网页中的HTML结构信息、CSS样式值信息以及JavaScript值信息。然后,将收集到的页面数据传递至页面数据记录单元102。
在页面数据记录单元102中,接收由页面数据收集单元101传递来的页面数据,并将接收到的页面数据存储到数据库中。
在页面数据展示单元103中,从上述数据库中读取所存储的页面数据,并根据所读取的页面数据,例如,根据(例如,HTML结构信息、CSS样式值信息以及JavaScript值信息),生成展示信息,并利用预先设定的页面信息显示程序(例如,既可以是WEB网页,也可以是文本显示程序等)展示上述展示信息。其中,作为上述展示信息,例如,包括:网页W的HTML结构的Dom树、CSS样式值信息以及JavaScript值信息,该展示信息是网页的数据,即是与浏览器种类无关的信息,可以使用网页程序或非网页程序展示。
在调试任务生成单元104中,监控利用页面信息显示程序所展示的展示信息,判断展示信息中的数据是否与预先设定的数据(例如,预先设定的期望显示效果的HTML结构、CSS样式值以及JavaScript值等数据)相比发生了变化,例如,HTML结构的变化、CSS样式值的变化、JavaScript值的变化,作为监控结果,当所述展示信息中任1个数据发生了变化时,就生成1条相应的调试任务,并将该调试任务存储到数据库中。其中,上述相应的调试任务是指:使利用页面信息显示程序所展示的展示信息中的数据与预先设定的期望显示效果的数据相符的调试任务。
在调试任务执行步骤S500中,从数据库DB中读取所存储的上述调试任务TT以及页面数据WD,并根据上述调试任务TT,相应地修改页面数据WD,例如,修改HTML结构、CSS样式值、JavaScript值,并在作为调试对象的网页W上渲染修改后的页面数据WD,完成页面调试。
另外,虽然以上实施例仅对跨浏览器的页面调试进行说明,但本领域技术人都知道,页面调试的对象是便携式设备上的页面,其调试过程是PC连接调试数据信息库来生成调试任务,因此,被调试的网页可以是在不同的便携式设备之间使用,这些便携式设备还可以使用不同的浏览器,可见,上述所谓的“跨浏览器”,其实际意见上同时也就意味着“跨设备”。
以上所述的具体实施例,对本发明的目的、技术方案和有益效果进行了进一步详细说明,所应理解的是,以上所述仅为本发明的具体实施例而已,并不用于限制本发明,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (25)

1.一种能够跨浏览器的网页调试方法,包括:
页面数据收集步骤(S100),从作为调试对象的网页收集该网页的页面数据;
页面数据记录步骤(S200),将所述页面数据存储到数据库中;
页面数据展示步骤(S300),从所述数据库中读取所述页面数据,根据读取到的所述页面数据生成与浏览器种类无关的展示信息,并进行展示;
调试任务生成步骤(S400),监控所述展示信息,判断所述展示信息中的数据是否与预先设定的数据相比发生了变化,在判断为发生了变化时,生成相应的调试任务,并将所述调试任务存储到所述数据库中;和
调试任务执行步骤(S500),从所述数据库中读取所述调试任务以及所述页面数据,并根据所述调试任务来相应地修改所述页面数据,并将修改后的页面数据渲染到作为调试对象的所述网页上。
2.根据权利要求1所述的网页调试方法,其特征在于,
所述展示信息包括:HTML结构的Dom树、CSS样式值信息以及JavaScript值信息。
3.根据权利要求1所述的网页调试方法,其特征在于,
所述预先设定的数据是预先设定的期望显示效果的数据。
4.根据权利要求1所述的网页调试方法,其特征在于,
在所述页面数据展示步骤(S300)中,利用预先设定的页面信息显示程序来展示所述展示信息。
5.根据权利要求4所述的网页调试方法,其特征在于,
所述调试任务生成步骤(S400)包括:
步骤(S401),遍历利用所述页面信息显示程序展示的所述展示信息中的数据进行监控;
步骤(S402),逐个判断所述展示信息中的数据是否与预先设定的期望显示效果的数据相比发生了变化,在判断为发生了变化时,转移至步骤(S403),在判断为未发生变化时,跳转至步骤(S405);
步骤(S403),根据所发生的变化,生成相应的调试任务;
步骤(S404),将生成的上述调试任务存储到所述数据库中;和
步骤(S405),判断数据是否全部遍历完毕,在未遍历完毕时,返回所述步骤(S401),遍历下一个数据,在遍历完毕时,转移至上述调试任务执行步骤(S500)。
6.根据权利要求5所述的网页调试方法,其特征在于,
所述相应的调试任务是指:使利用所述页面信息显示程序展示的所述展示信息中的数据与所述预先设定的期望显示效果的数据相符的调试任务。
7.根据权利要求1所述的网页调试方法,其特征在于,
所述页面数据收集步骤(S100)包括:
步骤(S101),读取作为调试对象的网页的所述页面数据;
步骤(S102),逐个收集所述页面数据;和
步骤(S103),判断所述网页的所述网页数据是否全部读取完毕,在未全部读取完毕时,返回上述步骤(S101),读取下一个数据,在全部读取完毕时,将所收集到的所述页面数据传递给上述页面数据记录步骤(S200)。
8.根据权利要求1所述的网页调试方法,其特征在于,
所述页面数据记录步骤(S200)包括:
步骤(S201),接收由上述页面数据收集步骤(S100)传递来的所述页面数据;
步骤(S202),对接收到的所述页面数据进行解析并分类;和
步骤(S203),将分类后的所述页面数据按照分类存储到所述数据库中。
9.根据权利要求8所述的网页调试方法,其特征在于,
在所述步骤(S202)中,将接收到的所述页面数据解析并分类成HTML结构信息、CSS样式值信息以及JavaScript值信息。
10.根据权利要求8所述的网页调试方法,其特征在于,
所述调试任务执行步骤(S500)包括:
步骤(S501),从所述数据库读取所述调试任务以及所述页面数据;
步骤(S502),对读取到的所述调试任务进行解析并分类,以便与从所述数据库读取到的已被解析并分类后的所述页面数据相对应;
步骤(S503),根据解析并分类后的所述调试任务,对应地修改读取到的所述页面数据;和
步骤(S504),在作为调试对象的所述网页上渲染修改后的页面数据。
11.根据权利要求10所述的网页调试方法,其特征在于,
在所述步骤(S503)中,根据解析并分类后的所述调试任务,利用网页用脚本语言来对应地修改读取到的所述页面数据。
12.根据权利要求11所述的网页调试方法,其特征在于,
所述网页用脚本语言是JavaScript。
13.根据权利要求1-11中任一项所述的网页调试方法,其特征在于,
将所述页面数据收集步骤(S100)和所述调试认为执行步骤(S500)集成合并成网页嵌入步骤(SA100),并将所述网页嵌入步骤(SA100)制成网页用脚本语言文件嵌入到作为调试对象的所述网页中。
14.根据权利要求13所述的网页调试方法,其特征在于,
所述网页用脚本语言文件是JavaScript文件。
15.根据权利要求13所述的网页调试方法,其特征在于,
所述调试任务生成步骤(S400)在完成所述调试任务的生成之后,向所述网页嵌入步骤(SA100)发送调试指令。
16.根据权利要求15所述的网页调试方法,其特征在于,
所述网页嵌入步骤(SA100)包括:
步骤(SA101),作为所述网页用脚本语言文件而嵌入到作为调试对象的所述网页中;
步骤(SA102),运行所述网页;
步骤(SA103),检测所述网页是否呈现完毕,若尚未呈现完毕,则待机,若呈现完毕,则进入步骤(S104);
步骤(SA104),启动所述页面数据收集步骤(S100);
步骤(SA105),待机直到接收到所述调试任务生成步骤(S100)发送来的所述调试指令;
步骤(SA106),检测是否接收到所述调试指令,在未接收到所述调试指令时,返回所述步骤(SA105),继续待机,在接收到所述调试指令时,进入步骤(SA107);和
步骤(SA107),启动所述调试任务执行步骤(S500)。
17.根据权利要求1-16中任一项所述的网页调试方法,其特征在于,
所述页面数据包括:HTML结构信息、CSS样式值信息以及JavaScript值信息。
18.根据权利要求1-16中任一项所述的网页调试方法,其特征在于,
所述作为调试对象的所述网页是手机网页。
19.根据权利要求1-16中任一项所述的网页调试方法,其特征在于,
所述浏览器能够装备在不同的设备上。
20.一种能够跨浏览器的网页调试装置,包括:
页面数据收集单元,从作为调试对象的网页收集该网页的页面数据;
页面数据记录单元,将所述页面数据存储到数据库中;
页面数据展示单元,从所述数据库中读取所述页面数据,根据读取到的所述页面数据生成与浏览器种类无关的展示信息,并进行展示;
调试任务生成单元,监控所述展示信息,判断所述展示信息中的数据是否与预先设定的数据相比发生了变化,在判断为发生了变化时,生成相应的调试任务,并将所述调试任务存储到所述数据库中;和
调试任务执行单元,从所述数据库中读取所述调试任务以及所述页面数据,并根据所述调试任务来相应地修改所述页面数据,并将修改后的页面数据渲染到作为调试对象的所述网页上。
21.根据权利要求20所述的网页调试装置,其特征在于,
所述展示信息包括:HTML结构的Dom树、CSS样式值信息以及JavaScript值信息。
22.根据权利要求20所述的网页调试装置,其特征在于,
所述预先设定的数据是预先设定的期望显示效果的数据。
23.根据权利要求20所述的网页调试装置,其特征在于,
所述页面数据展示装置,利用预先设定的页面信息显示程序来展示所述展示信息。
24.根据权利要求20-23中任一项所述的网页调试装置,其特征在于,
所述页面数据包括:HTML结构信息、CSS样式值信息以及JavaScript值信息。
25.根据权利要求20-23中任一项所述的网页调试装置,其特征在于,
所述作为调试对象的所述网页是手机网页。
CN201510783204.1A 2015-11-16 2015-11-16 网页调试方法及装置 Active CN105224465B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510783204.1A CN105224465B (zh) 2015-11-16 2015-11-16 网页调试方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510783204.1A CN105224465B (zh) 2015-11-16 2015-11-16 网页调试方法及装置

Publications (2)

Publication Number Publication Date
CN105224465A true CN105224465A (zh) 2016-01-06
CN105224465B CN105224465B (zh) 2018-03-20

Family

ID=54993450

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510783204.1A Active CN105224465B (zh) 2015-11-16 2015-11-16 网页调试方法及装置

Country Status (1)

Country Link
CN (1) CN105224465B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105930266A (zh) * 2016-04-11 2016-09-07 北京小米移动软件有限公司 网页调试方法及装置
CN107203470A (zh) * 2017-05-11 2017-09-26 腾讯科技(深圳)有限公司 页面调试方法和装置
CN109002366A (zh) * 2018-07-26 2018-12-14 广东蔚海数问大数据科技有限公司 一种移动端网页的远程调试方法及装置
CN114238872A (zh) * 2021-12-17 2022-03-25 四三九九网络股份有限公司 一种html前端js代码防修改防调试的方法
CN114780164A (zh) * 2022-02-28 2022-07-22 深圳开源互联网安全技术有限公司 基于浏览器插件筛选网页信息的方法及系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120198422A1 (en) * 2009-09-29 2012-08-02 International Business Machines Corporation Cross-Browser Testing of a Web Application
CN104360921A (zh) * 2014-10-17 2015-02-18 微梦创科网络科技(中国)有限公司 一种移动端性能监控方法、装置及系统
CN104572473A (zh) * 2015-01-29 2015-04-29 无锡江南计算技术研究所 支持多类型和多版本浏览器的Web应用兼容性测试方法
CN104657359A (zh) * 2013-11-19 2015-05-27 孙燕群 一种通过网址记录网页内容和式样的方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120198422A1 (en) * 2009-09-29 2012-08-02 International Business Machines Corporation Cross-Browser Testing of a Web Application
CN104657359A (zh) * 2013-11-19 2015-05-27 孙燕群 一种通过网址记录网页内容和式样的方法
CN104360921A (zh) * 2014-10-17 2015-02-18 微梦创科网络科技(中国)有限公司 一种移动端性能监控方法、装置及系统
CN104572473A (zh) * 2015-01-29 2015-04-29 无锡江南计算技术研究所 支持多类型和多版本浏览器的Web应用兼容性测试方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
文义红: "基于元模型的WEB用户界面研究", 《中国优秀硕士学位论文全文数据库》 *

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105930266A (zh) * 2016-04-11 2016-09-07 北京小米移动软件有限公司 网页调试方法及装置
CN105930266B (zh) * 2016-04-11 2019-04-16 北京小米移动软件有限公司 网页调试方法及装置
CN107203470A (zh) * 2017-05-11 2017-09-26 腾讯科技(深圳)有限公司 页面调试方法和装置
CN109002366A (zh) * 2018-07-26 2018-12-14 广东蔚海数问大数据科技有限公司 一种移动端网页的远程调试方法及装置
CN114238872A (zh) * 2021-12-17 2022-03-25 四三九九网络股份有限公司 一种html前端js代码防修改防调试的方法
CN114238872B (zh) * 2021-12-17 2024-05-28 四三九九网络股份有限公司 一种html前端js代码防修改防调试的方法
CN114780164A (zh) * 2022-02-28 2022-07-22 深圳开源互联网安全技术有限公司 基于浏览器插件筛选网页信息的方法及系统
CN114780164B (zh) * 2022-02-28 2023-04-25 深圳开源互联网安全技术有限公司 基于浏览器插件筛选网页信息的方法及系统

Also Published As

Publication number Publication date
CN105224465B (zh) 2018-03-20

Similar Documents

Publication Publication Date Title
US10713149B2 (en) Processing automation scripts of software
CN105224465A (zh) 网页调试方法及装置
CN110442511B (zh) 可视化埋点测试方法及装置
CN109947637B (zh) 网页兼容性自动化测试方法、装置、设备及介质
JP2012190219A (ja) 情報処理装置、およびトレースログ取得方法
CN104348658A (zh) 故障报告生成方法及相关的系统
CN105760290A (zh) 基于网页前端测试的问题定位方法及相关装置、系统
CN105335246B (zh) 一种基于问答网站分析的程序崩溃缺陷自动修复方法
CN105808417A (zh) 自动化测试方法及代理服务器
CN109308254A (zh) 一种测试方法、装置及测试设备
US20220350857A1 (en) Methods and systems for browser extension used to generate relative xpath, absolute xpath and/or css selectors
CN112241370B (zh) 一种api接口类的校验方法、系统及装置
CN116911240B (zh) 电子自动化设计软件的命令配置方法、装置、设备及介质
CN111966580A (zh) 基于人工智能的自动化测试方法、装置、设备和存储介质
CN103365877A (zh) 对网页进行转码后建立目录的方法以及服务器
CN109189388A (zh) 页面配置方法、服务器及计算机可读介质
CN110740081A (zh) 对标多家公司页面性能的数据可视化方法
CN107547944A (zh) 接口实现方法及装置、机顶盒
CN116340169A (zh) 一种页面元素的XPath路径检测方法及装置
CN116016270A (zh) 一种交换机测试管理方法、装置、电子设备和存储介质
CN115481025A (zh) 自动化测试的脚本录制方法、装置、计算机设备及介质
CN113238953A (zh) Ui自动化测试方法、装置、电子设备和存储介质
JP5384136B2 (ja) 障害解析支援システム
CN112667502A (zh) 页面测试方法、装置及介质
CN106021287B (zh) 一种操作系统和数据库的信息收集方法及装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant