CN110554950B - 一种界面调试方法、装置及存储介质 - Google Patents
一种界面调试方法、装置及存储介质 Download PDFInfo
- Publication number
- CN110554950B CN110554950B CN201810540038.6A CN201810540038A CN110554950B CN 110554950 B CN110554950 B CN 110554950B CN 201810540038 A CN201810540038 A CN 201810540038A CN 110554950 B CN110554950 B CN 110554950B
- Authority
- CN
- China
- Prior art keywords
- node
- tree
- target page
- information
- target
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000011161 development Methods 0.000 claims description 94
- 238000013515 script Methods 0.000 claims description 32
- 230000004048 modification Effects 0.000 claims description 11
- 238000012986 modification Methods 0.000 claims description 11
- 230000008859 change Effects 0.000 claims description 6
- 230000004044 response Effects 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 5
- 238000002347 injection Methods 0.000 claims description 4
- 239000007924 injection Substances 0.000 claims description 4
- 238000004891 communication Methods 0.000 description 14
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 8
- 230000008569 process Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000000717 retained effect Effects 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 239000007787 solid Substances 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000000243 solution Substances 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Debugging And Monitoring (AREA)
Abstract
本申请提供了一种界面调试方法，应用于第一设备，包括：获取目标页面的第一节点树信息，并将所述第一节点树信息发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息；根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取所述目标节点的第一样式规则信息，并将所述目标节点的第一样式规则信息返回至所述第二设备；以及根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息。
Description
技术领域
本申请涉及信息技术领域，尤其涉及一种界面调试方法、装置及存储介质。
背景技术
当前，在不同的操作系统下的应用客户端上的页面由不同的浏览器内核来渲染的，比如，微信小程序在苹果公司的IOS(Iphone OS)系统内的微信客户端上时，是由该系统下的浏览器内核比如WKWebview来渲染的，而在安卓(Andriod)系统内的微信客户端上时，是由基于安卓系统提供的浏览器内核比如Chrom53/57的X5内核来渲染的，由于不同的浏览器内核遵循不同的协议，因此，如何寻求一种跨平台的调试方法是亟待解决的问题。
发明内容
本申请的实施例提供了一种界面调试方法，应用于第一设备，包括：获取目标页面的第一节点树信息，并将所述第一节点树信息发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息；
根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取所述目标节点的第一样式规则信息，并将所述目标节点的第一样式规则信息返回至所述第二设备；以及
根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息。
本申请实施例还提供了一种界面调试装置，包括：
获取模块，获取目标页面的第一节点树信息；
发送模块，将所述第一节点树信息发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息；
所述获取模块，根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取所述目标节点的第一样式规则信息；
所述发送模块，将所述目标节点的第一样式规则信息返回至所述第二设备；
修改模块，根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息。
本申请实施例还提供了一种存储介质，存储有可读指令，可以使至少一个处理器执行上述界面调试方法。
本申请提供的技术方案，一方面通过在目标页面注入用于界面调试的脚本，可以屏蔽界面调试协议的差异，能够实现跨平台的界面调试，同时还可以使开发者无需手动进行调试，提高了调试的效率，节约了人力成本；另一方面通过建立的消息通道来发送信息，大大降低了远程调试的难度，避免了使用USB(Universal Serial Bus)调试线。此外，将第一节点树信息进行编辑可以使调试面板只展示目标页面的第二节点，可以方便界面调试，进一步提高调试的效率。
附图说明
图1为本申请一实施例的所述的一种界面调试方法的实施环境的示意图；
图2为本申请一实施例的一种界面调试方法的流程图；
图3A为本申请一实施例所述的本地调试的调试面板的一个示例；
图3B为本申请一实施例所述的调出远程调试的调试面板的一个示例；
图4为本申请一实施例所述的远程调试的调试面板的一个示例；
图5为本申请一实施例所述的本地调试的消息通道的示意图；
图6为本申请一实施例所述的远程调试的消息通道的示意图；
图7A为本申请一实施例所述的解析目标页面的样式标签的一个示例；
图7B为本申请一实施例所述的开发工具的调试面板上保留了原始的信息的一个示例；
图8A为本申请一实施例所述的在开发工具的调试面板上修改目标节点的样式规则信息的一个示例；
图8B为本申请一实施例所述的目标页面根据调试面板对目标节点的修改进行实时更新的示例；
图9A为本申请一实施例所述的在开发工具的调试面板上修改目标节点的样式规则信息的另一个示例；
图9B为为本申请一实施例所述的目标页面根据调试面板对目标节点的修改进行实时更新的另一示例；
图10为本申请一实施例所述的高亮目标节点的一个示例；
图11为本申请一实施例的界面调试方法的流程图；
图12A为本申请一实施例所述的描述目标页面的节点树信息的源码的一个示例；
图12B为本申请一实施例所述的目标页面第一节点树信息的一个示例；
图12C为本申请一实施例所述的将第一节点树信息编辑为第二节点树信息的一个示例；
图12D为本申请一实施例所述的编辑后的第二节点树信息的一个示例；
图13为本申请一实施例的界面调试方法的交互流程图；
图14为本申请一实施例的界面调试装置的结构示意图；及
图15为本申请一实施例的终端设备的硬件结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。
为了描述上的简洁和直观，下文通过描述若干代表性的实施例来对本发明的方案进行阐述。实施例中大量的细节仅用于帮助理解本发明的方案。但是很明显，本发明的技术方案实现时可以不局限于这些细节。为了避免不必要地模糊了本发明的方案，一些实施方式没有进行细致地描述，而是仅给出了框架。下文中，“包括”是指“包括但不限于”，“根据……”是指“至少根据……，但不限于仅根据……”。下文中没有特别指出一个成分的数量时，意味着该成分可以是一个也可以是多个，或可理解为至少一个。
目前，一些浏览器内置了调试面板，可以对运行在该浏览器上的网页页面进行界面调试，比如，chrome浏览器以及safri浏览器都内置了相应的Element面板，以对运行在chrome浏览器以及safri浏览器上的网页页面进行界面调试。
但是，现有的调试方法存在诸多限制，比如远程调试时需要使用USB作为消息通道或者要求调试面板所在的电脑以及客户端所在的移动终端在同一局域网的同一网段中、无法跨平台或者调试该网页页面时显示原始的节点树信息。
为了解决上述问题，本申请的实例提出了一种界面调试方法。该界面调试方法可以实现跨平台调试待调试的目标页面，并且在调试的过程中不使用USB连接线作为通讯通道，也不要求调试面板所在的终端设备以及目标页面的应用客户端所在的终端设备在同一局域网的同一网段中。
图1显示了本申请一些实施例所述的一种界面调试方法所适用的实施环境示意图。如图1所示，本申请一些实施例所述的界面调试方法的实施环境至少包括：第一设备11、网络12、第二设备13以及服务器14。
在本申请的一些实例中，上述第一设备11可以是指具有数据计算处理功能的智能设备，包括但不限于(安装有通信模块的)智能手机、掌上电脑、平板电脑等。第一设备11上安装有操作系统，包括但不限于：Android操作系统、Symbian操作系统、Windows mobile操作系统、以及苹果iPhone OS操作系统等等。第一设备11上安装有各种应用客户端，比如微信客户端。在本申请的一些实例中，第一设备11可以是待调试的目标页面的应用客户端101所在的设备终端。
网络12可以包括有线网络和无线网络。如图1所示，在接入网一侧，第一设备11和第二设备13可以通过无线的方式或者有线的方式接入到网络12；而在核心网一侧，服务器14一般是通过有线方式连接到网络12的。当然，上述服务器14也可以通过无线方式连接到网络12。
第二设备13可以个人电脑、笔记本等智能设备终端。在本申请的一些实例中，第二设备13可以是开发人员使用的开发工具所在的设备终端，其中，该开发工具上可以运行用于界面调试的调试面板，在本地调试时，也可以运行待调试的目标页面。
服务器14可以是一个网络通讯协议服务器，用于建立第一设备11上的待调试的目标页面所在的应用客户端和第二设备13上的调试面板所在的开发工具之间的消息通道。服务器14可以是单独的服务器也可以是多个服务器组成的服务器集群。
下面结合附图，通过几个实施例对本申请实例提供的界面调试方法进行说明。
基于上述图1所示的实施环境图，本申请的一个实施例提供了一种界面调试方法，通过第一设备11的应用客户端执行注入待调试的目标页面的脚本文件来实现。图2示出了本申请实例提供的界面调试方法的流程图。如图2所示，该界面调试方法包括以下步骤：
步骤201：获取目标页面的第一节点树信息，并将所述第一节点树信息发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息，其中，所述第一节点树信息描述了所述目标页面的第一节点集合以及各第一节点之间的第一树级关系，所述第二节点树信息描述了所述目标页面的第二节点集合以及各第二节点之间的第二树级关系，所述第一节点和所述第二节点为所述目标页面中的页面元素。
在本申请的一些实例中，界面调试可以分为本地调试和远程调试，其中，上述本地调试可以是指使用运行在第二设备的开发工具来调试运行在该开发工具上的应用客户端的目标页面，比如本地调试可以是指使用微信开发者工具来调试运行在该微信开发者工具上的微信小程序页面，因此，上述开发工具与上述目标页面所在的微信客户端都运行在第二设备上；上述远程调试可以是指使用运行在第二设备上的开发工具来调试运行在第一设备的应用客户端的目标页面，比如远程调试可以是指使用运行在第二设备上的微信开发者工具来调试运行在第一设备的微信客户端上的微信小程序页面。其中，上述开发工具运行在第二设备上，可以对应用客户端的目标页面进行界面调试，包括一个用于调试目标页面的调试面板，比如WXML(WeiXin Markup Language)面板。需要说明的是，本地调试时，上述目标页面和上述调试面板都运行在上述开发工具中。
图3A为本地调试的调试面板的示例。如图3A所示，本地调试的调试面板包括待调试的目标页面301、节点树面板302、样式规则信息面板303、操作面板304，并提供了远程调试按钮305。其中，目标页面301即为待调试的页面，节点树面板302用于显示目标页面301的节点树信息，样式规则信息面板303用于显示目标节点的样式规则信息，操作面板304用于显示当前操作相关的信息比如显示远程调试的电子化码等等。可以看出，本地调试时，目标页面301与调试面板包括的节点树面板302、样式面板303以及操作面板304在同一个操作界面上，都运行在开发工具中。
在一些实例中，当需要使用远程调试时，上述第二设备的上述开发工具响应于对本地调试的调试面板上提供的远程调试按钮的点击操作，在本地调试的调试面板上展示一个第一电子化码比如第一二维码，上述第一设备扫描该第一电子化码，展示远程调试的调试面板，即可开始进行远程调试，也即可以通过运行在第二设备的开发工具的远程调试的调试面板来调试运行在第一设备的目标页面。图3B为调出远程调试的操作界面的示例。如图3B所示，当需要远程调试时，开发工具响应于对本地调试的调试面板上提供的远程调试按钮305的点击操作，在本地调试的调试面板的操作面板304展示一个二维码306。上述第一设备扫描二维码306，上述第二设备展示远程调试的调试面板，也即可以开始远程调试，其中，远程调试的界面调试面板与本地调试的界面调试面板的功能是相同的。
图4为远程调试的调试面板的示例。如图4所示，远程调试的调试面板包括节点树面板401、样式规则信息面板402以及待调试的目标页面所在的第一设备的信息面板403，并提供了结束调试按钮404，并不包括图3B中所示的待调试的目标页面301以及操作面板304。该远程调试的调试面板可以实现本地调试的调试面板同样的功能。
在一些实例中，在远程调试时，在获取目标页面的第一节点树信息之前，第一设备的应用客户端将用于界面调试的脚本注入到所述目标页面中，运行所述用于界面调试的脚本来实现所述方法。同时第二设备将上述用于界面调试的脚本注入到开发工具的调试面板中，运行所述用于界面调试的脚本来实现所述方法。比如，可以由微信开发者工具或者微信客户端在开始调试之前，将用于界面调试的Javascript脚本注入到待调试的微信小程序页面中。在本地调试时，由于上述调试面板和上述目标页面都运行在上述第二设备的上述开发工具上，因此上述第二设备将上述用于界面调试的脚本注入到运行在开发工具上述目标页面中和上述调试面板中。通过注入用于界面调试的脚本，一方面使得开发人员无需手动操作，降低了使用难度，提高了调试的效率，另一方面，用于界面调试的脚本可以屏蔽不同系统下界面调试协议的差异，实现了跨平台的界面调试。
在一些实例中，在进行界面调试之前，还需要建立开发工具与应用客户端之间的消息通道。具体的，建立开发工具与应用客户端之间的消息通道分为本地调试时的消息通道和用于远程调试时的消息通道。通过建立开发工具与应用客户端之间的消息通道，可以实现通过该可靠的消息通道传输调试指令和事件，避免了使用USB调试线，使调试过程更加便捷高效。
在本地调试中，上述应用客户端的目标页面和上述开发工具的调试面板都运行在上述第二设备的上述开发工具中，上述开发工具的底层建立了一个基于网络通讯协议的本地服务器比如WebSocket本地服务器，上述目标页面和上述调试面板作为两个基于上述网络通讯协议的客户端来访问上述本地服务器，从而使上述目标页面和上述调试面板通过上述本地服务器进行通信，也即实现了上述目标页面和上述调试面板相互发送或接收调试指令和/或事件，因此建立起了上述目标页面与上述调试面板的消息通道。
图5示出了本地调试的消息通道的示意图。如图5所示，上述目标页面501以及上述调试面板502都运行在上述开发工具503上，上述开发工具503的底层建立了一个基于网络通讯协议(WebSocket)的本地服务器504。目标页面501与调试面板502作为两个基于网络通讯协议的客户端505访问本地服务器504，也即实现了上述目标页面501和上述调试面板502相互发送或接收调试指令和/或事件，也即本地服务器504作为了目标页面501和调试面板502的进行通信的消息通道。
在远程调试中，远程调试的目标页面运行在第一设备上的应用客户端，而调试面板运行在第二设备的开发工具上。因此在远程调试的过程中，需要建立一个目标页面所在的应用客户端与调试面板所在的开发工具之间的消息通道。应用客户端和开发工具可以利用部署在公网的服务器集群进行发送或接收调试指令和/或事件，也即将部署在公网的服务器集群作为了消息通道。
在一些实例中，上述第一设备扫描所述第二设备的开发工具上的调试面板所展示的第二电子化码，进入相应的调试房间，建立所述目标页面所在的应用客户端与所述调试面板所在的开发工具的所述消息通道；其中，服务器响应于所述开发工具发送的调试请求，为所述开发工具分配所述调试房间的标识以建立所述调试房间，生成包含所述调试房间的标识的所述电子化码，并将所述电子化码发送至所述开发工具以使所述调试面板展示所述电子化码，所述调试面板运行在所述开发工具上，其中，上述调试请求为用于开始调试的请求。
图6示出了远程调试的消息通道的示意图。如图6所示，远程调试的目标页面601运行在第一设备上的应用客户端603，而调试面板602运行在第二设备的开发工具604上。在公网部署了服务器集群605以作为目标页面601与调试面板602的消息通道。应用客户端603与开发工具604分别作为服务器集群605的客户端连接到这个部署于公网的服务器集群604，也即应用客户端603与开发工具604通过服务器集群605发送或接收调试指令和/或事件。更进一步的，远程调试时，调试面板602还可以作为一个客户端606来与本地服务器607进行通信，实现了本地服务器607与公网服务器集群604的复用。
因此，需要说明的是，在本地调试时，应用客户端运行在上述第二设备的上述开发工具上，步骤201～步骤203由运行在第二设备的上述开发工具执行。而在远程调试时，应用客户端运行在上述第一设备上，步骤201～步骤203由应用客户端所在的第一设备执行。
在一些实例中，对所述目标页面的每个节点赋予一个节点标识；从所述第一节点树中获取所述目标页面的所述第一树级关系，其中，所述第一树级关系表征了第一节点集合中节点的标识之间的第一层级关系，包括所述目标页面的所有节点的节点的标识；其中，所述目标页面的第一节点包括所述目标页面的原始节点和新增节点；所述目标页面的第二节点包括所述目标页面的所述新增节点；将获取的所述第一树级关系通过所述消息通道发送至所述第二设备。其中，所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述第一树级关系中不包含所述预设标识符的原始节点的标识，得到所述第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的所述第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。这里，上述原始节点为编写所述目标页面所使用的语言自带的节点，比如用于编写小程序的HTML5(HyperText Markup Language 5)自带的原始节点“div”等；上述新增节点是为了编写目标页面在原始节点基础上增加的节点，比如在使用HTML5编写小程序页面时，在HTML5自带的原始节点的基础上增加的节点。
具体的，第一设备的应用客户端对上述目标页面中的每个节点赋予一个节点标识，并获取上述目标页面的各个节点的第一树级关系，将获取的包括所述目标页面的每一个节点的所述节点标识的第一树级关系通过所述消息通道发送至所述第二设备。其中，该第一树级关系表征了该目标页面中各个节点之间的父子关系，比如一个节点是父节点和另一个节点是上述父节点的子节点。上述第二设备在接收到所述目标页面的节点的标识的所述第一树级关系以后，根据预设标识符比如“wx”将不包含该预设标识符的原始节点删除，保留用于实现上述目标页面的新增节点，并根据上述第一树级关系以及保留的上述新增节点建立上述第二树级关系。这样可以使上述第二设备上的调试面板上展示与页面脚本文件一致的节点信息，方便界面的调试。
步骤202：根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取到所述目标节点的第一样式规则信息，并将所述目标节点的第一样式规则信息返回至所述第二设备。
在一些实例中，所述第二设备响应于对所述第二节点树信息中一个节点的选取操作，将所述节点作为所述目标节点，并将所述目标节点的标识发送给上述第一设备。上述第一设备在接收到上述目标节点的标识之后，解析所述目标页面的样式标签，得到所述目标页面样式标签的文本信息；根据所述目标页面的样式标签的文本信息生成所述目标页面的样式规则信息表；根据所述目标节点的标识，从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息。具体的，第一设备解析所述目标页面的样式标签，得到所述目标页面的样式标签的文本信息，比如解析得到该目标页面的<style/>标签对应的innerText，再根据所述目标页面的样式标签的文本信息生成所述目标页面的样式规则信息表，比如将解析上述样式标签得到的innerText生成Json格式的数据结构表也即样式规则信息表，该表中保留了原始的样式信息比如错误的样式规则信息，及其在上述样式标签的文本信息中的位置信息；根据所述目标节点的标识，从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息，比如使用DOM的matches方法从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息。
在一些实例中，所述第一样式规则信息包括第一样式取值和/或第一文本信息，并且每一个样式具有一个唯一的标识。比如一个节点的关于尺寸的样式的标识为“A”，则其第一样式规则信息为第一样式取值。又由于该样式具有宽和高两种样式属性，该节点的第一样式规则信息，也即第一样式取值为宽为50个像素，高为30个像素，又例如，一个节点的关于文本信息的样式的标识为“C”，则其第一样式规则信息为第一文本信息，其对应的第一样式规则信息也即第一文本信息为“以下将展示小程序官方组件的能力，组件样式仅为参考”。更进一步的，不同的节点可以具有同一个样式的标识，比如节点1和节点2的关于尺寸的样式的标识都可以为“A”，而不同的节点也可以具有同类型的不同的样式的标识，比如节点1的关于尺寸的样式的标识为“A”，而节点2的关于尺寸的样式的标识为“B”。
图7A为解析目标页面的样式标签的一个示例。如图7A所示，通过文本解析的方式解析得到目标页面的样式标签的文本信息701，可以看出该文本信息701包括了样式的标识为“a”702的有用的样式规则信息703并同时保留了原始的样式规则信息704并将该本文信息701进一步生成样式规则信息表707，样式规则信息表里面包括样式规则信息703和704在样式标签中的位置信息705和706。
图7B第二设备的开发工具的调试面板上保留了原始的信息的一个示例。如图7B所示，调试面板708上保留了原始的样式规则信息，比如除了保留正确的样式规则信息709以外还保留了错误的样式规则信息710。
步骤203：根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息，所述第二节点树信息中所述一个或多个节点具有所述被修改的样式的标识。
在一些实例中，所述第一样式规则信息包括第一样式取值和/或第一文本信息；所述第二样式规则信息包括第二样式取值和/或第二文本信息；所述第二设备在开发工具的调试面板上将所述目标节点的一个样式的所述第一样式规则信息修改为所述第二样式规则信息，然后将被修改的样式的标识以及上述第二样式规则信息发送至第一设备。第一设备接收上述第二设备上开发工具的调试面板发送的被修改的样式的标识比如关于尺寸的样式的标识“B”以及第二样式规则信息，则将所述目标页面的第二节点树信息中具有所述样式标识的一个或多个节点的所述第一样式取值和/或第一文本信息修改为第二样式取值和/或第二文本信息，所述一个或多个节点具有所述被修改的样式的标识。更进一步的，根据所述第二样式取值和/或第二文本信息更新所述目标页面的样式标签。
例如，上述第二节点树信息中共有四个节点：所述目标节点、节点1、节点2以及节点3，所述目标节点、上述节点2以及上述节点3的关于尺寸的样式的标识为B，第一样式规则信息为：宽为50个像素、高为30个像素；而上述节点1的关于尺寸的样式的标识为A，第一样式规则信息为：宽为50个像素、高为90个像素。上述第二设备的调试面板将目标节点的第一样式规则信息由宽为50个像素、高为30个像素修改为第二样式规则信息宽为60个像素、高为30个像素，并将上述目标节点被修改的样式的标识“B”以及第二样式规则信息发送至第一设备的应用客户端。上述第一设备的应用客户端在接收到上述修改的样式的标识“B”以及第二样式规则信息之后，将上述第二节点树信息中具有样式的标识“B”的上述节点2以及上述节点3的第一样式规则信息由宽为50个像素、高为30个像素修改为第二样式规则信息宽为60个像素、高为30个像素。
图8A为使用在开发工具的调试面板上修改目标节点的样式规则信息的一个示例，这里，上述样式规则信息为目标节点的文本信息。如图8A所示，在节点树面板801上，将目标节点view.Index-desc(802)的样式的标识为“C”的样式的样式规则信息803修改为“以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档”，并将该样式的标识以及修改的样式规则信息803发送给第一设备的应用客户端，以使目标页面对该目标页面内具有样式的标识为“C”的节点进行相应的更新。
图8B为目标页面根据调试面板对目标节点的修改进行实时更新的示例。如图8B所示，目标页面805接收到第二设备的调试面板所在的开发工具发送的样式的标识以及修改的样式规则信息，对该目标页面805内具有样式的标识为“C”的节点的样式规则信息804也即本文信息进行了修改，这里只有目标节点view.Index-desc(802)的样式的标识为“C”，因此对其样式规则信息804也即文本信息进行了修改。
图9A为使用在开发工具的调试面板上修改目标节点的样式规则信息的另一个示例，这里，上述样式规则信息为目标节点的样式取值。如图9A所示，在节点树面板901上，将目标节点view.Index-desc(902)的样式的标识为“B”的样式的样式规则信息903也即样式取值修改为“background:red”，也即将目标节点view.Index-desc(902)的背景修改为红色。并将该样式的标识以及修改的样式规则信息903也即样式取值发送给第一设备的应用客户端，以使目标页面905对该目标页面905内具有样式的标识为“B”的节点进行相应的更新。
图9B为目标页面根据调试面板对目标节点的修改进行实时更新的另一示例。如图9B所示，目标页面905接收到第二设备的调试面板所在的开发工具发送的样式的标识以及修改的样式规则信息，对该目标页面905内具有样式的标识为“B”的节点的样式规则信息904进行了修改，这里只有目标节点view.Index-desc(902)的样式的标识为“B”，因此对其样式规则信息904进行了修改，也即使目标节点view.Index-desc(902)的背景修改为了红色(如斜线阴影部分)。
在一些实例中，调用监听函数，监听所述目标页面中所述第二节点树信息中所述目标节点的样式规则信息的变化，其中，响应于用户请求，所述目标页面中所述第二节点树信息中所述目标节点的样式规则信息发生变化；当监听到所述第二节点树信息中所述目标节点的样式规则信息发生变化时，将所述发生变化的所述目标节点的标识、样式的标识以及变化后的样式规则信息返回所述第二设备以使其更新。
例如，用户点击目标页面中的一个控件，发起对另外一个页面的请求，此时，上述目标页面上会显示一个等待标识的节点，此时，目标页面的节点树级关系以及节点的样式规则信息发生了变化。
在一些实例中，在远程调试时，根据第二设备发送的所述目标节点的标识，创建一个与所述目标节点同等大小的透明的控件，并叠加在所述目标页面上的所述目标节点上，以使所述目标节点高亮显示，其中，所述第二设备的输入设备的位置在所述目标节点处，上述输入设备的位置为上述输入设备在上述调试面板中的位置。
具体的，上述开发工具获取上述第二设备的鼠标在上述调试面板中的位置，根据该位置获取与该位置对应的第二节点的标识并将该第二节点的标识发送至第一设备的应用客户端。该应用客户端在接收到上述第二节点的标识以后，创建一个与所述第二节点同等大小的透明的控件比如创建一个与所述第二节点同等大小的透明的遮罩“View”，并叠加在上述第二节点上，进而实现了上述第二节点的高亮显示。
在一些实例中，在本地调试时，根据所述第二设备的输入设备的位置，创建一个与所述目标节点同等大小的透明的高亮节点，并将所述高亮节点叠加在所述目标页面上的所述目标节点上，以使所述目标节点高亮。具体的，由于本地调试时，目标页面也运行在开发工具上，因此根据所述第二设备的鼠标的在上述调试面板的位置，创建一个与所述目标节点同等大小的透明的高亮节点，并将所述高亮节点叠加在所述目标节点上，以使所述目标节点高亮。
图10为高亮目标节点的一个示例。当鼠标在调试面板上移动的时候，可以在上述目标页码上实时高亮鼠标位置对应的节点。仍以图9中的目标节点view.Index-desc为例，如图10所示，当调试面板上鼠标的位置位于目标节点view.Index-desc处，目标页面所在的应用客户端则根据该目标节点的标识，创建一个与所述目标节点同等大小的透明的控件比如创建一个与所述节点同等大小的透明的遮罩“View”(1001)，并叠加在上述目标节点上，进而实现了上述目标节点的高亮显示。当本地调试时，开发工具根据所述第二设备的第二输入设备的位置，创建一个与所述目标节点同等大小的透明的高亮节点(1001)，并将所述高亮节点(1001)叠加在所述目标节点上，进而实现了上述目标节点的高亮显示。
图11示出了本申请实例提供的界面调试方法的流程图，由第二设备13执行。如图11所示，该界面调试方法包括以下步骤：
步骤1101：接收第一设备发送的目标页面的第一节点树信息，对所述第一节点树信息进行编辑以得到所述目标页面的第二节点树信息。
在一些实例中，第二设备的开发工具接收第一设备发送的目标页面的第一节点树信息之前，需要与第一设备的应用客户端建立消息通道。具体的，第二设备上的开发工具向服务器发送调试请求，以使所述服务器响应于所述调试请求，为所述开发工具分配调试房间的标识以建立调试房间，生成包含所述调试房间的标识的所述第二电子化码，并返回所述第二电子化码至上述开发工具；接收并展示所述第二电子化码，以使所述第一设备上所述目标页面的客户端扫描所述第二电子化码，进入所述调试房间；建立与所述第一设备的目标页面所在的应用客户端的消息通道。
具体的，当开发人员需要调试目标页面时，需要请求服务器分配一个调试房间，因此向服务器发送调试请求。服务器响应于第二设备的开发工具发送的调试请求，为第二设备的开发工具分配一个调试房间的标识进而建立与上述调试房间的标识对应的调试房间，生成一个含有上述调试房间的标识的第二电子化码比如二维码，并返回所述第二电子化码至第二设备的开发工具的调试面板上，以使所述第一设备上所述目标页面的应用客户端扫描所述第二电子化码，进入所述调试房间；建立与所述第一设备的目标页面的消息通道以与所述第一设备上所述目标页面的应用客户端进行通信。
在一些实例中，上述第一设备将获取的包括所述目标页面的每一个节点的所述节点标识的第一树级关系通过所述消息通道发送至所述第二设备，所述第一树级关系表征了第一节点集合中节点的标识之间的第一层级关系。所述目标页面的第一节点中包括所述目标页面的原始节点和新增节点；所述目标页面的第二节点包括所述目标页面的所述新增节点。所述第二设备在接收到第一树级关系后，所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述目标页面第一树级关系中所述节点标识不包含所述预设标识符的原始节点的标识，得到所述目标页面第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的所述第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。具体的，上述第二设备的开发工具根据预设标识符，删除所述目标页面中所述节点标识不包含所述预设标识符的原始节点，得到所述目标页面中的所述新增节点，并根据所述第一树级关系以及所述新增节点，生成所述目标页面的第二树级关系。其中，该第一树级关系表征了该目标页面中各个节点之间的父子关系，比如一个节点是父节点和另一个节点是上述父节点的子节点。上述第一节点树信息为所述目标页面的各个节点的第一树级关系，其中包括原始节点和新增节点。其中，上述原始节点为编写所述目标页面所使用的语言自带的节点，比如HTML语言的div节点为原始节点；上述新增节点是为编写目标页面在原始节点的基础上添加的节点，比如为编写微信小程序而在HTML语言的原始节点的基础上添加的小程序的节点。
图12A为描述目标页面的节点树信息的源码的一个示例。如图12A所示，该目标页面中，在节点swiper(1201)下面有三个子节点swiper-item(1202)。
对应于图12A所示的上述目标页面的源码，图12B示出了上述目标页面的与之对应的第一节点树信息。如图12B所示，该目标页面中包括原始节点的节点树信息1203以及为了描述目标页面在原始节点的基础上添加的新增节点的节点树信息1204。
上述第二设备的开发工具在接收到第一设备发送的第一节点树信息以后，所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述第一树级关系中不包含所述预设标识符的原始节点的标识，得到所述第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的所述第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。
图12C为上述第二设备的开发工具使用最小树算法将第一节点树信息编辑为第二节点树信息的示例。如图12C所示，第一节点树中包括原始基点1205以及新增节点1206，并且表征出了由原始基点1205以及新增节点1206组成的第一树级关系1207，第一树级关系1207表征了原始基点1205以及新增节点1206的节点的标识之间的第一层级。可以看出，新增节点1206的节点的标识中包含有“wx”，而原始节点1206的标识都不包括“wx”，因此，可以根据预设标识符“wx”，删除第一节点树中节点的标识不包括预设标识符的原始节点，再根据图12C中所示的虚线，建立由新增节点1206组成的第二树级关系1208，可以看出所述第二树级关系1208表征了保留的新增节点1206的节点的标识之间的第二层级。
图12D为调试面板展示编辑后的第二节点树信息的示例。如图12D所示，经过编辑的第二节点树信息中只包括了三个新增节点的节点树信息1209。
步骤1102：响应于对所述第二节点树信息中一个节点的选取操作，将所述节点作为所述目标节点并将所述目标节点的标识通过所述消息通道发送至第一设备，以得到所述目标节点的第一样式规则信息。
步骤1103：将所述目标节点的一个样式的所述第一样式规则信息修改为所述第二样式规则信息，并所述目标节点被修改的样式的标识以及所述第二样式规则信息通过所述消息通道返回至上述第一设备。
如前所述，第一设备解析所述目标页面的样式标签得到了文本信息，根据文本信息生成了所述目标页面的样式规则信息表。更进一步的，上述第一设备将上述文本信息以及上述目标页面的样式规则信息表发送上述第二设备。该样式规则信息表中保留了原始信息，比如错误的样式规则信息，同时包括了各个样式规则信息及其在样式标签的文本信息中的位置信息因此，第二设备的开发工具的调试面板已经知道样式规则信息在哪个样式标签的哪一个位置。在修改样式的样式规则信息时，可以直接找到样式标签的文本信息中对应的位置进行修改替换，从而达到修改的目的。
通过本申请的技术方案，一方面通过在目标页面注入用于界面调试的脚本，可以屏蔽界面调试协议的差异，能够实现跨平台的界面调试，同时还可以使开发者无需手动进行调试，提高了调试的效率，节约了人力成本；另一方面通过建立的消息通道来发送信息，大大降低了远程调试的难度，避免了使用USB调试线。此外，将第一节点树信息进行编辑可以使调试面板只展示目标页面的第二节点，可以方便界面调试，进一步提高调试的效率。
下面结合附图，对上述界面调试方法进行详细说明。该方法应用于如图1所示的实施环境。图13为上述界面调试方法的交互流程图，如图13所示，该方法主要包括以下步骤：
步骤1301：第一设备的应用客户端将用于界面调试的脚本注入到待调试的目标页面中。
步骤1302：第二设备的开发工具将上述用于界面调试的脚本注入到调试面板中。
步骤1303：第二设备的开发工具向服务器发送调试请求。
在本地调试中，上述应用客户端的目标页面和上述开发工具的调试面板都运行在上述第二设备的上述开发工具中，上述开发工具的底层建立了一个基于网络通讯协议的本地服务器比如WebSocket本地服务器，上述目标页面和上述调试面板作为两个基于上述网络通讯协议的客户端来访问上述本地服务器，从而使上述目标页面和上述调试面板通过上述本地服务器进行通信，也即实现了上述目标页面和上述调试面板相互发送或接收调试指令和/或事件，因此建立起了上述目标页面与上述调试面板的消息通道。
步骤1304：服务器响应于为所述开发工具分配所述调试房间的标识以建立所述调试房间，生成包含所述调试房间的标识的所述电子化码，并将所述电子化码发送至第二设备的述开发工具。
步骤1305：第二设备的开发工具接收上述电子化码并将上述电子化码展示在上述开发工具的调试面板上。
步骤1306：第一设备扫描所述第二设备的调试面板上展示的第二电子化码，进入调试房间，建立所述目标页面与所述调试面板的所述消息通道。
步骤1307：第一设备获取所述目标页面的第一节点树信息，并将所述第一节点树信息发送至第二设备，所述第一节点树信息描述了由所述目标页面的第一节点集合构成并表征了以及各第一节点之间的第一树级关系。
在一些实例中，对所述目标页面的每个节点赋予一个节点标识；从所述第一节点树中获取所述目标页面的所述第一树级关系，其中，所述第一树级关系表征了第一节点集合中节点的标识之间的第一层级关系，包括所述目标页面的所有节点的节点的标识；其中，所述目标页面的第一节点包括所述目标页面的原始节点和新增节点；所述目标页面的第二节点包括所述目标页面的所述新增节点；将获取的所述第一树级关系通过所述消息通道发送至所述第二设备。其中，所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述第一树级关系中不包含所述预设标识符的原始节点的标识，得到所述第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的所述第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。这里，上述原始节点为编写所述目标页面所使用的语言自带的节点，比如用于编写小程序的HTML5(HyperText Markup Language 5)自带的原始节点“div”等；上述新增节点是为了编写目标页面在原始节点基础上增加的节点，比如在使用HTML5编写小程序页面时，在HTML5自带的原始节点的基础上增加的节点。
具体的，第一设备的应用客户端对上述目标页面中的每个节点赋予一个节点标识，并获取上述目标页面的各个节点的第一树级关系，将获取的包括所述目标页面的每一个节点的所述节点标识的第一树级关系通过所述消息通道发送至所述第二设备。其中，该第一树级关系表征了该目标页面中各个节点之间的父子关系，比如一个节点是父节点和另一个节点是上述父节点的子节点。上述第二设备在接收到所述目标页面的节点的标识的所述第一树级关系以后，根据预设标识符比如“wx”将不包含该预设标识符的原始节点删除，保留用于实现上述目标页面的新增节点，并根据上述第一树级关系以及保留的上述新增节点建立上述第二树级关系。这样可以使上述第二设备上的调试面板上展示与页面脚本文件一致的节点信息，方便界面的调试。
步骤1308：第二设备接收第一设备发送的目标页面的第一节点树信息，对所述第一节点树信息进行编辑以得到所述目标页面的第二节点树信息，所述第二节点树信息描述了所述目标页面的第二节点集合以及各第二节点之间的第二树级关系。
在一些实例中，所述目标页面的第一节点包括所述目标页面的原始节点和新增节点；所述目标页面的第二节点包括所述目标页面的所述新增节点。所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述第一树级关系中不包含所述预设标识符的原始节点的标识，得到所述第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的所述第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。这里，上述原始节点为编写所述目标页面所使用的语言自带的节点，比如用于编写小程序的HTML5(HyperText MarkupLanguage 5)自带的原始节点“div”等；上述新增节点是为了编写目标页面在原始节点基础上增加的节点，比如在使用HTML5编写小程序页面时，在HTML5自带的原始节点的基础上增加的节点。
具体的，上述第二设备在接收到所述目标页面的节点的标识的所述第一树级关系以后，根据预设标识符比如“wx”编辑上述第一树级关系，以将不包含该预设标识符的原始节点删除，保留用于实现上述目标页面的新增节点，并根据编辑后的上述第一树级关系以及保留的上述新增节点建立上述第二树级关系。
步骤1309：响应于对所述第二节点树信息中一个节点的选取操作，上述第二设备将所述节点作为所述目标节点并将所述目标节点的标识通过所述消息通道发送至第一设备。
步骤1310：上述第一设备根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取到所述目标节点的第一样式规则信息，并将所述目标节点的第一样式规则信息返回至所述第二设备。
在一些实例中，上述第一设备在接收到上述目标节点的标识之后，解析所述目标页面的样式标签，得到所述目标页面样式标签的文本信息；根据所述目标页面的样式标签的文本信息生成所述目标页面的样式规则信息表；根据所述目标节点的标识，从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息。具体的，第一设备解析所述目标页面的样式标签，得到所述目标页面的样式标签的文本信息，比如解析得到该目标页面的<style/>标签对应的innerText，再根据所述目标页面的样式标签的文本信息生成所述目标页面的样式规则信息表，比如将解析上述样式标签得到的innerText生成Json格式的数据结构表也即样式规则信息表，该表中保留了原始的样式信息比如错误的样式规则信息，及其在上述样式标签的文本信息中的位置信息；根据所述目标节点的标识，从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息，比如使用DOM的matches方法从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息。
在一些实例中，所述第一样式规则信息包括第一样式取值和/或第一文本信息，并且每一个样式具有一个唯一的标识。比如一个节点的关于尺寸的样式的标识为“A”，则其第一样式规则信息为第一样式取值。又由于该样式具有宽和高两种样式属性，该节点的第一样式规则信息，也即第一样式取值为宽为50个像素，高为30个像素，又例如，一个节点的关于文本信息的样式的标识为“C”，则其第一样式规则信息为第一文本信息，其对应的第一样式规则信息也即第一文本信息为“以下将展示小程序官方组件的能力，组件样式仅为参考”。更进一步的，不同的节点可以具有同一个样式的标识，比如节点1和节点2的关于尺寸的样式的标识都可以为“A”，而不同的节点也可以具有同类型的不同的样式的标识，比如节点1的关于尺寸的样式的标识为“A”，而节点2的关于尺寸的样式的标识为“B”。
步骤1311：上述第二设备将所述目标节点的一个样式的所述第一样式规则信息修改为所述第二样式规则信息，并所述目标节点被修改的样式的标识以及所述第二样式规则信息通过所述消息通道返回至上述第一设备。
在一些实例中，所述第一样式规则信息包括第一样式取值和/或第一文本信息；所述第二样式规则信息包括第二样式取值和/或第二文本信息；将所述第二节点树信息中一个或多个节点的所述第一样式取值和/或第一文本信息修改为第二样式取值和/或第二文本信息；在将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息之后，根据所述第二样式取值和/或第二文本信息更新所述目标页面的样式标签。
步骤1312：上述第一设备根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中所述样式的标识对应的一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息。
例如，上述第二节点树信息中共有四个节点：所述目标节点、节点1、节点2以及节点3，所述目标节点、上述节点2以及上述节点3的关于尺寸的样式的标识为B，第一样式规则信息为：宽为50个像素、高为30个像素；而上述节点1的关于尺寸的样式的标识为A，第一样式规则信息为：宽为50个像素、高为90个像素。上述第二设备的调试面板将目标节点的第一样式规则信息由宽为50个像素、高为30个像素修改为第二样式规则信息宽为60个像素、高为30个像素，并将上述目标节点被修改的样式的标识“B”以及第二样式规则信息发送至第一设备的应用客户端。上述第一设备的应用客户端在接收到上述修改的样式的标识“B”以及第二样式规则信息之后，将上述第二节点树信息中具有样式的标识B的上述节点2以及上述节点3的第一样式规则信息由宽为50个像素、高为30个像素修改为第二样式规则信息宽为60个像素、高为30个像素。
通过本申请的技术方案，一方面通过在目标页面注入用于界面调试的脚本，可以屏蔽界面调试协议的差异，能够实现跨平台的界面调试，同时还可以使开发者无需手动进行调试，提高了调试的效率，节约了人力成本；另一方面通过建立的消息通道来发送信息，大大降低了远程调试的难度，避免了使用USB调试线。此外，将第一节点树信息进行编辑可以使调试面板只展示目标页面的第二节点，可以方便界面调试，进一步提高调试的效率。
对应以上界面调试方法，本申请还提供了实现上述方法的界面调试装置1400，该调试装置1400位于可以位于第一设备中，也可以位于第二设备中。图14示出了界面调试装置1400的结构图。如图14所示，该调试装置1400包括：获取模块1401、发送模块1402以及修改模块1403，其中，各模块的功能如下：
获取模块1401，获取目标页面的第一节点树信息；
发送模块1402，将所述第一节点树信息发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息，其中，所述第一节点树信息描述了所述目标页面的第一节点集合以及各第一节点之间的第一树级关系，所述第二节点树信息描述了所述目标页面的第二节点集合以及各第二节点之间的第二树级关系，所述第一节点和所述第二节点为所述目标页面中的页面元素；
所述获取模块1401，根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取所述目标节点的第一样式规则信息，其中，所述第二设备响应于对所述第二节点树信息中一个节点的选取操作，将所述节点作为所述目标节点；
所述发送模块1402，将所述目标节点的第一样式规则信息返回至所述第二设备；
修改模块1403，根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息，其中，所述第二设备将所述目标节点的一个样式的所述第一样式规则信息修改为所述第二样式规则信息，所述第二节点树信息中所述一个或多个节点具有所述被修改的样式的标识。
在一些实例中，所述装置进一步包括：注入模块1404，将所述用于界面调试的脚本注入到所述目标页面中，并运行所述用于界面调试的脚本，其中，所述第二设备将所述用于界面调试的脚本注入到开发工具中，并运行所述用于界面调试的脚本。
在一些实例中，所述装置进一步包括：建立模块1405；其中，在所述注入模块1404将用于界面调试的脚本注入到所述目标页面中之后，所述建立模块1405，扫描所述第二设备的开发工具上的调试面板所展示的电子化码，进入相应的调试房间，建立所述目标页面所在的应用客户端与所述调试面板所在的开发工具的消息通道；其中，服务器响应于所述开发工具发送的调试请求，为所述开发工具分配所述调试房间的标识以建立所述调试房间，生成包含所述调试房间的标识的所述电子化码，并将所述电子化码发送至所述开发工具以使所述调试面板展示所述电子化码，所述调试面板运行在所述开发工具上。
在一些实例中，所述获取模块1401对所述目标页面的每个节点赋予一个节点标识；从所述第一节点树中获取所述目标页面的所述第一树级关系，其中，所述第一树级关系表征了第一节点集合中节点的标识之间的第一层级关系；其中，所述目标页面的第一节点包括所述目标页面的原始节点和新增节点；所述目标页面的第二节点包括所述目标页面的所述新增节点；所述发送模块1402，将获取的所述第一树级关系通过所述消息通道发送至所述第二设备，其中，所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述第一树级关系中不包含所述预设标识符的原始节点的标识，得到所述第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的所述第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。
在一些实例中，所述获取模块1401，解析所述目标页面的样式标签，得到所述目标页面的样式标签的文本信息；根据所述目标页面的样式标签的文本信息生成所述目标页面的样式规则信息表；所述目标节点的标识，从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息。
在一些实例中，所述装置进一步包括：监听模块1406，调用监听函数，监听所述目标页面中所述第二节点树信息中所述目标节点的样式规则信息的变化，其中，响应于用户请求，所述目标页面中所述第二节点树信息中所述目标节点的样式规则信息发生变化；当监听到所述第二节点树信息中所述目标节点的样式规则信息发生变化时，将所述发生变化的所述目标节点的标识、样式的标识以及变化后的样式规则信息返回所述第二设备以使其更新。
在一些实例中，所述第一样式规则信息包括第一样式取值和/或第一文本信息；所述第二样式规则信息包括第二样式取值和/或第二文本信息；所述修改模块1403，将所述第二节点树信息中一个或多个节点的所述第一样式取值和/或第一文本信息修改为第二样式取值和/或第二文本信息；所述修改模块1403，进一步根据所述第二样式取值和/或第二文本信息更新所述目标页面的样式标签。
在一些实例中，所述装置进一步包括：高亮模块1407，根据第二设备发送的所述目标节点的标识，创建一个与所述目标节点同等大小的透明的控件，并叠加在所述目标页面上的所述目标节点上，以使所述目标节点高亮显示，其中，所述第二设备的输入设备的位置在所述目标节点处。
在一些实例中，所述高亮模块1407，进一步根据所述第二设备的第二输入设备的位置，创建一个与所述目标节点同等大小的透明的高亮节点，并将所述高亮节点叠加在所述目标页面上的所述目标节点上，以使所述目标节点高亮。
上述界面调试装置，一方面通过在目标页面注入用于界面调试的脚本，可以屏蔽界面调试协议的差异，能够实现跨平台的界面调试，同时还可以使开发者无需手动进行调试，提高了调试的效率，节约了人力成本；另一方面通过建立的消息通道来发送信息，大大降低了远程调试的难度，避免了使用USB调试线。此外，将第一节点树信息进行编辑可以使调试面板只展示目标页面的第二节点，可以方便界面调试，进一步提高调试的效率。
图15示出了实现界面调试方法的调试装置1400所在的设备终端1500的组成结构图。如图15所示，该计算设备包括一个或者多个处理器(CPU)1502、通信模块1504、存储器1506、用户接口1510，以及用于互联这些组件的通信总线1508。
处理器1502可通过通信模块1504接收和发送数据以实现网络通信和/或本地通信。
用户接口1510包括一个或多个输出设备1512，其包括一个或多个扬声器和/或一个或多个可视化显示器。用户接口1510也包括一个或多个输入设备1514，其包括诸如，键盘，鼠标，声音命令输入单元或扩音器，触屏显示器，触敏输入板，姿势捕获摄像机或其他输入按钮或控件等。
存储器1506可以是高速随机存取存储器，诸如DRAM、SRAM、DDR RAM、或其他随机存取固态存储设备；或者非易失性存储器，诸如一个或多个磁盘存储设备、光盘存储设备、闪存设备，或其他非易失性固态存储设备。
存储器1506存储处理器1502可执行的指令集，包括：
操作系统1516，包括用于处理各种基本系统服务和用于执行硬件相关任务的程序；
应用1518，包括用于实现界面调试方法各种应用程序，这种应用程序能够实现上述各实例中的处理流程，比如可以包括图14所示的实现界面调试方法的装置1400中的部分或全部单元。各单元或模块1401-1403中的至少一个模块可以存储有机器可执行指令。处理器1502通过执行存储器1506中各模块1401-1403中至少一个模块中的机器可执行指令，进而能够实现上述各模块1401-1403中的至少一个模块的功能。
需要说明的是，上述各流程和各结构图中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。各模块的划分仅仅是为了便于描述采用的功能上的划分，实际实现时，一个模块可以分由多个模块实现，多个模块的功能也可以由同一个模块实现，这些模块可以位于同一个设备中，也可以位于不同的设备中。
各实施例中的硬件模块可以以硬件方式或硬件平台加软件的方式实现。上述软件包括机器可读指令，存储在非易失性存储介质中。因此，各实施例也可以体现为软件产品。
因此，本申请的一些实例还提供了一种计算机可读存储介质，其上存储有计算机指令，其中，所述计算机指令被处理器执行时实现上述图2-13中所述方法的步骤。
各例中，硬件可以由专门的硬件或执行机器可读指令的硬件实现。例如，硬件可以为专门设计的永久性电路或逻辑器件(如专用处理器，如FPGA或ASIC)用于完成特定的操作。硬件也可以包括由软件临时配置的可编程逻辑器件或电路(如包括通用处理器或其它可编程处理器)用于执行特定操作。
另外，本申请的每个实例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本申请。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本申请，本申请还提供了一种非易失性存储介质，其中存储有数据处理程序，这种数据处理程序可用于执行本申请上述方法实例中的任何一种实例。
图14中的模块对应的机器可读指令可以使计算机上操作的操作系统等来完成这里描述的部分或者全部操作。非易失性计算机可读存储介质可以是插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器。安装在扩展板或者扩展单元上的CPU等可以根据指令执行部分和全部实际操作。
另外，在本申请各个实例中的装置及各模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上装置或模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。
Claims (14)
1.一种界面调试方法，其特征在于，应用于第一设备，包括：
获取目标页面的第一节点树信息，并将所述第一节点树信息通过预先建立的消息通道发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息；
根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取所述目标节点的第一样式规则信息，并将所述目标节点的第一样式规则信息返回至所述第二设备；以及
根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息；
所述获取目标页面的第一节点树信息，包括：对所述目标页面的每个节点赋予一个节点标识；从所述第一节点树中获取所述目标页面的第一树级关系，其中，所述第一树级关系表征了第一节点集合中节点的标识之间的第一层级关系；其中，所述目标页面的第一节点包括所述目标页面的原始节点和新增节点；所述目标页面的第二节点包括所述目标页面的所述新增节点；
其中，所述将所述第一节点树信息发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息，包括：将获取的所述第一树级关系通过所述消息通道发送至所述第二设备，其中，所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述第一树级关系中不包含所述预设标识符的所述原始节点的标识，得到所述第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。
2.根据权利要求1所述的方法，其中，所述第一节点树信息描述了所述目标页面的第一节点集合以及各第一节点之间的第一树级关系，所述第二节点树信息描述了所述目标页面的第二节点集合以及各第二节点之间的第二树级关系，所述第一节点和所述第二节点为所述目标页面中的页面元素。
3.根据权利要求1所述的方法，其中，在获取目标页面的第一节点树信息之前，所述方法进一步包括：
将用于界面调试的脚本注入到所述目标页面中，并运行所述用于界面调试的脚本，其中，所述第二设备将所述用于界面调试的脚本注入到开发工具中，并运行所述用于界面调试的脚本。
4.根据权利要求3所述的方法，其中，将用于界面调试的脚本注入到所述目标页面中之后，进一步包括：
扫描所述第二设备的开发工具上的调试面板所展示的电子化码，进入相应的调试房间，建立所述目标页面所在的应用客户端与所述调试面板所在的开发工具的消息通道；其中，服务器响应于所述开发工具发送的调试请求，为所述开发工具分配所述调试房间的标识以建立所述调试房间，生成包含所述调试房间的标识的所述电子化码，并将所述电子化码发送至所述开发工具以使所述调试面板展示所述电子化码，所述调试面板运行在所述开发工具上。
5.根据权利要求1所述的方法，其中，所述第二设备响应于对所述第二节点树信息中一个节点的选取操作，将所述节点作为所述目标节点；
其中，所述获取到所述目标节点的第一样式规则信息，包括：
解析所述目标页面的样式标签，得到所述目标页面的样式标签的文本信息；
根据所述目标页面的样式标签的文本信息生成所述目标页面的样式规则信息表；
根据所述目标节点的标识，从所述目标页面的样式规则信息表中匹配出所述目标节点的第一样式规则信息。
6.根据权利要求1所述的方法，进一步包括：
调用监听函数，监听所述目标页面中所述第二节点树信息中所述目标节点的样式规则信息的变化，其中，响应于用户请求，所述目标页面中所述第二节点树信息中所述目标节点的样式规则信息发生变化；
当监听到所述第二节点树信息中所述目标节点的样式规则信息发生变化时，将所述发生变化的所述目标节点的标识、样式的标识以及变化后的样式规则信息返回所述第二设备以使其更新。
7.根据权利要求5所述的方法，其中，所述第一样式规则信息包括第一样式取值和/或第一文本信息；所述第二样式规则信息包括第二样式取值和/或第二文本信息；
其中，所述第二设备将所述目标节点的一个样式的所述第一样式规则信息修改为所述第二样式规则信息，所述第二节点树信息中所述一个或多个节点具有所述被修改的样式的标识；其中，所述将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息，包括：
将所述第二节点树信息中一个或多个节点的所述第一样式取值和/或第一文本信息修改为第二样式取值和/或第二文本信息；
其中，在将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息之后，所述方法进一步包括：
根据所述第二样式取值和/或第二文本信息更新所述目标页面的样式标签。
8.根据权利要求1所述的方法，进一步包括：
根据第二设备发送的所述目标节点的标识，创建一个与所述目标节点同等大小的透明的控件，并叠加在所述目标页面上的所述目标节点上，以使所述目标节点高亮显示，其中，所述第二设备的输入设备的位置在所述目标节点处。
9.根据权利要求8所述的方法，进一步包括：
根据所述第二设备的输入设备的位置，创建一个与所述目标节点同等大小的透明的高亮节点，并将所述高亮节点叠加在所述目标页面上的所述目标节点上，以使所述目标节点高亮。
10.一种界面调试装置，其特征在于，包括：
获取模块，获取目标页面的第一节点树信息；
发送模块，将所述第一节点树信息通过预先建立的消息通道发送至第二设备以使其对所述第一节点树信息进行编辑得到所述目标页面的第二节点树信息；
所述获取模块，根据所述第二设备发送的所述第二节点树信息中目标节点的标识，获取所述目标节点的第一样式规则信息；
所述发送模块，将所述目标节点的第一样式规则信息返回至所述第二设备；
修改模块，根据所述第二设备返回的所述目标节点被修改的样式的标识以及第二样式规则信息，将所述第二节点树信息中一个或多个节点的所述第一样式规则信息修改为所述第二样式规则信息；
所述获取模块，具体用于对所述目标页面的每个节点赋予一个节点标识；从所述第一节点树中获取所述目标页面的第一树级关系，其中，所述第一树级关系表征了第一节点集合中节点的标识之间的第一层级关系；其中，所述目标页面的第一节点包括所述目标页面的原始节点和新增节点；所述目标页面的第二节点包括所述目标页面的所述新增节点；
所述发送模块，具体用于将获取的所述第一树级关系通过所述消息通道发送至所述第二设备，其中，所述第二设备根据预设标识符，编辑所述第一树级关系，以删除所述第一树级关系中不包含所述预设标识符的所述原始节点的标识，得到所述第一树级关系中的所述新增节点的标识，并根据编辑的所述第一树级关系以及所述新增节点，生成所述目标页面的第二树级关系，所述第二树级关系表征了第二节点集合中节点的标识之间的第二层级。
11.根据权利要求10所述的装置，其中，所述第一节点树信息描述了所述目标页面的第一节点集合以及各第一节点之间的第一树级关系，所述第二节点树信息描述了所述目标页面的第二节点集合以及各第二节点之间的第二树级关系，所述第一节点和所述第二节点为所述目标页面中的页面元素。
12.根据权利要求10所述的装置，其中，所述装置进一步包括：
注入模块，将用于界面调试的脚本注入到所述目标页面中，并运行所述用于界面调试的脚本，其中，所述第二设备将所述用于界面调试的脚本注入到开发工具中，并运行所述用于界面调试的脚本。
13.根据权利要求12所述的装置，其中，所述装置进一步包括：建立模块；
其中，在所述注入模块将用于界面调试的脚本注入到所述目标页面中之后，所述建立模块，扫描所述第二设备的开发工具上的调试面板所展示的电子化码，进入相应的调试房间，建立所述目标页面所在的应用客户端与所述调试面板所在的开发工具的消息通道；其中，服务器响应于所述开发工具发送的调试请求，为所述开发工具分配所述调试房间的标识以建立所述调试房间，生成包含所述调试房间的标识的所述电子化码，并将所述电子化码发送至所述开发工具以使所述调试面板展示所述电子化码，所述调试面板运行在所述开发工具上。
14.一种计算机可读存储介质，其特征在于，存储有机器可读指令，可以使至少一个处理器执行如权利要求1-9任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810540038.6A CN110554950B (zh) | 2018-05-30 | 2018-05-30 | 一种界面调试方法、装置及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810540038.6A CN110554950B (zh) | 2018-05-30 | 2018-05-30 | 一种界面调试方法、装置及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110554950A CN110554950A (zh) | 2019-12-10 |
| CN110554950B true CN110554950B (zh) | 2024-02-02 |
Family
ID=68735180
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810540038.6A Active CN110554950B (zh) | 2018-05-30 | 2018-05-30 | 一种界面调试方法、装置及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110554950B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111639279B (zh) * | 2020-05-27 | 2023-07-25 | 浙江口碑网络技术有限公司 | 图形码生成方法、目标页面加载方法和装置 |
| CN111652580B (zh) * | 2020-05-29 | 2023-02-14 | 深圳平安医疗健康科技服务有限公司 | 一种对节点的数据处理方法及装置 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103763358A (zh) * | 2014-01-08 | 2014-04-30 | 北京奇虎科技有限公司 | 一种信息的推送方法和装置 |
| CN104021081A (zh) * | 2014-06-16 | 2014-09-03 | 贝壳网际（北京）安全技术有限公司 | 一种针对浏览器的调试方法及装置 |
| CN104516813A (zh) * | 2013-09-26 | 2015-04-15 | 腾讯科技（北京）有限公司 | 网络页面的测试节点的选取方法和装置 |
| CN106126197A (zh) * | 2016-05-31 | 2016-11-16 | 美通云动（北京）科技有限公司 | 使移动端应用页面与pc端应用页面同步的方法及装置 |
| US9645910B1 (en) * | 2015-03-12 | 2017-05-09 | Amazon Technologies, Inc. | Cross platform mobile HTML debugging |
| CN106878361A (zh) * | 2015-12-14 | 2017-06-20 | 阿里巴巴集团控股有限公司 | 一种终端应用页面的调试方法、装置及客户端 |
| CN107390974A (zh) * | 2017-07-21 | 2017-11-24 | 北京小米移动软件有限公司 | 用于网页调试的代码查找方法、装置及存储介质 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7814463B2 (en) * | 2003-05-16 | 2010-10-12 | Oracle International Corporation | User interface debugger for software applications |
| US7216257B2 (en) * | 2004-01-21 | 2007-05-08 | Sap Ag | Remote debugging |
| US9648139B2 (en) * | 2013-12-19 | 2017-05-09 | Adobe Systems Incorporated | Inserting server-side breakpoints requested by remote development clients |
-
2018
- 2018-05-30 CN CN201810540038.6A patent/CN110554950B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104516813A (zh) * | 2013-09-26 | 2015-04-15 | 腾讯科技（北京）有限公司 | 网络页面的测试节点的选取方法和装置 |
| CN103763358A (zh) * | 2014-01-08 | 2014-04-30 | 北京奇虎科技有限公司 | 一种信息的推送方法和装置 |
| CN104021081A (zh) * | 2014-06-16 | 2014-09-03 | 贝壳网际（北京）安全技术有限公司 | 一种针对浏览器的调试方法及装置 |
| US9645910B1 (en) * | 2015-03-12 | 2017-05-09 | Amazon Technologies, Inc. | Cross platform mobile HTML debugging |
| CN106878361A (zh) * | 2015-12-14 | 2017-06-20 | 阿里巴巴集团控股有限公司 | 一种终端应用页面的调试方法、装置及客户端 |
| CN106126197A (zh) * | 2016-05-31 | 2016-11-16 | 美通云动（北京）科技有限公司 | 使移动端应用页面与pc端应用页面同步的方法及装置 |
| CN107390974A (zh) * | 2017-07-21 | 2017-11-24 | 北京小米移动软件有限公司 | 用于网页调试的代码查找方法、装置及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110554950A (zh) | 2019-12-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110704136B (zh) | 小程序组件的渲染方法、客户端、电子设备及存储介质 | |
| US10565293B2 (en) | Synchronizing DOM element references | |
| US11132114B2 (en) | Method and apparatus for generating customized visualization component | |
| KR101340780B1 (ko) | 데이터 공유 시스템 및 방법 | |
| EP2148259A1 (en) | Field device management apparatus and field device management system | |
| CN105630939B (zh) | 一种通用画布输入接口设计方法及装置 | |
| CN108647076B (zh) | 一种页面处理方法、装置及设备 | |
| CN111428166A (zh) | 页面配置方法、页面元素替换方法、装置、设备及介质 | |
| CN105518633A (zh) | Web服务器系统、应用开发辅助系统、Web服务器系统中的多语言支持方法、Web服务器系统中的多设备支持方法以及应用开发辅助方法 | |
| WO2015196979A1 (en) | Web page information presentation method and system | |
| CN108279882B (zh) | 框架生成方法、装置、设备及计算机可读介质 | |
| CN112596714A (zh) | 网页开发方法、装置、终端、服务器和存储介质 | |
| CN110554950B (zh) | 一种界面调试方法、装置及存储介质 | |
| CN112114890A (zh) | 小程序的处理方法、装置、设备及存储介质 | |
| CN112328342B (zh) | 基于在线文档的待办事项处理方法及装置 | |
| US20130246902A1 (en) | Coordinating the management of the layout and design of portal pages with the management of its associated web content | |
| CN109614565A (zh) | 网页生成方法与装置 | |
| CN111612639A (zh) | 一种应用于保险方案的同步交流方法及系统 | |
| CN107977316B (zh) | 一种模拟远程过程调用的方法、客户端及系统 | |
| CN114217795A (zh) | 页面生成方法、装置、电子设备及可读存储介质 | |
| CN109840201B (zh) | Ui测试方法、装置、电子设备及计算机可读存储介质 | |
| CN111078530A (zh) | 应用程序调试方法、系统、电子设备及计算机可读存储介质 | |
| CN113934832A (zh) | 基于会话的交互处理方法、装置、设备、介质及程序产品 | |
| CN114860240A (zh) | 一种低代码页面创建方法、装置、设备及介质 | |
| CN111857782B (zh) | 界面更新方法、装置、计算机设备和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40018660 Country of ref document: HK |
|
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |