CN107390974A - 用于网页调试的代码查找方法、装置及存储介质 - Google Patents

Abstract

本公开是关于一种用于网页调试的代码查找方法、装置及存储介质，该方法包括首先接收查找指令，之后根据查找操作信息和查找方向，在当前网页的节点树中查找第二节点，在查找到第二节点后，获取第二节点对应的代码，并突出显示在当前网页的调试窗口中。能够快速、便捷地确定用户所要查找的节点的位置以及突出显示该节点所对应的代码，简化查找和确定代码的操作。

Description

用于网页调试的代码查找方法、装置及存储介质

技术领域

本公开涉及网络技术领域，尤其涉及一种用于网页调试的代码查找方法、装置及存储介质。

背景技术

在相关技术中，一些浏览器所提供的调试工具会显示在网页页面的右侧或下侧窗口。开发者在调试时，可以通过鼠标选取网页上的某些元素，调试工具则在该调试工具的窗口中定位到鼠标所选元素所对应代码。

发明内容

为克服相关技术中存在的问题，本公开提供一种用于网页调试的代码查找方法、装置及存储介质。

根据本公开实施例的第一方面，提供一种用于网页调试的代码查找方法，包括：

接收查找指令，所述查找指令包括查找操作信息和查找方向；

响应于所述查找指令，在当前网页的节点树中以所述当前网页中已选择的第一节点为起点查找符合所述查找操作信息和所述查找方向的第二节点；

在查找到所述第二节点后，获取所述第二节点对应的代码，并突出显示在所述当前网页的调试窗口中。

可选的，所述根据所述查找操作信息和所述查找方向，在所述当前网页的节点树中查找所述第二节点，包括：

获取所述当前网页的超文本标记语言HTML文档的节点树，所述节点树中记录了所述当前网页的HTML文档中每个节点的相对位置关系；

根据所述节点树，所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点。

可选的，所述查找操作信息指示当前查找操作为单次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的父节点；

将所述第一节点的父节点确定为所述第二节点。

可选的，所述查找操作信息指示为单次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的第一个子节点；

将所述第一个子节点确定为所述第二节点。

可选的，所述查找操作信息指示为多次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的上层查找与第一节间隔N-1个节点的上层节点；

当存在所述上层节点时，将所述上层节点确定为所述第二节点；

当不存在所述上层节点时，将所述节点树的根节点确定为所述第二节点。

可选的，所述查找操作信息指示为多次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的下层查找与第一节间隔N-1个节点的下层节点；

当存在所述下层节点时，将所述下层节点确定为所述第二节点；当不存在所述上层节点时，将所述节点树的最后一个节点确定为所述第二节点。

根据本公开实施例的第二方面，提供一种用于网页调试的代码查找装置，所述装置包括：

指令接收模块，被配置为接收查找指令，所述查找指令包括查找操作信息和查找方向；

节点查找模块，被配置为响应于所述查找指令，在当前网页的节点树中以所述当前网页中已选择的第一节点为起点查找符合所述查找操作信息和所述查找方向的第二节点；

代码获取模块，被配置为在查找到所述第二节点后，获取所述第二节点对应的代码，并突出显示在所述当前网页的调试窗口中。

可选的，所述节点查找模块，包括：

节点树获取模块，被配置为获取所述当前网页的超文本标记语言HTML文档的节点树，所述节点树中记录了所述当前网页的HTML文档中每个节点的相对位置关系；

节点确定子模块，被配置为根据所述节点树，所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点。

可选的，所述查找操作信息指示当前查找操作为单次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的父节点；

将所述第一节点的父节点确定为所述第二节点。

可选的，所述查找操作信息指示为单次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的第一个子节点；

将所述第一个子节点确定为所述第二节点。

可选的，所述查找操作信息指示为多次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的上层查找与第一节间隔N-1个节点的上层节点；

当存在所述上层节点时，将所述上层节点确定为所述第二节点；

当不存在所述上层节点时，将所述节点树的根节点确定为所述第二节点。

可选的，所述查找操作信息指示为多次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的下层查找与第一节间隔N-1个节点的下层节点；

当存在所述下层节点时，将所述下层节点确定为所述第二节点；

当不存在所述上层节点时，将所述节点树的最后一个节点确定为所述第二节点。

根据本公开实施例的第三方面，提供一种用于网页调试的代码查找装置，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

接收查找指令，所述查找指令包括查找操作信息和查找方向；

响应于所述查找指令，在当前网页的节点树中以所述当前网页中已选择的第一节点为起点查找符合所述查找操作信息和所述查找方向的第二节点；

在查找到所述第二节点后，获取所述第二节点对应的代码，并突出显示在所述当前网页的调试窗口中。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现本公开第一方面所提供的用于网页调试的代码查找方法的步骤。

本公开的实施例提供的技术方案可以包括以下有益效果：

本公开提供的技术方法在接收查找指令之后，根据该查找指令中的查找操作信息和查找方向，在当前网页的节点树中查找符合该查找操作信息和查找方向的第二节点，在查找到第二节点后，获取第二节点对应的代码，并突出显示在当前网页的调试窗口中。本公开实施例所提供的技术方案，能够根据用户操作快速地定位用户所要查找的节点的位置以及该节点所对应的代码，相比传统的人工查找的方式，能够简化查找代码的操作，提高查找效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是一种网页调试工具的调试页面的示意图；

图2是根据一示例性实施例示出的一种用于网页调试的代码查找方法的流程图；

图3是根据一示例性实施例示出的另一种用于网页调试的代码查找方法的流程图；

图4是根据一示例性实施例示出的一种用于网页调试的代码查找装置的框图；

图5是根据一示例性实施例示出的一种节点查找模块的框图；

图6是根据另一示例性实施例示出的一种用于网页调试的代码查找装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在介绍本公开的实施例提供的用于网页调试的代码查找方法之前，先介绍一下本公开的应用场景。HTML(Hyper Text Markup Language，超级文本标记语言)是标准通用标记语言下的一个应用，也是一种规范，也是一种标准文档。通常可以用它来编写网页，它可以通过标记符来标记要显示的网页中的各个部分。因此用其编写的网页文件本身是一种文本文件，通过在文本文件中添加标记符，能够告诉浏览器如何显示其中的内容，例如：文字如何处理，画面如何安排，图片如何显示等。浏览器可以按顺序阅读网页文件，然后根据标记符解释并显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行的过程，开发者能够通过显示效果来分析出错原因和出错部位。对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。而DOM(DocumentObject Model，文档对象模型)，是W3C(World Wide Web Consortium，缩写万维网联盟)组织推荐的处理可扩展标志语言的标准编程接口。根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点，也就是说，整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。所有在HTML文档中的节点组成了节点树，该节点树中的节点彼此拥有层级关系，可以用父(parent)、子(child)和同胞(sibling)等术语描述这些节点之间的关系。父节点拥有任意数量的子节点，同级的子节点被称为同胞节点(兄弟节点或姐妹节点)。在节点树中，顶端节点被称为根节点(root)，除了根节点以外，其他每个节点都有父节点，且每一个节点都可拥有任意数量的子节点，同胞是拥有相同父节点的节点。

如图1所示，是某网页的调试页面示意图，左侧是某网页的原始页面，右侧窗口是浏览器提供的调试工具，开发者可以通过鼠标选取网页上的某些元素(如下图所示，选中了“输入框”元素)，在右侧的窗口中会自动定位到对应的代码处(如右侧虚线框圈出来的部分)。一般的网页编程和调试过程中，开发者通过现有的上述调试工具只能自己查找网页中元素的代码，不能很快的找到其父节点，或者子节点，或者同胞节点，更不能快速的定位到各个节点对应的代码。使得在调试中，节点不容易拣选，浪费时间。

本公开的实施例提供的用于网页调试的代码查找方法，能够快速、准确地定位到所要查找的相关节点的位置，并确定对应的代码，其方法参见下面的实施例。

图2是根据一示例性实施例示出的一种用于网页调试的代码查找方法的流程图，如图2所示，包括以下步骤：

在步骤201中，接收查找指令，该查找指令包括查找操作信息和查找方向。

其中，该查找指令用于指示计算机以当前网页中已选择的第一节点为起点查找符合查找操作信息和查找方向的第二节点。示例的，对当前网页进行调试时，如果想要查找该当前已选择的第一节点的上一节点时，可以按照该上一节点所在的方向进行一次查找操作。这里定义在当前网页的HTML文档的节点树中，从叶子节点向根节点的方向为第一方向，从根节点向叶子节点的方向为第二方向，则本实施例中所述的第一节点的上一节点就是该第一节点在该第一方向上的上一节点。同理第一节点的下一节点就是该第一节点在该第二方向上的下一节点。并且，以操作设备为鼠标为例，可以将鼠标滚轮设置为向上滚动一次就触发向第一方向查找该上一节点的查找指令，向下滚动一次就触发向第二方向查找该下一节点的查找指令。该查找指令中包含了查找操作信息和查找方向，其中查找操作信息用于指示当前操作是单次操作还是多次操作，此时查找操作信息例如可以为：操作次数＝1，查找方向可以是上述的第一方向或第二方向，从而可以指示计算机以当前网页中已选择的第一节点为起点查找符合查找操作信息和查找方向的第二节点。

因此，可以进行一次向上滑动鼠标滚轮的操作来触发一个用于查找该上一节点的查找指令，或者可以进行一次向下滑动鼠标滚轮的操作来触发一个用于查找下一节点的查找指令。可选的，在另一种实现方式中，也可以由用户进行连续多次操作，在此情况下，上述的查找指令指示的就是当前操作为多次操作，此时该查找指令例如可以为：操作次数＝n，n为大于1的整数。

在步骤202中，响应于查找指令，在当前网页的节点树中以当前网页中已选择的第一节点为起点查找符合查找操作信息和查找方向的第二节点。

示例地，当前网页的节点树即上述的HTML文档的节点树，节点树中记录了该当前网页的HTML文档中每个节点的相对位置关系。该节点树是在网页开发时就已经确定的，通过读取HTML文档即可获得该节点树。因此，在当前已选择的第一节点的位置确定，查找操作信息和查找方向也确定的情况下，以该第一节点为起点，按照查找操作信息所指示的操作次数以及该查找方向即可找到上述的第二节点。

其中，如果用户连续进行了多次操作，比如将鼠标滚轮连续向上滚动了10次，可以有两种实现方式。在一种实现方式中，由于用户的操作对于计算机而言具有不可预见性，即可以理解为计算机无法得知用户会连续操作几次，因此当鼠标滚轮被向上滚动1次后，不必考虑是否会有后续的操作，可以先生成一个查找指令，该查找指令中的查找操作信息指示：操作次数＝1，查找方向为第一方向，并进行步骤202-203，而后续连续向上滚动9次的操作，可以按照上述方法再连续执行9次步骤201-203，每一次均为查找操作信息指示：操作次数＝1，查找方向为第一方向。在另一种实现方式中，当鼠标滚轮被向上滚动1次后，可以预留很短的等待时间(可以是用户难以察觉的时间，例如几个毫秒)，待连续向上滚动了10次后，生成一次查找指令，该查找指令中的查找操作信息指示：操作次数＝10，查找方向方向为第一方向，然后执行步骤201-203。

在步骤203中，在查找到第二节点后，获取第二节点对应的代码，并突出显示在当前网页的调试窗口中。

通过上述步骤确定了用户所要查询的节点后，获取该节点对应的代码，并且可以对该代码进行突出显示。例如，可以对该代码文本的背景色进行修改，使用比较显眼的颜色，例如用红色，黄色，蓝色作为该代码区域的背景色等或者还可以用虚线框将该代码框出来，以便能够与调试窗口中的其他代码区分开，使用户能够快速定位想查找的节点的代码在HTML文档中的位置。

综上所述，本公开提供的技术方法在接收查找指令之后，根据该查找指令中的查找操作信息和查找方向，在当前网页的节点树中查找符合该查找操作信息和查找方向的第二节点，在查找到第二节点后，获取第二节点对应的代码，并突出显示在当前网页的调试窗口中。本公开实施例所提供的技术方案，能够根据用户操作快速地定位用户所要查找的节点的位置以及该节点所对应的代码，相比传统的人工查找的方式，能够简化查找代码的操作，提高查找效率。

图3是根据一示例性实施例示出的另一种用于网页调试的代码查找方法的流程图，如图3所示，步骤202所述的响应于查找指令，在当前网页的节点树中以当前网页中已选择的第一节点为起点查找符合查找操作信息和查找方向的第二节点的步骤，可以包括以下步骤：

在步骤2021中，获取当前网页的HTML文档的节点树，该节点树中记录了当前网页的HTML文档中每个节点的相对位置关系。

HTML文档的节点树中记录有该HTML文档中所有节点之间的位置关系，例如，对于任一节点，节点树中记录有该节点的父节点是哪个节点，子节点是哪些节点，是否有同胞节点，同胞节点有几个，同胞节点有多个时，该节点自己位于这一层的第几个等等。因此，通过上述的节点树中各个节点之间的父子以及同胞关系，结合根据当前已选择第一节点的位置，以及查找指令即可确定需要的第二节点的位置，节点树是在编写当前网页的HTML文档时就已经确定下来的，记录在该HTML中，因此可以直接获取。

示例的，若HTML文档的内容如下所示：

<html>

<head>

<title>DOM Tutorial</title>

</head>

<body>

<h1>DOM Lesson one</h1>

<p>Hello world！</p>

</body>

</html>

从上述文档中可以看出，除文档节点<html>之外的每个节点都有父节点。例如，<head>和<body>的父节点是<html>节点，文本节点中"Hello world！"的父节点是<p>节点。类似的，一般元素节点都有子节点。例如，<head>节点有一个子节点：<title>节点，而<title>节点也有一个子节点是文本节点"DOM Tutorial"。当不同的节点具有同一个父节点时，它们就是上面提到的同胞节点。例如，<h1>和<p>是就是同胞节点，因为它们的父节点都是<body>节点。之后节点还可以有后代，后代指该节点的所有子节点，或者这些子节点的子节点。例如，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head>节点的后代。向上推导，每个节点还具有先辈，可以是父节点，或者父节点的父节点。比方说，所有的文本节点都可以将<html>节点作为先辈节点。利用上述的后代和先辈之间的关系，获取到整个HTML文档的所有节点关系的节点树结构。

在步骤2022中，根据该节点树，查找操作信息、查找方向以及第一节点在节点树中的位置确定第二节点。

示例地，在一种实施方式中，当该查找指令中的查找操作信息指示当前查找操作为单次查找操作，查找方向为第一方向时(例如用户进行了一次向上滚动鼠标滚轮的操作)，步骤2022可以包括：

判断判断在节点树中是否存在第一节点的第一方向，且与第一节点相邻的同胞节点；

当存在同胞节点时，确定同胞节点为第二节点，完成查找；

当不存在同胞节点时，根据节点树查找第一节点的父节点，将第一节点的父节点确定为第二节点，完成查找。

即，在当前已选择的第一节点为该节点的同胞节点的第一个或没有同胞节点时，此时可以将该的第一节点的父节点作为该用户想要的第二节点。

当该查找指令中的查找操作信息指示当前查找操作为单次查找操作，查找方向为第二方向时(例如用户进行了一次向下滚动鼠标滚轮的操作)，步骤2022可以包括：

判断在节点树中是否存在第一节点的第二方向，且与第一节点相邻的同胞节点；

当存在同胞节点时，确定同胞节点为第二节点，完成一次查找；

当不存在同胞节点时，根据节点树查找第一节点的第一个子节点，将第一个子节点确定为第二节点。

即，在当前已选择的第一节点为该节点的同胞节点的最后一个或没有同胞节点时，可以将该的第一节点的子节点中的第一个子节点作为该用户想要的第二节点。

在另一种实施方式中，当该查找指令中的查找操作信息指示当前查找操作为多次查找操作，查找方向为第一方向时(例如用户进行了连续N次向上滚动鼠标滚轮的操作)，步骤2022可以包括：

判断在节点树中是否存在第一节点的第一方向，且与第一节间隔N-1个节点的同胞节点，N为多次查找操作的次数，N且N为正整数；

当存在同胞节点时，确定同胞节点为第二节点；

当不存在同胞节点时，根据节点树在第一节点的上层查找与第一节间隔N-1个节点的上层节点；

当存在上层节点时，将上层节点确定为第二节点；

当不存在上层节点时，将节点树的根节点确定为第二节点。

与上述的第一种实施方式相似，当用户进行了连续N次的向上滚轮操作时，根据接收到的查找指令，首先确定在第一节点为起点在第一方向上是否存在的一个同胞节点，该同胞节点与该第一节点的之间间隔N-1个节点(或者说该同胞节点是以第一节点为起点在第一方向上的第N个节点)，若不存在，则需要在该第一节点的上层节点中查找，直至查找到与第一节间隔N-1个节点的上层节点为止，但是如果根节点与第一节点之间的节点数小于N-1，则将根节点确定为用户想要的第二节点，即可以看作是根据用户操作已经查找到根节点，即使用户再继续向上滚轮操作，也停止在该根节点处。

当该查找指令中的查找操作信息指示当前查找操作为多次查找操作，查找方向为第二方向时(例如用户进行了连续N次向下滚动鼠标滚轮的操作)，步骤2022可以包括：

判断在节点树中是否存在第一节点的第二方向，且与第一节间隔N-1个节点的同胞节点，N为多次查找操作的次数，N为正整数；

当存在同胞节点时，确定同胞节点为所述第二节点；

当不存在同胞节点时，根据节点树在第一节点的下层查找与第一节间隔N-1个节点的下层节点；

当存在下层节点时，将下层节点确定为第二节点；

当不存在上层节点时，将节点树的最后一个节点确定为第二节点。

与上述的第一种实施方式相似，当用户进行了连续N次的向下滚轮操作时，根据接收到的查找指令，首先确定在第一节点为起点在第二方向上是否存在的一个同胞节点，该同胞节点与该第一节点的之间间隔N-1个节点(或者说该同胞节点是以第一节点为起点在第二方向上的第N个节点)，若不存在，则需要在该第一节点的下层节点中查找，直至查找到与第一节间隔N-1个节点的下层节点为止，但是如果节点树的最后一个节点与第一节点之间的节点数小于N-1，则将该最后一个节点确定为用户想要的第二节点，即可以看作是根据用户操作已经查找到了节点树的最后一个节点，即使用户再继续向下滚轮操作，也停止在该最后一个节点处。

本公开提供的技术方法在接收查找指令之后，根据该查找指令中的查找操作信息和查找方向，在当前网页的节点树中查找符合该查找操作信息和查找方向的第二节点，在查找到第二节点后，获取第二节点对应的代码，并突出显示在当前网页的调试窗口中。本公开实施例所提供的技术方案，能够根据用户操作快速地定位用户所要查找的节点的位置以及该节点所对应的代码，相比传统的人工查找的方式，能够简化查找代码的操作，提高查找效率。

图4是根据一示例性实施例示出的一种用于网页调试的代码查找装置的框图。如图4所示，该装置400包括：

指令接收模块410，被配置为被配置为接收查找指令，该查找指令包括查找操作信息和查找方向。

节点查找模块420，被配置为响应于该查找指令，在当前网页的节点树中以该当前网页中已选择的第一节点为起点查找符合该查找操作信息和该查找方向的第二节点。

代码确定模块430，被配置为在查找到该第二节点后，获取该第二节点对应的代码，并突出显示在该当前网页的调试窗口中。

可选的，图5是根据一示例性实施例示出的一种节点查找模块的框图。如图5所示，该节点查找模块420包括：

节点树获取子模块421，被配置为获取该当前网页的超文本标记语言HTML文档的节点树，该节点树中记录了该当前网页的HTML文档中每个节点的相对位置关系。

节点确定子模块422，被配置为根据该节点树，该查找操作信息、该查找方向以及该第一节点在该节点树中的位置确定该第二节点。

可选的，查找操作信息指示当前查找操作为单次查找操作，查找方向为第一方向，第一方向为从叶子节点向根节点的方向，节点确定子模块422，被配置为：

判断在节点树中是否存在第一节点的第一方向，且与第一节点相邻的同胞节点。

当存在同胞节点时，确定同胞节点为第二节点。

当不存在同胞节点时，根据节点树查找第一节点的父节点。

将第一节点的父节点确定为第二节点。

可选的，查找操作信息指示为单次查找操作，查找方向为第二方向，第二方向为从根节点到叶子节点的方向，节点确定子模块422，还被配置为：

判断在节点树中是否存在第一节点的第二方向，且与第一节点相邻的同胞节点。

当存在同胞节点时，确定同胞节点为第二节点。

当不存在同胞节点时，根据节点树查找第一节点的第一个子节点；

将第一个子节点确定为第二节点。

可选的，查找操作信息指示为多次查找操作，查找方向为第一方向，第一方向为从叶子节点向根节点的方向，节点确定子模块422被配置为：

判断在节点树中是否存在第一节点的第一方向，且与第一节间隔N-1个节点的同胞节点，N为多次查找操作的次数，N为正整数。

当存在同胞节点时，确定同胞节点为第二节点。

当不存在同胞节点时，根据节点树在第一节点的上层查找与第一节间隔N-1个节点的上层节点。

当存在上层节点时，将上层节点确定为第二节点。

当不存在上层节点时，将节点树的根节点确定为第二节点。

可选的，查找操作信息指示为多次查找操作，查找方向为第二方向，第二方向为从根节点到叶子节点的方向，节点确定子模块422被配置为：

判断在节点树中是否存在第一节点的第二方向，且与第一节间隔N-1个节点的同胞节点，N为多次查找操作的次数，N为正整数。

当存在同胞节点时，确定同胞节点为第二节点。

当不存在同胞节点时，根据节点树在第一节点的下层查找与第一节间隔N-1个节点的下层节点。

当存在下层节点时，将下层节点确定为第二节点。

当不存在上层节点时，将节点树的最后一个节点确定为第二节点。

综上所述，本公开的实施例提供的用于网页调试的代码查找装置，该方法通过首先接收查找指令，之后根据查找操作信息和查找方向，在当前网页的节点树中查找第二节点，在查找到第二节点后，获取第二节点对应的代码，并突出显示在当前网页的调试窗口中。能够快速、便捷地确定用户所要查找的节点的位置以及该节点所对应的代码，简化查找和确定代码的操作。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本公开还提供一种计算机可读存储介质，其上存储有计算机程序指令，该程序指令被处理器执行时实现本公开提供的图2-图3实施例所示的方法的步骤。

图6是根据另一示例性实施例示出的一种用于网页调试的代码查找装置600的框图。例如，装置600可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图6，装置600可以包括以下一个或多个组件：处理组件602，存储器604，电力组件606，多媒体组件608，音频组件610，输入/输出(I/O)的接口612，传感器组件614，以及通信组件616。

处理组件602通常控制装置600的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件602可以包括一个或多个处理器620来执行指令，以完成上述的用于网页调试的代码查找方法的全部或部分步骤。此外，处理组件602可以包括一个或多个模块，便于处理组件602和其他组件之间的交互。例如，处理组件602可以包括多媒体模块，以方便多媒体组件608和处理组件602之间的交互。

存储器604被配置为存储各种类型的数据以支持在装置600的操作。这些数据的示例包括用于在装置600上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器604可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电力组件606为装置600的各种组件提供电力。电力组件606可以包括电源管理系统，一个或多个电源，及其他与为装置600生成、管理和分配电力相关联的组件。

多媒体组件608包括在所述装置600和开发者之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自开发者的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件608包括一个前置摄像头和/或后置摄像头。当装置600处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件610被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当装置600处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器604或经由通信组件616发送。在一些实施例中，音频组件610还包括一个扬声器，用于输出音频信号。

I/O接口612为处理组件602和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件614包括一个或多个传感器，用于为装置600提供各个方面的状态评估。例如，传感器组件614可以检测到装置600的打开/关闭状态，组件的相对定位，例如所述组件为装置600的显示器和小键盘，传感器组件614还可以检测装置600或装置600一个组件的位置改变，开发者与装置600接触的存在或不存在，装置600方位或加速/减速和装置600的温度变化。传感器组件614可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件614还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件614还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件616被配置为便于装置600和其他设备之间有线或无线方式的通信。装置600可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件616经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件616还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置600可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的用于网页调试的代码查找方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器604，上述指令可由装置600的处理器620执行以完成上述的用于网页调试的代码查找方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践本公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (14)

1.一种用于网页调试的代码查找方法，其特征在于，所述方法包括：

接收查找指令，所述查找指令包括查找操作信息和查找方向；

响应于所述查找指令，在当前网页的节点树中以所述当前网页中已选择的第一节点为起点查找符合所述查找操作信息和所述查找方向的第二节点；

在查找到所述第二节点后，获取所述第二节点对应的代码，并突出显示在所述当前网页的调试窗口中。

2.根据权利要求1所述的方法，其特征在于，所述根据所述查找操作信息和所述查找方向，在所述当前网页的节点树中查找所述第二节点，包括：

获取所述当前网页的超文本标记语言HTML文档的节点树，所述节点树中记录了所述当前网页的HTML文档中每个节点的相对位置关系；

根据所述节点树，所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点。

3.根据权利要求2所述的方法，其特征在于，所述查找操作信息指示当前查找操作为单次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的父节点；

将所述第一节点的父节点确定为所述第二节点。

4.根据权利要求2所述的方法，其特征在于，所述查找操作信息指示为单次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的第一个子节点；

将所述第一个子节点确定为所述第二节点。

5.根据权利要求2所述的方法，其特征在于，所述查找操作信息指示为多次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的上层查找与第一节间隔N-1个节点的上层节点；

当存在所述上层节点时，将所述上层节点确定为所述第二节点；

当不存在所述上层节点时，将所述节点树的根节点确定为所述第二节点。

6.根据权利要求2所述的方法，其特征在于，所述查找操作信息指示为多次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述根据所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点，包括：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的下层查找与第一节间隔N-1个节点的下层节点；

当存在所述下层节点时，将所述下层节点确定为所述第二节点；

当不存在所述上层节点时，将所述节点树的最后一个节点确定为所述第二节点。

7.一种用于网页调试的代码查找装置，其特征在于，所述装置包括：

指令接收模块，被配置为接收查找指令，所述查找指令包括查找操作信息和查找方向；

节点查找模块，被配置为响应于所述查找指令，在当前网页的节点树中以所述当前网页中已选择的第一节点为起点查找符合所述查找操作信息和所述查找方向的第二节点；

代码获取模块，被配置为在查找到所述第二节点后，获取所述第二节点对应的代码，并突出显示在所述当前网页的调试窗口中。

8.根据权利要求7所述的装置，其特征在于，所述节点查找模块，包括：

节点树获取模块，被配置为获取所述当前网页的超文本标记语言HTML文档的节点树，所述节点树中记录了所述当前网页的HTML文档中每个节点的相对位置关系；

节点确定子模块，被配置为根据所述节点树，所述查找操作信息、所述查找方向以及所述第一节点在所述节点树中的位置确定所述第二节点。

9.根据权利要求8所述的装置，其特征在于，所述查找操作信息指示当前查找操作为单次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的父节点；

将所述第一节点的父节点确定为所述第二节点。

10.根据权利要求8所述的装置，其特征在于，所述查找操作信息指示为单次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节点相邻的同胞节点；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树查找所述第一节点的第一个子节点；

将所述第一个子节点确定为所述第二节点。

11.根据权利要求8所述的装置，其特征在于，所述查找操作信息指示为多次查找操作，所述查找方向为第一方向，所述第一方向为从叶子节点向根节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第一方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的上层查找与第一节间隔N-1个节点的上层节点；

当存在所述上层节点时，将所述上层节点确定为所述第二节点；

当不存在所述上层节点时，将所述节点树的根节点确定为所述第二节点。

12.根据权利要求8所述的装置，其特征在于，所述查找操作信息指示为多次查找操作，所述查找方向为第二方向，所述第二方向为从根节点到叶子节点的方向，所述节点确定子模块，被配置为：

判断在所述节点树中是否存在所述第一节点的所述第二方向，且与所述第一节间隔N-1个节点的同胞节点，N为所述多次查找操作的次数，N为正整数；

当存在所述同胞节点时，确定所述同胞节点为所述第二节点；

当不存在所述同胞节点时，根据所述节点树在所述第一节点的下层查找与第一节间隔N-1个节点的下层节点；

当存在所述下层节点时，将所述下层节点确定为所述第二节点；

当不存在所述上层节点时，将所述节点树的最后一个节点确定为所述第二节点。

13.一种用于网页调试的代码查找装置，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

接收查找指令，所述查找指令包括查找操作信息和查找方向；

响应于所述查找指令，在当前网页的节点树中以所述当前网页中已选择的第一节点为起点查找符合所述查找操作信息和所述查找方向的第二节点；

在查找到所述第二节点后，获取所述第二节点对应的代码，并突出显示在所述当前网页的调试窗口中。

14.一种计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1-6任一项所述方法的步骤。