[发明专利]调试信息显示方法、装置、存储介质及电子设备

说明书

本申请实施例提供的调试信息显示方法、装置、存储介质及电子设备。获取待包括有待调试组件以及调试信息显示组件的待调试网页。基于组件组件之间的数据传递规则，通过所述调试信息显示组件获取所述待调试组件的调试信息，将所述待调试组件的调试信息通过所述调试信息显示组件在所述待调试网页进行显示。如此，由于该调试信息显示组件为网页的一部分，继而使得不依赖于第三方的调试工具即可显示调试信息，解决了移动端浏览器无组件调试工具的问题。同时，各调试信息显示组件可同时显示各待调试组件的调试信息，极大的方便了网页开发调试的过程。

技术领域

本申请涉及计算机领域，具体而言，涉及一种调试信息显示方法、装置、存储介质及电子设备。

背景技术

在当前的前端开发过程中，为了提高代码的复用性，会将需求在一定的颗粒度范围内拆分成多个功能单元。利用前端开发框架(例如，Vue、React以及Angular等)将各个功能单元封装成独立的组件。由于各个组件具有可复用性，通过这些单元之间的组合，生成复杂的页面。

在通过组件进行网页开发调试的时候，往往需要查看各组件的数据。目前的调试工具仅支持桌面端的浏览器，且不能同时显示多个组件的数据。

发明内容

为了克服现有技术中的至少一个不足，本申请的目的之一在于提供一种调试信息显示方法，所述方法包括：

获取待调试网页，所述待调试网页包括多个组件，所述组件为预设功能的代码片段集合，其中，所述组件包括待调试组件以及调试信息显示组件；

基于组件之间的数据传递规则，通过所述调试信息显示组件获取所述待调试组件的调试信息；

将所述待调试组件的调试信息通过所述调试信息显示组件在所述待调试网页进行显示。

可选地，所述将所述待调试组件的调试信息通过所述调试信息显示组件在所述待调试网页进行显示的步骤包括：

响应用户在所述待调试网页对所述待调试组件的选取操作，将所述用户选中的待调试组件作为目标调试组件；

通过所述调试信息显示组件将所述目标调试组件的调试信息在所述待调试网页进行显示。

可选地，所述方法还包括：

响应用户在所述待调试网页对所述目标调试组件的选取操作，隐藏所述用户所选中的目标调试组件的调试信息。

可选地，所述待调试组件在所述待调试网页显示有预设标识，所述响应用户在所述待调试网页对所述待调试组件的选取操作，将所述用户选中的待调试组件作为目标调试组件的步骤包括：

响应用户对所述预设标识的点击操作，确定所述用户选中的待调试组件；

将所述用户选中的待调试组件作为所述目标调试组件。

可选地，所述方法还包括：

解析所述待调试网页的网页项目源代码，确定出所述待调试组件在所述网页项目源代码中的位置，所述网页项目源代码为开发过程中的网页源代码；

根据所述待调试组件在所述网页项目源代码中的位置，将所述调试信息显示组件插入到所述网页项目源代码的相应位置获得所述待调试网页，使得所述待调试网页中的调试信息显示组件能够获取所述待调试组件的调试信息。

可选地，所述解析所述待调试网页的网页项目源代码，确定出所述待调试组件在所述网页项目源代码中的位置的步骤包括：

通过Babel插件解析所述网页项目源代码，根据所述待调试组件的唯一标识确定所述待调试组件在所述网页项目源代码中的位置。