浏览器调试方法、调试装置、电子设备及存储介质与流程

1.本发明涉及数据渲染领域，具体涉及一种浏览器调试方法、调试装置、电子设备及存储介质。


背景技术：

2.随着计算机和互联网技术的发展，浏览器已成为人们在日常生活中浏览网页时的最为常见的应用之一。其中，浏览器是指可以显示网页服务器或者文件系统的html(hypertextmarkup language，超文本标记语言)文件内容，并让用户与这些文件交互的一种软件。
3.浏览器在接收到来自服务器的网页数据后，需要对该网页数据，包括待渲染的文字、图片甚至视频进行渲染，使之最终呈现给用户。一般情况下，浏览器都是将网页数据渲染后直接渲染到屏幕窗口，并直接显示给用户的，因此调试人员只能通过最终的浏览器窗口查看渲染效果，针对页面开发过程中可能会出现的大小、坐标、旋转、缩放等异常问题无法做到快速定位，调试复杂度高，耗时长，调试效率较低。
4.此外，随着超文本标记语言html以及网络脚本javascript技术的发展，浏览器中的内容变得更加丰富和有趣，在网页中办公、玩游戏、甚至处理图像都已经实现并应用越来越广泛，而且在浏览器中出现大型的3d游戏、高清晰的多媒体视频也成为发展趋势，但将所有的浏览器的图像处理工作全部交由cpu处理，会消耗大量的cpu资源，甚至导致cpu无法正常完成任务。
5.现有的浏览器及前端领域，随着硬件技术的快速发展，使用硬件加速技术来实现渲染越来越流行，硬件加速技术能够使用gpu(graphic processing unit，图形处理器)，同时合成多个图层，合成效率得到大大提高，页面渲染显示的效果也越来越好，但是对于浏览器及前端开发者来说，调试与开发渲染流程也就越来越复杂，特别是随着前端技术的突飞猛进，页面的种类和样式也越来越多，使得现有的浏览器调试手段无法满足复杂渲染场景下的调试需求。同时，由于不同平台的gpu实现可能存在运行不稳定的情况，容易导致渲染异常，出现无法调试分析的问题。
6.因此，有必要提供改进的技术方案以克服现有技术中存在的以上技术问题。


技术实现要素：

7.为了解决上述技术问题，本发明提供了一种浏览器调试方法、调试装置、电子设备及存储介质，通过使用离屏渲染的调试方法，无需浏览器窗口也能够查看渲染数据，能够更好的对排版和布局进行控制和预览，有利于快速定位问题从而提高调试效率，可以满足复杂渲染场景下的调试需求；此外，将浏览器的渲染内容保存为位图，使得后续测试时可直接对位图进行比对，从而有利于实现自动化测试。
8.根据本发明第一方面，提供了一种浏览器调试方法，包括：根据浏览器请求的网页数据生成渲染数据；
9.对所述渲染数据进行离屏渲染处理，并输出离屏渲染数据；
10.根据操作类型执行对应如下操作的其中之一：
11.在调试模式下，将所述离屏渲染数据传输到独立窗口进行渲染效果显示，并根据显示结果进行调试；或者
12.在测试模式下，将所述离屏渲染数据保存为位图。
13.可选地，根据浏览器请求的网页数据生成渲染数据包括：
14.对浏览器请求的网页数据进行预处理；
15.对所述预处理后的数据进行渲染，生成所述渲染数据，
16.其中，所述预处理包括：解析、绘制和排版处理。
17.可选地，离屏渲染处理包括：将所述渲染数据按不同渲染层进行分层缓存，所述离屏渲染数据包括缓存的所述渲染数据。
18.可选地，根据操作指令确认操作类型，所述操作指令由操作人员提供或者通过识别操作人员的身份信息获得。
19.可选地，将所述离屏渲染数据传输到独立窗口进行渲染效果显示包括：
20.创建独立的调试窗口；
21.将所述离屏渲染数据渲染到该独立的调试窗口中进行分层显示。
22.可选地，还包括：分析每个渲染层的显示内容，判断各渲染层的渲染效果是否准确；当存在渲染错误时，根据错误信息对所述渲染数据进行调试；当各渲染层的渲染效果全部准确时，将所述渲染数据进行存储。
23.可选地，还包括：根据所述位图和预期结果进行自动化测试。
24.根据本发明第二方面，提供了一种浏览器调试装置，包括：浏览器模块，用于根据请求的网页数据生成渲染数据；
25.离屏渲染模块，用于对所述渲染数据进行离屏渲染处理，并输出离屏渲染数据；
26.调试模块，用于在调试模式下，将所述离屏渲染数据传输到独立窗口进行渲染效果显示，并根据显示结果进行调试，或者在测试模式下，将所述离屏渲染数据保存为位图。
27.根据本发明第三方面，提供了一种电子设备，包括：处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序，所述程序被所述处理器执行时实现如上所述的浏览器调试方法的步骤。
28.根据本发明第四方面，提供了一种存储介质，所述存储介质上存储有计算机程序或指令，所述计算机程序或指令被处理器执行时实现如上所述的浏览器调试方法的步骤。
29.采用本发明的技术方案，可直接通过离屏位图或调试窗口查看渲染效果，从而能够帮助开发者快速定位问题，有利于实现自动化测试和提高调试效率。
30.应当说明的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。
附图说明
31.图1示出根据本发明实施例提供的浏览器调试方法的流程示意图；
32.图2示出根据本发明实施例提供的生成渲染数据的方法流程图；
33.图3示出根据本发明实施例提供的调试模式下的数据处理流程图；
34.图4示出根据本发明实施例提供的浏览器调试装置的结构示意图；
35.图5示出根据本发明实施例提供的电子设备的结构示意图。
具体实施方式
36.为了便于理解本发明，下面将参照相关附图对本发明进行更全面的描述。附图中给出了本发明的较佳实施例。但是，本发明可以通过不同的形式来实现，并不限于本文所描述的实施例。相反的，提供这些实施例的目的是使对本发明的公开内容的理解更加透彻全面。
37.图1示出根据本发明实施例提供的浏览器调试方法的流程示意图，图2示出根据本发明实施例提供的生成渲染数据的方法流程图，图3示出根据本发明实施例提供的调试模式下的数据处理流程图。作为示例，本文中所描述的浏览器是电子设备上的浏览器，所述电子设备可以是移动终端，但不限于此。移动终端可以是智能电话、笔记本电脑、平板电脑、手持游戏机、企业数字助理(eda)、个人数字助理(pda)、数字多媒体播放器等。
38.参考图1，本示例所提供的浏览器调试方法包括执行如下步骤：
39.在步骤s1中，根据浏览器请求的网页数据生成渲染数据。
40.参考图2，步骤s1进一步包括执行，步骤s11：对浏览器请求的网页数据进行预处理。步骤s12：对所述预处理后的数据进行渲染，生成所述渲染数据。
41.浏览器请求网页数据的过程包括：用户打开浏览器，并在浏览器中输入网址或通过网络链接选定网址；浏览器根据dns服务器解析获得对于该网址的域名和ip地址；浏览器向对应该ip地址的服务器发送http请求；服务器接收、处理并返回http请求，以及浏览器接收服务器返回的网页数据等。
42.预处理包括：解析、绘制和排版等处理。具体包括：解析html文件，构建dom树；解析css文件，构建css规则树；将dom树和css规则树合并，构建渲染树；生成布局，画出渲染树中所有的节点，即根据渲染树进行节点信息计算；根据计算好的信息对应得页面结构进行排版等。
43.之后，浏览器中的渲染引擎模块会将预处理后的数据渲染成渲染数据。具体渲染过程可根据现有的相关技术进行理解，因其不影响对本发明技术方案的理解，进而本文中不作详述。
44.在步骤s2中，对渲染数据进行离屏渲染处理，并输出离屏渲染数据。
45.本发明在获得渲染数据后，并不会直接将该渲染数据直接渲染到浏览器窗口(本文中指代呈现给操作人员的屏幕窗口)，而是在浏览器中的渲染引擎模块生成渲染数据后对该渲染数据进行离屏渲染处理，包括将渲染数据中的各渲染层数据进行分层缓存。其中，离屏渲染数据包括缓存的渲染数据。
46.在正常的屏幕渲染过程中，从获得各渲染层的图层再到各图层叠加合并以构成网页页面图像的速度是很快的，若在渲染过程中出现例如图层的大小、坐标、旋转、缩放等问题，只能在最终的浏览器窗口中查看渲染内容和效果，进而才能根据查看结果进行相应调试工作，无法准确且快速的定位问题所在，也无法高效的对出现的完成调试工作。而本发明中通过使用离屏渲染的调试手段，先将渲染数据按渲染层进行分层缓存，再根据缓存的数据进行各渲染层的渲染效果展示与调试，能够快速定位出是哪一层出现的问题以及快速定
位出具体的大小、坐标、旋转、缩放等问题，从而有利于对渲染过程中的合成问题和绘制问题进行快速、准确的分析。其中，每个渲染层例如对应渲染树中的至少一个节点。
47.在步骤s3中，判断当前的操作类型，并根据确认的操作类型执行步骤s4或步骤s5。其中，可根据操作指令确认操作类型。可选地，操作指令可由操作人员提供或者通过识别操作人员的身份信息(如登录信息)获得。示例性地，操作指令包括调节指令和测试指令。操作人员包括调试人员和测试人员。
48.进一步地，在确认当前的操作类型为调试模式时，执行步骤s4；在确认当前的操作类型为测试模式时，执行步骤s5。
49.在步骤s4中，在调试模式下，将离屏渲染数据传输到独立窗口进行渲染效果显示，并根据显示结果进行调试。
50.参考图3，步骤s4进一步包括执行，步骤s41：创建独立的调试窗口。步骤s42：将离屏渲染数据渲染到该独立的调试窗口中进行分层显示。步骤s43：分析每个渲染层的显示内容，判断各渲染层的渲染效果是否准确。当存在渲染错误时执行步骤s4，当各渲染层的渲染效果全部准确时，执行步骤s5。步骤s44：根据错误信息对所述渲染数据进行调试。步骤s45：将渲染数据进行存储。
51.在调试模式下，创建独立且可视的调试窗口，并在该调试窗口内，能够将之前缓存的离屏渲染数据进行分层显示。如此，无需浏览器窗口，可直接通过该调试窗口查看浏览器请求的网页数据的渲染效果，使得调试过程能够在网页数据渲染到浏览器窗口之前进行，从而使得开发者如调试人员在开发阶段能够更好的对网页的排版和布局进行控制和预览。同时，由于在调试窗口内能够长时间的对各渲染层在合成前的内容及渲染效果进行独立的分层显示，使得浏览器开发者能够直观的观察每个渲染层的全部渲染内容，从而能够快速准确的判断各渲染层的渲染效果是否准确，例如通过与期望效果的比对来分析每个渲染层的大小、坐标、旋转、缩放、透明度、图层关系等信息是否准确。
52.当检测到离屏渲染数据的渲染效果存在渲染错误时，由于各渲染层是分层显示的，因此开发者能够快速、准确的定位到具体的某一层来分析问题，例如直接对该渲染层对应的数据进行检查来确定错误信息出现的原因并进行针对性的调试，如对该渲染层进行修改、重绘和/或调整浏览器大小等操作，可以丰富开发人员的调试手段，降低开发难度，有利于开发人员快速的解决问题，以提高调试效率。
53.当离屏渲染数据的渲染效果全部准确(包括在初次分析每个渲染层的渲染效果后确定各渲染层的渲染效果全部准确，或者经过调试后解决了所有的错误信息后，再次分析每个渲染层的渲染效果并确定各渲染层的渲染效果全部准确)后，可将准确的渲染数据/离屏渲染数据存储到特定的存储位置，例如可存储到日志文件中，以便后续读取。
54.在步骤s5中，在测试模式下，将离屏渲染数据保存为位图。
55.进一步地，本发明实施例所公开的浏览器调试方法还包括：根据位图和预期结果进行自动化测试。
56.位图图像(bitmap)，亦称为点阵图像或栅格图像，是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成图样。通过将离屏渲染数据保存为位图，可以展现出离屏渲染数据对应的显示内容中色彩的变化和颜色的细微过渡，从而将离屏渲染数据对应的显示内容中所包含的各种细节进行准确、逼真且有效的存储。同时，本
示例所保存的位图也可以很容易地在不同软件之间交换文件。进而，在测试模式下，只需直接将保存的位图与预期结果进行比对即可实现对浏览器渲染的自动化测试。此外，也可直接对保存的位图的位移、缩放、旋转、透明度等内容进行调试，能够分析出各渲染层的大小和位置等是否正确，有利于开发人员解决问题。
57.可以理解，在浏览器内核开发领域，当一个全新的硬件平台中的gpu功能还未开发完毕的情况下，使用本发明的离屏渲染的调试手段，可以通过调试窗口或位图查看到浏览器渲染内容，达到并行开发的目的，能够极大地提升开发效率。
58.进一步地，本发明还公开了一种浏览器调试装置，如图4所示，该浏览器调试装置包括：浏览器模块10、离屏渲染模块20和调试模块30。
59.其中，浏览器模块10用于根据请求的网页数据生成渲染数据。示例性地，浏览器模块10进一步包括预处理单元11和渲染引擎单元12。预处理单元11用于对浏览器请求的网页数据进行包括解析、绘制和排版等在内的预处理。渲染引擎单元12用于对预处理后的数据进行渲染，生成渲染数据。
60.离屏渲染模块20用于对渲染数据进行离屏渲染处理，并输出离屏渲染数据。
61.调试模块30用于在调试模式下，将离屏渲染数据传输到独立窗口进行渲染效果显示，并根据显示结果进行调试，或者在测试模式下，将离屏渲染数据保存为位图。示例性地，调试模块30进一步包括：调试控制单元31、调试窗口单元32和调试位图单元33。调试控制单元31用于根据操作指令区分当前的操作类型。调试窗口单元32用于将离屏渲染数据渲染到特定的独立窗口，以方便进行大小、坐标、旋转、缩放等操作。调试位图单元33用于将离屏渲染数据保存为位图，以方便与预期结果进行比对，实现浏览器渲染自动化测试。
62.具体实施时，浏览器调整装置中的各个模块/单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现。同时，以上描述的浏览器调整装置中的各个模块/单元的具体实施可参见前述的浏览器调整方法实施例，在此不再赘述
63.本发明实施例还提供了一种电子设备100，如图5所示，包括处理器110、存储器120及存储在存储器120上并可在处理器110上运行的程序，该程序被处理器110执行时可实现上述浏览器调整方法中各实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
64.本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读的存储介质中，并由处理器进行加载和执行。为此，本发明实施例还提供了一种存储介质，该存储介质上存储有计算机程序或指令，该计算机程序或指令被处理器执行时可实现上述浏览器调整方法中各实施例的各个过程。其中，存储介质，如u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。
65.由于该存储介质中所存储的指令，可以执行本发明实施例所提供的浏览器调整方法中的步骤，因此，可以实现本发明实施例所提供的浏览器调整方法所能实现的有益效果，详见前面的实施例，在此不再赘述。以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
66.综上，1、在浏览器、前端开发领域，使用本发明公开的离屏渲染的调试手段，能够
帮助开发者在开发阶段，不依赖于浏览器窗口而获取浏览器渲染内容，能够更好的对排版，布局进行控制与预览。
67.2、在自动化测试领域，使用本发明公开的离屏渲染的调试手段，将浏览器渲染内容输出到位图，可以直接对位图进行比对，从而实现自动化测试。
68.3、使用本发明公开的离屏渲染，可以将渲染内容输出到位图，通过调试位图，能够分析每个渲染层合成之前的内容，可以帮助开发人员快速的定位到具体的某一层来分析问题，丰富了开发人员的调试手段，有利于开发人员解决问题。
69.4、在浏览器内核开发领域，当一个全新的硬件平台中的gpu功能还未开发完毕的情况下，使用本发明公开的离屏渲染的调试手段，可以在调试窗口或通过位图查看到浏览器渲染内容，达到并行开发的目的，极大地提升开发效率。
70.最后应说明的是：显然，上述实施例仅仅是为清楚地说明本发明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引申出的显而易见的变化或变动仍处于本发明的保护范围之中。