网页绘图调试方法、装置、电子设备及存储介质与流程

1.本技术涉及计算机网络技术领域，具体涉及网页绘图调试方法、装置、电子设备及存储介质。


背景技术：

2.随着计算机的发展和互联网技术的不断推进，丰富强大的网页图像或动画能够将网页更好地呈现给用户，方便用户获取信息的同时吸引用户。canvas(画布)是html5中用于在网页中绘制图像或展现动画的标签，功能强大，能够灵活便利地实现网页中图像的绘制，展现丰富的网页图像效果；不过，《canvas》元素本身并没有绘制能力，必须利用脚本(指令)来完成绘图，在实际应用中，要利用canvas实现网页绘图往往需要依赖大量的canvas代码来实现，且在实现最终展示效果之前，往往需要进行调试以保证达到网页绘图的最佳效果，避免错误。
3.现有技术中在进行canvas网页绘图调试时，往往需要开发人员对照相应的canvas代码进行相应的修改再返回网页查看展示效果，需要确定代码与效果的对应关系，繁琐耗时且较易出错，因此，需要提供更加可靠高效的方案。


技术实现要素：

4.为了解决现有技术的问题，本技术提供了一种网页绘图调试方法、装置、电子设备及存储介质。所述技术方案如下：
5.本技术一方面提供了一种网页绘图调试方法，所述方法包括：
6.响应于目标网页绘图的调试触发指令，展示目标调试页面，所述目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息；其中，所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的，所述预设绘制数据映射关系表征绘制指令与绘制节点信息间的映射关系；
7.响应于调试指令，确定所述调试指令对应的调试信息；
8.基于所述调试信息更新所述原始绘制节点信息，得到更新绘制节点信息；
9.基于所述更新绘制节点信息更新所述对应的原始绘制结果信息；
10.其中，所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的。
11.本技术另一方面提供了一种网页绘图调试装置，所述装置包括：
12.目标调试页面展示模块，用于响应于目标网页绘图的调试触发指令，展示目标调试页面，所述目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息；其中，所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的，所述预设绘制数据映射关系表征绘制指令与绘制节点信息间的映射关系；
13.调试信息确定模块，用于响应于调试指令，确定所述调试指令对应的调试信息；
14.绘制节点更新模块，用于基于所述调试信息更新所述原始绘制节点信息，得到更
新绘制节点信息；
15.绘制效果更新模块，用于基于所述更新绘制节点信息更新所述对应的原始绘制结果信息。
16.本技术另一方面提供了一种电子设备，所述电子设备包括处理器和存储器，所述存储器中存储有至少一条指令或至少一段程序，所述至少一条指令或所述至少一段程序由上述处理器加载并执行以实现如上述的网页绘图调试方法。
17.本技术另一方面提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令或至少一段程序，所述至少一条指令或所述至少一段程序由处理器加载并执行以实现如上述的网页绘图调试方法。
18.本技术提供的网页绘图调试方法、装置、电子设备及存储介质，具有如下技术效果：
19.本技术通过响应于目标网页绘图的调试触发指令，展示目标调试页面，且目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息，其中，原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的，利用预设绘制数据映射关系对目标原始绘制指令集进行解析并展示，无需对海量繁琐的指令进行对应修改，能够直观清楚地获取调试信息和绘制结果，提升网页绘图调试的灵活性；然后，响应于调试指令，确定调试指令对应的调试信息，再基于调试信息更新原始绘制节点信息，得到更新绘制节点信息；基于所述更新绘制节点信息更新所述对应的原始绘制结果信息，能够实时根据调试指令更新原始绘制结果，从而实现直观便捷的网页绘图调试，提升网页绘图调试的效率和灵活性，且能够减少调试错误的情况。
20.本技术的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本技术的实践了解到。
附图说明
21.为了更清楚地说明本技术实施例或现有技术中的技术方案和优点，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。
22.图1是本技术实施例提供的一种应用环境的示意图；
23.图2是本技术实施例提供的一种网页绘图调试方法的流程示意图；
24.图3是本技术实施例提供的一种目标调试页面的示意图；
25.图4是本技术实施例提供的另一种网页绘图调试方法的流程示意图；
26.图5是本技术实施例提供的另一种网页绘图调试方法的流程示意图；
27.图6是本技术实施例提供的另一种网页绘图调试方法的流程示意图；
28.图7是本技术实施例提供的另一种目标调试页面的示意图；
29.图8是本技术实施例提供的另一种网页绘图调试方法的流程示意图；
30.图9是本技术实施例提供的另一种网页绘图调试方法的流程示意图；
31.图10是本技术实施例提供的展示更新后的原始绘制结果信息的页面示意图；
32.图11是本技术实施例提供的一种网页绘图调试装置示意图；
33.图12是本技术实施例提供的一种用于实现网页绘图调试方法的客户端的硬件结构框图。
具体实施方式
34.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本技术保护的范围。所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。
35.需要说明的是，本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或服务器不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
36.人工智能(artificial intelligence,ai)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能，大大提升数据采集分析的准确性和效率。
37.人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。
38.请参阅图1，图1是本技术提供的一种应用环境示意图，如图1所示，该应用环境可以包括服务器01和客户端02。
39.在本技术实施例中，服务器01可以用于存储网页绘图的原始绘制指令集，且可以响应于客户端02发送的数据解析请求将上述的原始绘制指令集发送到客户端进行数据解析，以使客户端02根据对应的原始绘制节点信息进行调试页面的展示及后续的调试更新。可选的，服务器01可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、cdn(content delivery network内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。
40.在本技术实施例中，客户端02可以用于向服务器01发送数据解析请求，该数据解析请求可以包括需要获取的网页绘图的标识信息，以使服务器01根据标识信息确定该网页绘图对应的原始绘制指令集并发送到客户端02，客户端02可以基于预设绘制数据映射关系对原始绘制指令集进行数据解析生成对应的绘制节点信息；客户端02还可以用于响应于目
标网页绘图的调试触发指令，展示包括原始绘制节点信息和对应的原始绘制结果信息的目标调试页面，以及响应于调试指令，确定调试指令对应的调试信息，基于调试信息更新原始绘制节点信息，并更新对应的原始绘制结果信息。可选的，客户端02可以包括智能手机、平板电脑、笔记本电脑、台式计算机、数字助理、智能音箱、智能可穿戴设备、车载终端、服务器等类型的实体设备，也可以包括运行于实体设备中的软体，例如网页、应用程序等，但并不局限于此。
41.需要说明的是，上述的实施例仅为本技术提供的一个实施例，在实际应用中，也可以由服务器01基于预设绘制数据映射关系对原始绘制指令集进行数据解析生成对应的绘制节点信息并发送到客户端02进行展示，本技术并不以此为限。此外，在本技术实施例中，上述的服务器01以及客户端02可以通过有线或无线通信方式进行直接或间接地连接，本技术在此不做限制。
42.图2是本技术实施例提供的一种网页绘图调试方法的流程图，本说明书提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的系统或服务器产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。具体的如图2所示，所述方法可以包括：
43.s201：响应于目标网页绘图的调试触发指令，展示目标调试页面。
44.在本技术实施例中，上述的目标网页绘图可以表征待调试的canvas图像，在一个实施例中，该目标网页绘图可以为一个静态的图像，在另一个实施例中，该目标网页绘图可以为一个网页动画中的一帧对应的网页绘图，本技术并不以此为限。上述的目标网页绘图的调试触发指令可以为用户结合绘图调试需求发出的，例如点击目标网页绘图对应的调试按键，生成目标网页绘图的调试触发指令；上述的目标调试页面可以为该目标网页绘图对应的目标调试页面，在实际应用中，上述的目标调试页面可以以浏览器插件或开发软件插件的形式实现；具体地，该目标调试页面可以包括原始绘制节点信息和对应的原始绘制结果信息，其中，上述的原始绘制节点信息可以表征该目标网页绘图对应的至少一个绘制节点的原始配置属性，在本技术实施例中，绘制节点可以表征具有可视化类别特征及样式属性的网页绘图操作信息，在一个实施例中，上述绘制节点的类别特征可以表征对应的绘制操作类别信息，具体可以包括但不限于文本、矩形、复合路径和图像；在本技术实施例中，上述的原始绘制节点信息可以包括但不限于：该目标网页绘图对应的至少一个绘制节点的节点名称、节点属性信息(表征对应的绘制节点的样式信息，可以包括例如图像的长宽高、文字的字体和大小颜色等)、节点排列顺序(表征节点绘制顺序)和节点数量。
45.上述对应的原始绘制结果信息可以表征与上述原始绘制节点信息对应的绘制效果信息，在实际应用中，上述对应的原始绘制结果信息可以为可视化的canvas绘制效果图。
46.图3是本技术实施例提供的一个目标调试页面的示意图，请参照图3，此时目标网页绘图可以为一个静态图像(网页绘图a)，图3所示的目标调试页面即网页绘图a对应的调试页面，该目标调试页面的左侧和右侧为原始绘制节点信息展示区，可以用于展示网页绘图a对应的原始绘制节点信息(包括节点排列顺序、各节点的属性等)，此时共有5个绘制节点(文本1、图像1、矩形1、矩形2、路径1；示例性的，此时直接以绘制节点类型进行命名，实际
应用中也可以根据绘制节点特征生成对应的节点名称，或在名称旁生成节点缩略图以便用户根据调试需求准确快速地进行待调试节点的定位)，此时选中的绘制节点为“文本1”(图3中的选中光标对应的位置)，在实际应用中，也可以利用颜色填充表示该绘制节点被选中，本技术并不以此为限；右侧的原始绘制节点信息展示区展示的即文本1的节点属性信息(包括x轴坐标(x)、y轴坐标(y)、宽度(w)、高度(h)、字体、字号、对齐方式等)，用户可根据调试需求在原始绘制节点信息展示区进行可视化的调试操作，中间区域为绘制结果信息展示区，可以展示与上述原始绘制节点信息对应的原始绘制结果信息(可视化的canvas绘制效果图)。
47.通过响应于目标网页绘图的调试触发指令，展示目标调试页面，且该目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息，能够直观清楚地获取调试信息和绘制结果，提升网页绘图调试的灵活性，无需对海量繁琐的指令进行对应修改。
48.在本技术实施例中，上述的原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的。
49.具体地，请参照图4，在本技术实施例中，上述方法还可以包括：
50.s401：获取目标原始绘制指令集。
51.在本技术实施例中，该目标原始绘制指令集可以表征上述目标网页绘图对应的原始代码信息，该目标原始绘制指令集可以是开发人员预先存储于服务器或客户端上的网页绘图原始代码，且该目标原始绘制指令集可以包括大量的canvas绘制指令。
52.s403：基于预设绘制数据映射关系对该目标原始绘制指令集进行数据解析，得到至少一个绘制节点和对应的节点属性信息。
53.目前开发人员需要进行网页绘图调试时，需要进入网页查看绘图效果，再根据调试需求对原始绘制指令集中对应的指令进行修改，由于指令集较为庞大复杂，对照修改较为繁琐耗时，且不够可靠，本技术实施例可以通过预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析可有效解决前述问题。
54.在本技术实施例中，该预设绘制数据映射关系可以表征绘制指令与绘制节点信息间的映射关系，在实际应用中，该预设绘制数据映射关系可以是预先基于节点调试需求生成的，符合开发人员的调试习惯及需求，进而能够利用该预设绘制数据映射关系对该目标原始绘制指令集进行数据解析，将原始绘制指令集中的操作信息抽象为绘制节点，有利于开发人员快速准确地进行待调试操作的定位并进行后续的网页绘图调试。
55.在本技术实施例中，该预设绘制数据映射关系可以包括第一映射信息和第二映射信息；其中，该第一映射信息可以表征绘制执行指令与绘制节点类型的映射关系，该第二映射信息可以表征绘制样式指令与节点属性信息间的映射关系；具体地，上述的绘制执行指令可以为对应的原始绘制指令集中用于执行绘制操作(绘制动作)的指令，具体地，上述的绘制执行指令可以包括但不限于：填充文字、文字描边、绘制矩形、绘制路径和绘制图像，在实际应用中，每个绘制执行指令可以为canvas绘制执行代码信息；上述的绘制样式指令可以为对应的原始绘制指令集中用于表示绘制操作的样式信息的指令，具体地，上述的绘制样式指令可以包括但不限于：对齐方式、文本内容、长宽高等，在实际应用中，每个绘制执行指令可以为canvas绘制样式代码信息。
56.请参照图5，上述的基于预设绘制数据映射关系对该目标原始绘制指令集进行数
据解析，得到至少一个绘制节点和对应的节点属性信息可以包括：
57.s501：从该目标原始绘制指令集中确定目标绘制执行指令。
58.s503：基于该第一映射信息确定该目标绘制执行指令对应的绘制节点类型。
59.在本技术实施例中，该第一映射信息可以表征绘制执行指令与绘制节点类型的映射关系；在具体的实施例中，上述表征绘制执行指令与绘制节点类型的映射关系的第一映射信息可以包括：例如，当绘制执行指令为filltext或stroketext，对应的绘制节点类型为文本；当绘制执行指令为rect、fillrect或strokerect，对应的绘制节点类型为矩形；当绘制执行指令为fill或stroke，对应的绘制节点类型为复合路径；当绘制执行指令为drawimage，对应的绘制节点类型为图像。上述的绘制节点类型可以表征绘制操作类别信息，且上述的绘制节点类型结合实际网页绘图调试习惯和调试需求进行设定，在一个具体的实施例中，上述的绘制节点类型可以包括：文本、矩形、复合路径和图像。
60.s505：基于所述目标绘制执行指令对应的绘制节点类型创建目标绘制节点。
61.在本技术实施例中，可以基于该第一映射信息确定该目标绘制执行指令对应的绘制节点类型，再基于该目标绘制执行指令对应的绘制节点类型，创建目标绘制节点，该目标绘制节点为基于该目标绘制执行指令对应的绘制节点类型新建的绘制节点(例如此时该目标绘制执行指令对应的绘制节点类型为文本，则可以新建一个绘制节点类型为文本的绘制节点，作为目标绘制节点)；在实际应用中，可以从绘制执行指令中提取关键字再基于该第一映射信息创建目标绘制节点以提升数据解析的效率和灵活性；
62.在实际应用中，基于上述的目标绘制执行指令和该第一映射信息创建对应类型的绘制节点时还可以生成该绘制节点对应的缩略图，或提取该目标绘制执行指令的特征信息生成具有特征的节点名称，以在目标调试页面中进行展示，方便开发人员根据调试需求快速进行待调试节点的定位。
63.在本技术实施例中，上述的目标原始绘制指令集可以包括多个按序排列的绘制指令，这多个按序排列的绘制指令可以包括绘制执行指令和绘制样式指令；在一个实施例中，当该目标原始绘制指令集中仅一个绘制执行指令时，可以将这个绘制执行指令作为上述的目标绘制执行指令，然后基于上述的目标绘制执行指令和上述的第一映射信息创建目标绘制节点。在另一个实施例中，当该目标原始绘制指令集中包括至少两个绘制执行指令时，由于上述的目标原始绘制指令集可以包括多个按序排列的绘制指令，上述的从该目标原始绘制指令集中确定目标绘制执行指令可以包括：将上述的目标原始绘制指令集中的第1个绘制执行指令作为上述的目标绘制执行指令，然后基于上述的目标绘制执行指令和上述的第一映射信息创建第1个目标绘制节点；在基于上述的目标绘制执行指令和上述的第一映射信息创建目标绘制节点完成之后，可以将下一个未创建目标绘制节点的绘制执行指令(第2个绘制执行指令)作为上述的目标绘制执行指令，继续进行第2个目标绘制节点的创建，直到上述目标原始绘制指令集中的全部绘制执行指令都创建好绘制节点。
64.通过从该目标原始绘制指令集中确定目标绘制执行指令，基于上述的目标绘制执行指令和上述的第一映射信息创建目标绘制节点，且该第一映射信息可以表征绘制执行指令与绘制节点类型的映射关系，能够利用该第一映射信息将原始绘制指令集中的操作信息抽象为绘制节点，有利于开发人员快速准确地进行待调试操作的定位并进行后续的网页绘图调试，提升网页绘图调试的灵活性和效率。
65.s507：从该目标原始绘制指令集中确定与该目标绘制执行指令对应的绘制样式指令。
66.在实际应用中，绘制样式指令可以包括公共样式指令和节点样式指令，上述的公共样式指令对所有绘制节点都生效，上述的节点样式指令仅针对其对应的绘制节点类型的绘制节点生效；具体地，上述的公共样式指令可以包括但不限于：坐标样式指令、填充颜色样式指令、阴影样式指令和变形样式指令；上述的节点样式指令可以包括例如：绘制节点类型为文本时，节点样式指令包括文本基线样式指令、文本对齐样式指令。
67.在本技术实施例中，由于上述的目标原始绘制指令集可以包括多个按序排列的绘制指令，这多个按序排列的绘制指令可以包括绘制执行指令和绘制样式指令；上述的从该目标原始绘制指令集中确定与该目标绘制执行指令对应的绘制样式指令可以包括：确定该目标原始绘制指令集中排列于该目标绘制执行指令之前的有效绘制样式指令，将上述的有效绘制样式指令作为上述的与该目标绘制执行指令对应的绘制样式指令。具体地，上述的有效绘制样式指令可以表征能够对该目标绘制执行指令生效的绘制样式指令，一般在canvas绘制指令集(原始绘制指令集)中，可以根据排列于绘制执行指令之前的绘制样式指令所规定的样式信息执行绘制操作，例如，一个绘制执行指令为填充，在这个填充指令之前且与这个填充指令最接近的填充颜色样式指令为填充黑色，则在执行这个填充指令时就会以填充黑色这个样式信息进行操作，假设在填充指令执行前，最先存在一个绘制样式指令为填充红色，但接着又存在一个同属性的绘制样式指令为填充黑色，则填充黑色这个样式指令会覆盖填充红色这个样式指令，在填充黑色之后的绘制执行指令(填充)会以填充黑色这个样式信息进行操作，因此需要从该目标原始绘制指令集中确定与该目标绘制执行指令对应的绘制样式指令。
68.s509：基于上述的与该目标绘制执行指令对应的绘制样式指令和该第二映射信息确定该目标绘制节点对应的节点属性信息。
69.由于在本技术实施例中，该第二映射信息可以表征绘制样式指令与节点属性信息间的映射关系，上述的节点属性信息可以表征绘制节点的样式属性信息；由于已经基于该目标绘制执行指令对应的绘制节点类型创建了目标绘制节点，从该目标原始绘制指令集中确定与该目标绘制执行指令对应的绘制样式指令之后，可以基于上述的与该目标绘制执行指令对应的绘制样式指令和该第二映射信息确定该目标绘制节点对应的节点属性信息。
70.在本技术实施例中，由于上述的目标原始绘制指令集可以包括多个按序排列的绘制指令，可以根据上述步骤创建目标绘制节点以及确定目标绘制节点对应的节点属性信息，直到该目标原始绘制指令集全部解析完成，得到至少一个绘制节点和对应的节点属性信息。
71.由于在实际应用中，上述对应的绘制样式指令为原始绘制指令集中的代码信息，能够利用表征绘制样式指令与节点属性信息间的映射关系的第二映射信息，将复杂繁琐的绘制样式指令抽象映射为直观清楚的节点属性信息，进而能够在调试页面进行可视化展示，有利于开发人员快速准确地进行待调试操作的样式属性的定位并根据调试需求对样式属性进行调整，提升网页绘图调试的灵活性和效率，且有利于提升调试准确性。
72.s405：基于上述至少一个绘制节点和对应的节点属性信息生成上述的原始绘制节点信息。
73.在本技术实施例中，上述的原始绘制节点信息可以包括但不限于：该目标网页绘图对应的至少一个绘制节点的节点名称、节点属性信息(表征对应的绘制节点的样式信息，可以包括例如图像的长宽高、文字的字体和大小颜色等)、节点排列顺序(表征节点绘制顺序)和节点数量。在基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析，得到至少一个绘制节点和对应的节点属性信息之后，可以基于上述至少一个绘制节点和对应的节点属性信息生成上述的原始绘制节点信息。在一个实施例中，由于上述的目标原始绘制指令集可以包括多个按序排列的绘制指令，在上述实施例中当该目标原始绘制指令集中包括至少两个绘制执行指令时，可以按照至少两个绘制执行指令的排列顺序依次创建绘制节点，得到对应的至少两个按序排列的绘制节点，然后，可以根据这至少两个按序排列的绘制节点的顺序确定上述的原始绘制节点信息中的节点排列顺序。在实际应用中，可以基于上述至少一个绘制节点和对应的节点属性信息生成原始绘制节点树，该原始绘制节点树可以表征原始绘制节点信息对应的数据结构，进而能够在调试页面可视化地展示上述的原始绘制节点信息。
74.通过基于上述至少一个绘制节点和对应的节点属性信息生成上述的原始绘制节点信息，能够将庞大繁琐的原始绘制指令集解析为结构清晰的原始绘制节点信息(可以包括绘制节点名称、属性、排列顺序等)，进而有利于后续开发人员根据调试需求快速准确地进行待调试信息的定位并进行后续的网页绘图调试，大大提升网页绘图调试的灵活性和效率。
75.在上述实施例中，该目标网页绘图可以为一个静态的图像，在一些实施例中，该目标网页绘图也可以为一个网页动画中的一帧对应的网页绘图；当上述的目标网页绘图包括目标网页动画中的目标帧对应的网页绘图时，该目标调试页面可以包括该目标帧对应的调试页面，请参照图6，上述的响应于目标网页绘图的调试触发指令，展示目标调试页面可以包括：
76.s601：响应于针对上述目标帧的切换操作，将切换后的帧作为上述的目标帧；
77.在本技术实施例中，上述的针对上述目标帧的切换操作可以为目标用户根据实际调试需求发出的，例如当前展示的目标调试页面为目标网页动画中第1帧对应的调试页面，而目标用户需要对目标网页动画中第3帧对应的网页绘图进行调试，则针对上述目标帧的切换操作可以为用于控制将第1帧切换为第3帧对应的网页绘图的操作，生成对目标网页动画中第3帧的调试触发指令，进而计算机能够响应于针对上述目标帧的切换操作，将切换后的帧(如上述的第3帧)作为上述的目标帧，以基于新的目标帧执行后续步骤。
78.s603：将上述目标帧对应的调试页面作为该目标调试页面；
79.在上述的实施例中，此时可以将上述的切换后的帧(上述的第3帧)对应的调试页面作为该目标调试页面。
80.s605：展示该目标调试页面。
81.图7是本技术实施例提供的当上述的目标网页绘图包括目标网页动画中的目标帧对应的网页绘图时，通过响应于上述的针对上述目标帧的切换操作展示的目标调试页面的示意图，图中的目标帧的切换操作区可以用于显示当前该目标调试页面对应的帧，且用户可以在目标帧的切换操作区进行针对上述目标帧的切换操作，例如原本展示的目标调试页面为目标网页动画中第1帧对应的调试页面，而目标用户需要对目标网页动画中第3帧对应
的网页绘图进行调试，通过针对第1帧的切换操作(例如当前展示的为目标网页动画中第1帧对应的调试页面，用户可以点击第3帧对应的缩略图，或拖动进度条至第3帧)，生成对目标网页动画中第3帧的调试触发指令，进而计算机能够响应于该切换操作，将上述的第3帧作为上述的目标帧，展示第3帧对应的调试页面。
82.在现有技术中若需要对canvas网页动画中的某一帧进行调试，则需要在原始指令集中确定该帧对应的指令，若需要对两个间隔较远的帧进行调试费时费力，本技术通过响应于针对上述目标帧的切换操作，将切换后的帧作为上述的目标帧，将上述目标帧对应的调试页面作为该目标调试页面并展示该目标调试页面，能够直观清楚地展示网页动画中各帧对应的调试页面，且能够迅速进行相应帧的切换，有利于灵活高效地对网页动画进行调试。
83.在本技术实施例中，当上述的目标网页绘图包括目标网页动画中的目标帧对应的网页绘图时，该目标调试页面可以包括该目标帧对应的调试页面，该目标调试页面可以包括原始绘制节点信息和对应的原始绘制结果信息，且上述的原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的。此时s401获取目标原始绘制指令集可以包括：
84.1)对上述目标网页动画对应的全部原始绘制指令进行数据截取。
85.在实际应用中，由于网页动画可能包括较多帧，或为不断循环的动画，可以根据实际调试需求对上述目标网页动画对应的全部原始绘制指令进行数据截取，得到上述目标网页动画中至少一个待调试的帧(例如该目标网页动画中的1～4帧)对应的原始绘制指令集，进而有利于得到需要的调试页面。
86.在一个具体的实施例中，上述的对上述目标网页动画对应的全部原始绘制指令进行数据截取可以包括：运行上述目标网页动画对应的代码信息，根据调试需求利用预设录制工具对上述运行的目标网页动画对应的代码信息进行录制(例如录制该目标网页动画中的1～4帧对应的原始绘制指令集)。在对上述目标网页动画对应的全部原始绘制指令进行数据截取后，可以基于预设绘制数据映射关系对截取的数据进行数据解析，预先生成各帧对应的原始绘制节点信息。
87.2)获取该目标帧对应的原始绘制指令集，将该目标帧对应的原始绘制指令集作为上述的目标原始绘制指令集。
88.在本技术实施例中，上述获取该目标帧对应的原始绘制指令集可以包括：当录制到该目标帧对应的原始绘制指令集时，调用绘制指令，创建帧窗口并存储该目标帧对应的原始绘制指令集，然后，可以基于预设绘制数据映射关系对该目标原始绘制指令集进行数据解析，生成原始绘制节点信息。在实际应用中，也可以预先依次对录制的每一帧对应的原始绘制指令集进行数据解析，并存储在二维序列中，该二维序列的第1维可以用于存储录制的帧的标识，第二维可以用于存储与各帧对应的所有绘制节点及节点属性信息，合理有序地对各帧对应的绘制节点信息进行存储，有利于后续响应于针对所述目标帧的切换操作迅速更换展示的调试页面，提升网页绘图调试的灵活性和效率。
89.通过对上述目标网页动画对应的全部原始绘制指令进行数据截取，预先生成各帧对应的原始绘制节点信息，有利于提升网页绘图调试的灵活性和效率。
90.s203：响应于调试指令，确定该调试指令对应的调试信息。
91.在本技术实施例中，该调试指令可以为目标用户结合实际网页绘图调试需求在上述目标调试页面中对上述原始绘制节点信息进行的操作指令，请参照图3所示的目标调试页面，目标用户可以结合实际操作需求在该目标调试页面中进行调试操作，例如，调整绘制节点的排列顺序(以调整绘制操作的先后顺序，影响节点覆盖情况)、删除或隐藏绘制节点、复制并添加绘制节点、修改绘制节点的节点属性信息(例如字体、填充颜色等)。响应于调试指令，可以确定该调试指令对应的调试信息，上述对应的调试信息可以包括但不限于例如节点顺序调整信息、节点属性修改信息、节点添加信息。
92.通过响应于目标网页绘图的调试触发指令，展示目标调试页面，且目标调试页面中的原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的，将原始绘制指令集中的操作信息抽象为结构清晰的可视化绘制节点，进而能够响应于调试指令，确定该调试指令对应的调试信息，有利于用户快速准确地根据调试需求进行待调试操作的定位，并且，用户能够直接在上述目标调试页面中对上述原始绘制节点信息进行可视化操作以实现相应的网页绘图调试，无需对照复杂的原始代码进行核对修改，大大提升网页绘图调试的可靠性、灵活性和效率。
93.s205：基于上述对应的调试信息更新上述的原始绘制节点信息，得到更新绘制节点信息。
94.在本技术实施例中，上述的基于上述的调试信息更新上述的原始绘制节点信息，得到更新绘制节点信息可以包括：
95.1)根据上述的调试信息确定上述原始绘制节点信息中的待更新绘制节点；
96.在一个实施例中，上述的调试信息可以包括关联节点标识信息，进而能够根据关联节点标识信息确定上述原始绘制节点信息中的待更新绘制节点；例如，用户的调试操作为交换绘制节点a和绘制节点b的顺序，则上述的关联节点标识信息可以包括绘制节点a和绘制节点b，进而能够从上述原始绘制节点信息中确定绘制节点a和绘制节点b作为上述的待更新绘制节点。
97.通过根据上述的调试信息确定上述原始绘制节点信息中的待更新绘制节点，能够灵活高效地进行待更新节点的定位，提升网页绘图调试的效率。
98.2)根据上述的调试信息对上述的待更新绘制节点执行对应的调试操作，生成更新绘制节点信息。
99.在本技术实施例中，上述的调试信息还可以包括调试内容信息，在根据上述的调试信息确定上述原始绘制节点信息中的待更新绘制节点之后，还可以根据上述的调试内容信息对上述的待更新绘制节点执行对应的调试操作，生成更新绘制节点信息；在上面的实施例中，确定了绘制节点a和绘制节点b作为上述的待更新绘制节点，可以对其执行交换顺序的操作，生成更新绘制节点信息。
100.基于上述对应的调试信息更新上述的原始绘制节点信息，得到更新绘制节点信息时，还可以实时对上述的目标调试页面进行更新，展示上述的更新绘制节点信息，实现直观清楚的可视化操作展示，例如交换了两个绘制节点的顺序，可在如图3左侧的绘制节点列表中实时展示。
101.s207：基于上述的更新绘制节点信息更新上述对应的原始绘制结果信息。
102.通过基于上述的更新绘制节点信息更新上述对应的原始绘制结果信息，能够响应
于调试指令实时更新上述对应的原始绘制结果信息，在调试时直观清楚地展示新的绘制结果，提升网页绘图调试的灵活性。
103.请参照图8，在本技术实施例中，上述的基于上述的更新绘制节点信息更新上述对应的原始绘制结果信息可以包括：
104.s801：基于上述的更新绘制节点信息生成更新绘制指令集。
105.在一些实施例中，可以基于更新绘制节点信息对上述的原始绘制节点树进行更新，得到更新数据节点树，进而能够生成更新绘制指令集并触发重绘。
106.请参照图9，在本技术实施例中，在基于上述的更新绘制节点信息生成更新绘制指令集之后，上述方法还可以包括：
107.s901：响应于更新数据导出指令，输出上述的更新绘制指令集。
108.在本技术实施例中，上述的更新数据导出指令可以为用户结合实际应用需求发出的，例如，用户点击调试页面中的导出代码按键(例如图3和图7所示的目标调试页面中的导出代码按键)，生成上述的更新数据导出指令，进而计算机能够响应于更新数据导出指令输出上述的更新绘制指令集。
109.通过响应于更新数据导出指令，输出上述的更新绘制指令集，能够灵活高效地进行更新绘制指令集的导出，后续可以应用于例如其他网页绘图的开发中或进行数据留档，实现资源复用，减少时间和人力资源的消耗。
110.s803：基于该更新绘制指令集执行网页绘图重绘，对上述的原始绘制结果信息进行更新。
111.在本技术实施例中，可以基于上述的更新绘制指令集调用canvas api(application programming interface应用程序编程接口，用于在网页实时绘制图形，并且可以对图形元素进行交互操作的标准api)，利用调试绘制线程运行上述的更新绘制指令集，执行网页绘图重绘，对所述原始绘制结果信息进行更新。
112.s805：展示更新后的原始绘制结果信息。
113.图10是本技术实施例提供的一个展示更新后的原始绘制结果信息的页面示意图，此时用户的调试操作为交换了绘制节点“矩形1”(绘制结果信息展示区的长方形)和“图像1”(绘制结果信息展示区的图片标志)的排列顺序，原本是先绘制矩形1，再绘制图像1，后绘制图像1会覆盖于先绘制矩形1上方，经过该调试操作，可参照图10，左侧原始绘制节点信息展示区的节点排列顺序会根据调试操作相应改变，且能够更新上述的原始绘制结果信息，后绘制矩形1会覆盖于先绘制图像1上方。
114.通过基于上述的更新绘制节点信息生成更新绘制指令集，基于该更新绘制指令集执行网页绘图重绘，对上述的原始绘制结果信息进行更新，然后展示更新后的原始绘制结果信息，能够实时更新上述对应的原始绘制结果信息，在调试时直观清楚地展示更新后的原始绘制结果信息，提升网页绘图调试的灵活性。
115.由以上本技术实施例提供的技术方案可见，本技术实施例通过响应于目标网页绘图的调试触发指令，展示目标调试页面，且该目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息，能够直观清楚地获取调试信息和绘制结果，提升网页绘图调试的灵活性，无需对海量繁琐的指令进行对应修改。预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成原始绘制节点信息，利用该第一映射信息将原始绘制指令集
中的操作信息抽象为绘制节点，利用表征绘制样式指令与节点属性信息间的映射关系的第二映射信息，将复杂繁琐的绘制样式指令抽象映射为直观清楚的节点属性信息，能够将庞大繁琐的原始绘制指令集解析为结构清晰的原始绘制节点信息(可以包括绘制节点名称、属性、排列顺序等)，进而有利于后续开发人员根据调试需求快速准确地进行待调试信息的定位并进行后续的网页绘图调试，大大提升网页绘图调试的灵活性和效率，进而能够响应于调试指令，确定该调试指令对应的调试信息，有利于用户快速准确地根据调试需求进行待调试操作的定位，并且，用户能够直接在上述目标调试页面中对上述原始绘制节点信息进行可视化操作以实现相应的网页绘图调试，无需对照复杂的原始代码进行核对修改，大大提升网页绘图调试的可靠性、灵活性和效率。通过基于上述的更新绘制节点信息更新上述对应的原始绘制结果信息，能够响应于调试指令实时更新上述对应的原始绘制结果信息，在调试时直观清楚地展示更新后的原始绘制结果信息，提升网页绘图调试的灵活性。
116.本技术实施例还提供了一种网页绘图调试装置，如图11所示，所述装置可以包括：
117.目标调试页面展示模块1110，用于响应于目标网页绘图的调试触发指令，展示目标调试页面，所述目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息；其中，所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的，所述预设绘制数据映射关系表征绘制指令与绘制节点信息间的映射关系；
118.调试信息确定模块1120，用于响应于调试指令，确定所述调试指令对应的调试信息；
119.绘制节点更新模块1130，用于基于所述对应的调试信息更新所述原始绘制节点信息，得到更新绘制节点信息；
120.绘制效果更新模块1140，用于基于所述更新绘制节点信息更新所述对应的原始绘制结果信息。
121.在一些实施例中，上述装置还可以包括：
122.原始绘制指令集获取模块，用于获取目标原始绘制指令集；
123.数据解析模块，用于基于所述预设绘制数据映射关系对所述目标原始绘制指令集进行数据解析，得到至少一个绘制节点和对应的节点属性信息；
124.节点信息生成模块，用于基于所述至少一个绘制节点和对应的节点属性信息生成所述原始绘制节点信息。
125.具体地，上述的预设绘制数据映射关系包括第一映射信息和第二映射信息，上述数据解析模块可以包括：
126.目标绘制执行指令确定单元，用于从所述目标原始绘制指令集中确定目标绘制执行指令；
127.绘制节点类型确定单元，用于基于所述第一映射信息确定所述目标绘制执行指令对应的绘制节点类型，所述第一映射信息表征绘制执行指令与绘制节点类型的映射关系；
128.绘制节点创建单元，用于基于所述目标绘制执行指令对应的绘制节点类型创建目标绘制节点；
129.样式指令确定单元，用于从所述目标原始绘制指令集中确定与所述目标绘制执行指令对应的绘制样式指令；
130.节点属性确定单元，用于基于所述与所述目标绘制执行指令对应的绘制样式指令
和所述第二映射信息确定所述目标绘制节点对应的节点属性信息，所述第二映射信息表征绘制样式指令与节点属性信息间的映射关系。
131.在一个实施例中，上述的绘制节点更新模块1130可以包括：
132.待更新绘制节点确定单元，用于根据所述调试信息确定所述原始绘制节点信息中的待更新绘制节点；
133.更新绘制节点信息生成单元，用于根据所述调试信息对所述待更新绘制节点执行对应的调试操作，生成更新绘制节点信息。
134.在一个实施例中，当所述目标网页绘图包括目标网页动画中的目标帧对应的网页绘图时，上述的目标调试页面展示模块1110可以包括：
135.目标帧确定单元，用于响应于针对所述目标帧的切换操作，将切换后的帧作为所述目标帧；
136.目标调试页面确定单元，用于将所述目标帧对应的调试页面作为所述目标调试页面；
137.目标调试页面展示单元，用于展示所述目标调试页面。
138.在一个实施例中，上述的绘制效果更新模块1140可以包括：
139.更新绘制指令集生成单元，用于基于所述更新绘制节点信息生成更新绘制指令集；
140.重绘单元，用于基于所述更新绘制指令集执行网页绘图重绘，对所述原始绘制结果信息进行更新；
141.更新结果展示单元，用于展示更新后的原始绘制结果信息。
142.在一个实施例中，上述装置还可以包括：
143.更新绘制指令集导出模块，用于在基于所述更新绘制节点信息生成更新绘制指令集之后，响应于更新数据导出指令，输出所述更新绘制指令集。
144.所述的装置实施例中的装置与方法实施例基于同样地申请构思。
145.本技术实施例提供了一种电子设备，该电子设备包括处理器和存储器，该存储器中存储有至少一条指令或至少一段程序，该至少一条指令或该至少一段程序由该处理器加载并执行以实现如上述方法实施例所提供的网页绘图调试方法。
146.存储器可用于存储软件程序以及模块，处理器通过运行存储在存储器的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、功能所需的应用程序等；存储数据区可存储根据所述电子设备的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器还可以包括存储器控制器，以提供处理器对存储器的访问。
147.本技术实施例所提供的方法实施例可以在移动终端、计算机终端、服务器或者类似的运算装置中执行，即上述电子设备可以包括移动终端、计算机终端、服务器或者类似的运算装置。其中，上述的服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、cdn、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音
箱、智能手表等，但并不局限于此。以运行在客户端上为例，图12是本技术实施例提供的一种客户端的结构示意图，如图12所示，该客户端可以用于实施上述实施例中提供的网页绘图调试方法。具体来讲：
148.上述客户端可以包括rf(radio frequency，射频)电路1210、包括有一个或一个以上计算机可读存储介质的存储器1220、输入单元1230、显示单元1240、传感器1250、音频电路1260、wifi(wireless fidelity，无线保真)模块1270、包括有一个或者一个以上处理核心的处理器1280、以及电源1290等部件。本领域技术人员可以理解，图12中示出的客户端结构并不构成对客户端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：
149.rf电路1210可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器1280处理；另外，将涉及上行的数据发送给基站。通常，rf电路1210包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(sim)卡、收发信机、耦合器、lna(low noise amplifier，低噪声放大器)、双工器等。此外，rf电路1210还可以通过无线通信与网络和其他客户端通信。所述无线通信可以使用任一通信标准或协议，包括但不限于gsm(global system of mobile communication，全球移动通讯系统)、gprs(general packet radio service，通用分组无线服务)、cdma(code division multiple access，码分多址)、wcdma(wideband code division multiple access,宽带码分多址)、lte(long term evolution,长期演进)、电子邮件、sms(short messaging service，短消息服务)等。
150.存储器1220可用于存储软件程序以及模块，处理器1280通过运行存储在存储器1220的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器1220可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、功能所需的应用程序等；存储数据区可存储根据所述客户端的使用所创建的数据等。此外，存储器1220可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器1220还可以包括存储器控制器，以提供处理器1280和输入单元1230对存储器1220的访问。
151.输入单元1230可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元1230可包括触敏表面1231以及其他输入设备1232。触敏表面1231，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面1231上或在触敏表面1231附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面1231可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器1280，并能接收处理器1280发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面1231。除了触敏表面1231，输入单元1230还可以包括其他输入设备1232。具体地，其他输入设备1232可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
152.显示单元1240可用于显示由用户输入的信息或提供给用户的信息以及所述客户
端的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元1240可包括显示面板1241，可选的，可以采用lcd(liquid crystal display，液晶显示器)、oled(organic light-emitting diode,有机发光二极管)等形式来配置显示面板1241。进一步的，触敏表面1231可覆盖显示面板1241，当触敏表面1231检测到在其上或附近的触摸操作后，传送给处理器1280以确定触摸事件的类型，随后处理器1280根据触摸事件的类型在显示面板1241上提供相应的视觉输出。其中，触敏表面1231与显示面板1241可以两个独立的部件来实现输入和输入功能，但是在某些实施例中，也可以将触敏表面1231与显示面板1241集成而实现输入和输出功能。
153.所述客户端还可包括至少一种传感器1250，比如光传感器、运动传感器以及其他传感器。
154.音频电路1260、扬声器1261，传声器1262可提供用户与所述客户端之间的音频接口。
155.wifi属于短距离无线传输技术，所述客户端通过wifi模块1270可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图12示出了wifi模块1270，但是可以理解的是，其并不属于上述客户端的必须构成，完全可以根据需要在不改变申请的本质的范围内而省略。
156.处理器1280是所述客户端的控制中心，利用各种接口和线路连接整个客户端的各个部分，通过运行或执行存储在存储器1220内的软件程序和/或模块，以及调用存储在存储器1220内的数据，执行所述客户端的各种功能和处理数据，从而对客户端进行整体监控。可选的，处理器1280可包括一个或多个处理核心；优选的，处理器1280可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1280中。
157.所述客户端还包括给各个部件供电的电源1290(比如电池)，优选的，电源可以通过电源管理系统与处理器1280逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源1290还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
158.尽管未示出，上述客户端还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，客户端的显示单元是触摸屏显示器，客户端还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行本技术中方法实施例中的指令。
159.本技术的实施例还提供了一种计算机可读存储介质，所述存储介质可设置于服务器之中以保存用于实现方法实施例中一种网页绘图调试方法相关的至少一条指令或至少一段程序，该至少一条指令或该至少一段程序由该处理器加载并执行以实现上述方法实施例提供的网页绘图调试方法。
160.可选地，在本实施例中，上述存储介质可以位于计算机网络的多个网络服务器中的至少一个网络服务器。可选地，在本实施例中，上述存储介质可以包括但不限于：u盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
161.本技术的实施例还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述的各种可选实现方式中提供的方法。
162.由上述本技术提供的网页绘图调试方法、装置、电子设备、存储介质或计算机程序的实施例可见，本技术中通过响应于目标网页绘图的调试触发指令，展示目标调试页面，且该目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息，能够直观清楚地获取调试信息和绘制结果，提升网页绘图调试的灵活性，无需对海量繁琐的指令进行对应修改。预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成原始绘制节点信息，利用该第一映射信息将原始绘制指令集中的操作信息抽象为绘制节点，利用表征绘制样式指令与节点属性信息间的映射关系的第二映射信息，将复杂繁琐的绘制样式指令抽象映射为直观清楚的节点属性信息，能够将庞大繁琐的原始绘制指令集解析为结构清晰的原始绘制节点信息(可以包括绘制节点名称、属性、排列顺序等)，进而有利于后续开发人员根据调试需求快速准确地进行待调试信息的定位并进行后续的网页绘图调试，大大提升网页绘图调试的灵活性和效率，进而能够响应于调试指令，确定该调试指令对应的调试信息，有利于用户快速准确地根据调试需求进行待调试操作的定位，并且，用户能够直接在上述目标调试页面中对上述原始绘制节点信息进行可视化操作以实现相应的网页绘图调试，无需对照复杂的原始代码进行核对修改，大大提升网页绘图调试的可靠性、灵活性和效率。通过基于上述的更新绘制节点信息更新上述对应的原始绘制结果信息，能够响应于调试指令实时更新上述对应的原始绘制结果信息，在调试时直观清楚地展示更新后的原始绘制结果信息，提升网页绘图调试的灵活性。
163.需要说明的是：上述本技术实施例先后顺序仅仅为了描述，不代表实施例的优劣。且上述对本技术特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
164.本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备和存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
165.本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
166.以上所述仅为本技术的较佳实施例，并不用以限制本技术，凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。