CN110633220A - 调试信息显示方法、装置、存储介质及电子设备 - Google Patents

Abstract

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

Description

调试信息显示方法、装置、存储介质及电子设备

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可选地，所述组件为React组件，所述根据所述待调试组件在所述网页项目源代码的位置，将所述调试信息显示组件***到所述网页项目源代码的相应位置的步骤包括：

根据所述待调试组件在所述网页项目源代码中的位置，将所述调试信息显示组件***到所述网页项目源代码的相应位置，使得所述调试信息显示组件作为所述待调试组件的子组件。

本申请实施例的另一目的在于一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现所述调试信息显示方法。

本申请实施例的另一目的在于提供一种调试信息显示装置，所述调试信息显示装置包括网页获取模块和数据获取模块以及信息显示模块；

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

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

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

本申请实施例的另一目的在于提供一种电子设备，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述电子设备从服务器获取并运行待调试网页时，实现所述调试信息显示方法。

相对于现有技术而言，本申请具有以下有益效果：

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

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的电子设备的结构示意图；

图2为本申请实施例提供的调试信息显示方法的步骤流程图；

图3为本申请实施例提供的调试信息显示组件工作示意图之一；

图4为本申请实施例提供的调试信息显示组件工作示意图之二；

图5为本申请实施例提供的调试信息显示装置的结构示意图。

图标：100-电子设备；110-调试信息显示装置；120-存储器；130-处理器；140-通信单元；500-待调试网页；510-预设标识；520-第一调试组件；530-第二调试组件；1101-网页获取模块；1102-数据获取模块；1103-信息显示模块。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

请参照图1，图1是本申请施例提供的电子设备100的结构示意图。所述电子设备100包括调试信息显示装置110、存储器120、处理器130以及通信单元140。

所述存储器120、处理器130以及通信单元140各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述调试信息显示装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器120中或固化在所电子设备100的操作***(operating system，OS)中的软件功能模块。所述处理器130用于执行所述存储器120中存储的可执行模块，例如所述调试信息显示装置110所包括的软件功能模块及计算机程序等。

其中，所述存储器120可以是，但不限于，随机存取存储器(Random AccessMemory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(ProgrammableRead-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-OnlyMemory，EEPROM)等。其中，存储器120用于存储程序，所述处理器130在接收到执行指令后，执行所述程序。所述通信单元140用于通过网络建立服务器与电子设备100之间的通信连接，并用于通过所述网络收发数据。

所述处理器130可能是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

为了减少网页前端开发过程中的重复劳动以提高开发效率，产生了许多服务于前端开发人员的前端框架。在开发的过程中，基于前端框架开发拥有独立功能单元的组件，继而通过各个组件进行组合，生成复杂的页面。例如，常见的前端开发框架包括Vue、React以及Angular等。

因此，在开发过程中，需要对各个组件的相关参数进行查看。现有的调试工具主要支持桌面端的浏览器，使得在通过组件的方式开发移动端网页时，调试很不方便。

基于此，本申请实施例提供一种调试信息显示方法。请参照图2，为该调试信息显示方法的步骤流程图。下面就该方法包括各个步骤进行详细阐述。

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

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

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

该电子设备100从服务器获取待调试网页，其中，该待调试网页的源代码中包括有待调试组件以及调试信息显示组件。每个待调试组件对应一个调试信息显示组件，用以在该电子设备100运行该待调试网页时，获取对应待调试组件的调试信息。

不同的前端框架所开发的组件，其组件之间的通信方式也各不相同。基于组件之间的数据传递规则，该电子设备100获取待调试组件的调试信息，并将所述待调试组件的调试信息通过对应的调试信息显示组件进行显示。

如此，方便开发人员查看各待调试组件内部的参数信息。值得说明的是，该电子设备100可以是智能手机、个人电脑、平板电脑以及其他一些移动上网设备，只要能运行浏览器即可。其中，该浏览器不限于移动端浏览器，同时也可以是桌面端浏览器。

可选地，由于同一网页包括有多个组件，复杂的网页中的组件之间往往存在联动，为了便于同时查看多个组件的调试信息。该电子设备100响应用户在所述待调试网页对所述待调试组件的选取操作，将所述用户选中的待调试组件作为目标调试组件。针对各个目标调试组件，该电子设备100同时显示各个目标调试组件的调试信息，进而方便开发人员查看各目标组件的调试信息。

进一步地，用户还可以根据需要对目标调试组件的调试信息进行隐藏。具体的，该电子设备100响应用户对所述目标调试组件的选取操作，将用户选中的目标调试组件的调试信息进行隐藏。

例如，请参照图3，在一种可能的示例中，该待调试网页500的待调试组件包括第一调试组件520和第二调试组件530。每个待调试组件的左上角显示有预设标识510。该预设标识510为示显示调试信息的触发按钮。为了对用户起到比较醒目的视觉提示效果，该预设标识510可以为颜色比较鲜艳的按钮。

请参照图4，当用户点击第二调试组件530的预设标识510时，则在该预设标识的下方通过调试信息显示组件显示该第二调试组件530的调试信息。只有用户再次点击该第二调试组件530的预设标识510时，才隐藏该第二调试组件530的调试信息。如此，用户可以根据需求，同时显示多个待调试组件的调试信息，解决了现有桌面端的组件调试工具同一时间只能显示单个组件调试信息的弊端，提高了开发效率。

可选地，该组件为基于React框架所开发的React组件，由于React框架的预设语法规则的原因。该调试信息显示组件需要作为待调试组件的子组件，该电子设备100才能够通过该调试信息显示组件获取待调试组件的调试信息。

基于此，该电子设备100通过Babel插件解析所述待调试网页500的网页项目源代码，确定出所述待调试组件在所述网页项目源代码中的位置，所述网页项目源代码为开发过程中的网页源代码；根据所述待调试组件在所述网页项目源代码中的位置，将所述调试信息显示组件***到所述网页项目源代码的相应位置以获得所述待调试网页500，使得所述待调试网页500中的调试信息显示组件作为所述待调试组件的子组件。其中，该相应位置为该待调试组件的根元素位置，该调试信息显示组件位于该跟元素位置时，能够获取对应待调试组件的调试信息。

可选地，该Babel插件配置有对应的配置文件，记录有待调试组件的唯一标识。该电子设备100通过该Babel插件读取该配置文件获得各调试组件的唯一标识，通过该唯一标识确定各调试组件在该网页项目源代码中的位置，进而将调试信息显示插件***该待调试组件的根元素位置。

同时，该Babel插件还用于将React组件的源代码进行转化。由于部分浏览器不支持高版本的JavaScript代码，为了保证该待调试网页500在各大浏览器平台都能很好的工作，该电子设备100通过该Babel插件将React组件的源代码进行转化，使之兼容老版本的浏览器。

可选地，该调试信息为React组件的属性信息和状态信息。其中，React组件的属性信息获取自组件外部，React组件的状态信息获取自React组件的内部，用于表示React组件当前的状态。

值得说明的是，本申请实施例中用于运行待调试网页500以及对网页项目源代码进行***编辑的电子设备100可以是不同的硬件设备也可以是相同的硬件设备。

本申请实施例还提供一种调试信息显示装置110。请参照图5，该调试信息显示装置110从功能上划分，包括网页获取模块1101和数据获取模块1102以及信息显示模块1103。

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

在本实施例中，该网页获取模块1101用于执行图2中的步骤S100，关于该网页获取模块1101的详细描述可以参考步骤S100的详细描述。

该数据获取模块1102用于基于组件之间的数据传递规则，通过所述调试信息显示组件获取所述待调试组件的调试信息。

在本实施例中，该数据获取模块1102用于执行图2中的步骤S200，关于数据获取模块1102的详细描述可以参考步骤S200的详细描述。

该信息显示模块1103用于将所述待调试组件的调试信息通过所述调试信息显示组件在所述待调试网页500进行显示。

在本实施例中，该信息显示模块1103用于执行图2中的步骤S300，关于该信息显示模块1103的详细描述可以参考步骤S300的详细描述。

本申请实施例的另一目的在于一种存储介质，其上存储有计算机程序，所述计算机程序被处理器130执行时实现所述调试信息显示方法。

本申请实施例的另一目的在于提供一种电子设备100，包括处理器130和存储器120，所述存储器120存储有能够被所述处理器130执行的机器可执行指令，所述电子设备100从服务器获取并运行待调试网页500时，实现所述调试信息显示方法。

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

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述，仅为本申请的各种实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种调试信息显示方法，其特征在于，所述方法包括：

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

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

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

2.根据权利要求1所述的调试信息显示方法，其特征在于，所述将所述待调试组件的调试信息通过所述调试信息显示组件在所述待调试网页进行显示的步骤包括：

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

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

3.根据权利要求2所述的调试信息显示方法，其特征在于，所述方法还包括：

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

4.根据权利要求2所述的调试信息显示方法，其特征在于，所述待调试组件在所述待调试网页显示有预设标识，所述响应用户在所述待调试网页对所述待调试组件的选取操作，将所述用户选中的待调试组件作为目标调试组件的步骤包括：

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

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

5.根据权利要求1所述的调试信息显示方法，其特征在于，所述方法还包括：

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

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

6.根据权利要求5所述的调试信息显示方法，其特征在于，所述解析所述待调试网页的网页项目源代码，确定出所述待调试组件在所述网页项目源代码中的位置的步骤包括：

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

7.根据权利要求5所述的调试信息显示方法，其特征在于，所述组件为React组件，所述根据所述待调试组件在所述网页项目源代码的位置，将所述调试信息显示组件***到所述网页项目源代码的相应位置的步骤包括：

根据所述待调试组件在所述网页项目源代码中的位置，将所述调试信息显示组件***到所述网页项目源代码的相应位置，使得所述调试信息显示组件作为所述待调试组件的子组件。

8.一种调试信息显示装置，其特征在于，所述调试信息显示装置包括网页获取模块和数据获取模块以及信息显示模块；

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

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

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

9.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的调试信息显示方法。

10.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述电子设备从服务器获取并运行待调试网页时，实现如权利要求1-7中任一项所述的调试信息显示方法。

Images