网页调试方法及装置的制造方法
【技术领域】
[0001]本发明涉及网页调试领域，具体涉及一种能够跨浏览器的网页调试方法及设备。
【背景技术】
[0002]随着Web应用及Web浏览便携式设备(例如，智能手机、平板电脑等)的不断普及和发展，Web应用开发任务正在迅猛增长。在Web应用开发过程中最重要的一个环节之一就是网页调试，即，针对页面数据(HTML、CSS、JavaScript)进行调试的场景，在这些场景中，需要实时地观察网页当前页面的详情情况、以及对页面局部内容修改后的实时展示情况。
[0003]在进行网页调试的时候，对于Web应用开发者来说，浏览器的兼容性是个大问题。五花八门的浏览器种类和版本(包括移动版)导致应用的展示效果有时候各不相同，需要经过在各种浏览器场景下利用所附带的开发者工具进行调试才能保证正常的呈现效果。
[0004]例如，现有的手机网页调试运行步骤包括:
[0005]手机页面内嵌JavaScript文件的步骤；
[0006]JavaScript通过浏览器开放的调试协议连接PC端浏览器的步骤；
[0007]PC端浏览器展示手机浏览器页面数据，即HTML结构、CSS样式值以及JavaScript值的步骤；
[0008]在PC端浏览器修改页面数据，即HTML结构、CSS样式值或JavaScript值的步骤；和
[0009]调试对象(例如，手机端)浏览器获得修改后的值进行渲染的步骤。
[0010]在这种现有的网页调试技术中，要利用浏览器开放的远程调试协议(调试工具)来实现调试。而这些开放的远程调试协议(调试工具)都是基于各自浏览器而开发的不同工具。因此，现有的调试技术都依存于浏览器本身附带的调试工具，Web应用开发者不得不需要熟悉各种浏览器的各种调试工具，使得网页调试任务成为Web应用开发者极为棘手及繁琐的工作。
【发明内容】
[0011]本发明是鉴于现有的上述技术问题而做出的，其目的在于提供一种能够跨浏览器的网页调试方法及装置。
[0012]本发明的一个方面的网页调试方法，是能够跨浏览器的网页调试方法，包括:页面数据收集步骤(S10)，从作为调试对象的网页收集该网页的页面数据；页面数据记录步骤(S200)，将所述页面数据存储到数据库中；页面数据展示步骤(S300)，从所述数据库中读取所述页面数据，根据读取到的所述页面数据生成与浏览器种类无关的展示信息，并进行展示；调试任务生成步骤(S400)，监控所述展示信息，判断所述展示信息中的数据是否与预先设定的数据相比发生了变化，在判断为发生了变化时，生成相应的调试任务，并将所述调试任务存储到所述数据库中；和调试任务执行步骤(S500)，从所述数据库中读取所述调试任务以及所述页面数据，并根据所述调试任务来相应地修改所述页面数据，并将修改后的页面数据渲染到作为调试对象的所述网页上。
[0013]根据本发明的一个方面的网页调试方法，所述展示信息包括:HTML结构的Dom树、CSS样式值信息以及JavaScript值信息。
[0014]根据本发明的一个方面的网页调试方法，所述预先设定的数据是预先设定的期望显示效果的数据。
[0015]根据本发明的一个方面的网页调试方法，在所述页面数据展示步骤(S300)中，利用预先设定的页面显示程序来展示所述展示信息。
[0016]根据本发明的一个方面的网页调试方法，所述调试任务生成步骤(S400)包括:步骤(S401)，遍历利用所述页面信息显示程序展示的所述展示信息中的数据进行监控；步骤(S402)，逐个判断所述展示信息中的数据是否与预先设定的期望显示效果的数据相比发生了变化，在判断为发生了变化时，转移至步骤(S403)，在判断为未发生变化时，跳转至步骤(S405);步骤(S403)，根据所发生的变化，生成相应的调试任务；步骤(S404)，将生成的上述调试任务存储到所述数据库中；和步骤(S405)，判断数据是否全部遍历完毕，在未遍历完毕时，返回所述步骤(S401)，遍历下一个数据，在遍历完毕时，转移至上述调试任务执行步骤(S500) ο
[0017]根据本发明的一个方面的网页调试方法，所述相应的调试任务是指:使利用所述页面信息显示程序展示的所述展示信息中的数据与所述预先设定的期望显示效果的数据相符的调试任务。
[0018]根据本发明的一个方面的网页调试方法，所述页面数据收集步骤(S100)包括:步骤(SlOl)，读取作为调试对象的网页的所述页面数据；步骤(S102)，逐个收集所述页面数据；和步骤(S103)，判断所述网页的所述网页数据是否全部读取完毕，在未全部读取完毕时，返回上述步骤(SlOl)，读取下一个数据，在全部读取完毕时，将所收集到的所述页面数据传递给上述页面数据记录步骤(S200)。
[0019]根据本发明的一个方面的网页调试方法，所述页面数据记录步骤(S200)包括:步骤(S201)，接收由上述页面数据收集步骤(S100)传递来的所述页面数据；步骤(S202)，对接收到的所述页面数据进行解析并分类；和步骤(S203)，将分类后的所述页面数据按照分类存储到所述数据库中。
[0020]根据本发明的一个方面的网页调试方法，在所述步骤(S202)中，将接收到的所述页面数据解析并分类成HTML结构信息、CSS样式值信息以及JavaScript值信息。
[0021]根据本发明的一个方面的网页调试方法，所述调试任务执行步骤(S500)包括:步骤(S501)，从所述数据库读取所述调试任务以及所述页面数据；步骤(S502)，对读取到的所述调试任务进行解析并分类，以便与从所述数据库读取到的已被解析并分类后的所述页面数据相对应；步骤(S503)，根据解析并分类后的所述调试任务，对应地修改读取到的所述页面数据；和步骤(S504)，在作为调试对象的所述网页上渲染修改后的页面数据。
[0022]根据本发明的一个方面的网页调试方法，在所述步骤(S503)中，根据解析并分类后的所述调试任务，利用网页用脚本语言来对应地修改读取到的所述页面数据。
[0023]根据本发明的一个方面的网页调试方法，所述网页用脚本语言是JavaScript。
[0024]根据本发明的一个方面的网页调试方法，将所述页面数据收集步骤(S100)和所述调试认为执行步骤(S500)集成合并成网页嵌入步骤(SA100)，并将所述网页嵌入步骤(SAlOO)制成网页用脚本语言文件嵌入到作为调试对象的所述网页中。
[0025]根据本发明的一个方面的网页调试方法，所述网页用脚本语言文件是JavaScript文件。
[0026]根据本发明的一个方面的网页调试方法，所述调试任务生成步骤(S400)在完成所述调试任务的生成之后，向所述网页嵌入步骤(SA100)发送调试指令。
[0027]根据本发明的一个方面的网页调试方法，所述网页嵌入步骤(SA100)包括:步骤(SA101)，作为所述网页用脚本语言文件而嵌入到作为调试对象的所述网页中；步骤(SA102)，运行所述网页?’步骤(SA103)，检测所述网页是否呈现完毕，若尚未呈现完毕，则待机，若呈现完毕，则进入步骤(S104);步骤(SA104)，启动所述页面数据收集步骤(S100);步骤(SA105)，待机直到接收到所述调试任务生成步骤(S100)发送来的所述调试指令；步骤(SA106)，检测是否接收到所述调试指令，在未接收到所述调试指令时，返回所述步骤(SA105)，继续待机，在接收到所述调试指令时，进入步骤(SA107);和步骤(SA107)，启动所述调试任务执行步骤(S500)。
[0028]根据本发明的一个方面的网页调试方法，所述页面数据包括:HTML结构信息、CSS样式值信息以及JavaScript值信息。
[0029]根据本发明的一个方面的网页调试方法，所述作为调试对象的所述网页是手机网页。
[0030]本发明的另一个方面的网页调试装置，是能够跨浏览器的网页调试装置，包括:页面数据收集单元，从作为调试对象的网页收集该网页的页面数据；页面数据记录单元，将所述页面数据存储到数据库中；页面数据展示单元，从所述数据库中读取