元素调试方法、装置、设备、存储介质及程序产品制造方法及图纸

本申请公开了元素调试方法、装置、设备、存储介质及程序产品，涉及开发者工具、小程序开发领域。该方法应用于电子设备，电子设备包括模拟器和调试器，模拟器和调试器均为iframe元素，该方法包括：通过调试器的iframe通讯接口从模拟器获取第一调试协议数据；根据第一调试协议数据，在调试器中渲染得到元素节点；响应于调试器接收到的操作指令，通过调试器的iframe通讯接口向模拟器发送调试指令；通过模拟器执行与调试指令对应的操作，以对元素节点对应的元素进行调试。该方法实现了对网页中iframe元素中的DOM元素进行调试。

【技术实现步骤摘要】
元素调试方法、装置、设备、存储介质及程序产品
本申请实施例涉及开发者工具技术，尤其涉及一种元素调试方法、装置、设备、存储介质及程序产品，可用于小程序开发领域。
技术介绍
文档对象模型(DocumentObjectModel，DOM)元素调试，是通过调试器连接被调试窗口，从而对被调试窗口中的DOM元素进行调试，通常调试器和被调试窗口之间采用websocket或进程间通讯(InterProcessCommunication，IPC)的方式进行通讯。然而，在网页(web)版的开发者工具中，被调试窗口(即模拟器)为iframe元素，而iframe不具有websocket或IPC接口，因此无法与调试器连接，这就导致无法对模拟器中的DOM元素进行调试。
技术实现思路
本申请提供了一种用于实现对网页中iframe元素中的DOM元素进行调试的元素调试方法、装置、设备、存储介质及程序产品。根据本申请的一方面，提供了一种元素调试方法，应用于电子设备，所述电子设备包括模拟器和调试器，所述模拟器和所述调试器均为iframe元素，所述本文档来自技高网...

【技术保护点】
1.一种元素调试方法，应用于电子设备，所述电子设备包括模拟器和调试器，所述模拟器和所述调试器均为iframe元素，所述方法包括：/n通过所述调试器的iframe通讯接口从所述模拟器获取第一调试协议数据；/n根据所述第一调试协议数据，在所述调试器中渲染得到元素节点；/n响应于所述调试器接收到的操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送调试指令；/n通过所述模拟器执行与所述调试指令对应的操作，以对所述元素节点对应的元素进行调试。/n

【技术特征摘要】
1.一种元素调试方法，应用于电子设备，所述电子设备包括模拟器和调试器，所述模拟器和所述调试器均为iframe元素，所述方法包括：
通过所述调试器的iframe通讯接口从所述模拟器获取第一调试协议数据；
根据所述第一调试协议数据，在所述调试器中渲染得到元素节点；
响应于所述调试器接收到的操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送调试指令；
通过所述模拟器执行与所述调试指令对应的操作，以对所述元素节点对应的元素进行调试。


2.根据权利要求1所述的方法，所述通过所述调试器的iframe通讯接口从所述模拟器获取第一调试协议数据，包括：
在所述模拟器加载完成后，通过所述模拟器的iframe通讯接口向所述调试器发送初始化信号；
响应于所述调试器接收到的初始化信号，通过所述调试器的iframe通讯接口向所述模拟器发送获取元素节点信息的第一调试指令；
通过所述模拟器的iframe通讯接口向所述调试器发送与所述第一调试指令对应的所述第一调试协议数据。


3.根据权利要求1所述的方法，所述响应于所述调试器接收到的操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送调试指令，包括：
响应于所述调试器接收到的点击目标元素节点的第一操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送获取所述目标元素节点对应的目标元素的样式信息的第二调试指令；
所述通过所述模拟器执行与所述调试指令对应的操作，以对所述元素节点对应的元素进行调试，包括：
通过所述模拟器的iframe通讯接口向所述调试器发送与所述第二调试指令对应的第二调试协议数据；
根据所第二调试协议数据，在所述调试器中显示所述目标元素的样式信息。


4.根据权利要求1所述的方法，所述响应于所述调试器接收到的操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送调试指令，包括：
响应于所述调试器接收到的展开目标元素节点的第二操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送获取所述目标元素节点的子节点的第三调试指令；
所述通过所述模拟器执行与所述调试指令对应的操作，以对所述元素节点对应的元素进行调试，包括：
通过所述模拟器的iframe通讯接口向所述调试器发送与所述第三调试指令对应的第三调试协议数据；
根据所述第三调试协议数据，在所述调试器中渲染得到所述目标元素节点的子节点。


5.根据权利要求1所述的方法，所述响应于所述调试器接收到的操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送调试指令，包括：
响应于所述调试器接收到的将鼠标移动至目标元素节点上的第三操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送遮罩所述目标元素节点对应的目标元素的第四调试指令；
所述通过所述模拟器执行与所述调试指令对应的操作，以对所述元素节点对应的元素进行调试，包括：
根据所述第四调试指令，在所述模拟器中的所述目标元素上生成遮罩层。


6.根据权利要求5所述的方法，还包括：
响应于所述调试器接收到的将鼠标从所述目标元素节点上移开的第四操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送隐藏所述遮罩层的第五调试指令；
根据所述第五调试指令，在所述模拟器中隐藏所述遮罩层。


7.根据权利要求1所述的方法，所述响应于所述调试器接收到的操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送调试指令，包括：
响应于所述调试器接收到的触发审查模式的第五操作指令，通过所述调试器的iframe通讯接口向所述模拟器发送开启审查模式的第六调试指令；
所述通过所述模拟器执行与所述调试指令对应的操作，以对所述元素节点对应的元素进行调试，包括：
根据所述第六调试指令，开启所述模拟器的审查模式，所述审查模式用于定位元素节点。


8.根据权利要求7所述的方法，还包括：
在所述审查模式下，响应于所述模拟器接收到的将鼠标移动至目标元素上的第六操作指令，在所述模拟器中高亮显示所述目标元素，并通过所述模拟器的iframe通讯接口向所述调试器发送定位所述目标元素对应的目标元素节点的第七调试指令；
根据所述第七调试指令，在所述调试器中定位至所述目标元素节点。


9.根据权利要求7或8所述的方法，还包括：
在所述审查模式下，响应于所述模拟器接收到的点击目标元素的第七操作指令，向所述调试器发送选中所述目标元素对应的目标元素节点的第八调试指令；
根据所述第八调试指令，在所述调试器中选中所述目标元素节点并显示所述目标元素的样式信息，并关闭所述模拟器的审查模式。


10.一种元素调试装置，应用于电子设备，所述电子设备包括模拟器和调试器，所述模拟器和所述调试器均为iframe元素，所述装置包括：...

【专利技术属性】
技术研发人员：杜鹏鹏，
申请(专利权)人：北京百度网讯科技有限公司，
类型：发明
国别省市：北京;11