一种定位程序源码位置的方法及计算设备

技术领域

本发明实施例涉及网页前端技术领域，尤其涉及一种定位程序源码位置的方法、装置、计算设备及计算机可读存储介质。

背景技术

网页前端的开发人员在浏览网页的过程中，若发现网页的某处网页元素的交互、样式、文字或数据处理等需要进行修改时，需要自行查找该网页元素对应的程序源码所在的位置，对程序源码进行修改，以实现对网页中该网页元素的修改，从而优化网页展示效果。

在查找该网页元素对应的程序源码所在位置时，需要先找到该程序源码所在的文件，在文件中找到该程序源码所在的行和列。现有定位程序源码位置时，需要人工定位，费时费力，并且效率低，成本高，不利于对网页的及时修复。

发明内容

本发明实施例提供一种定位程序源码位置的方法，用以提高定位程序源码位置的效率。

第一方面，本发明实施例提供一种定位程序源码位置的方法，包括：

获取光标在当前网页的光标位置对应的第一网页元素；确定所述第一网页元素对应的目标网页源码；

在所述目标网页源码中确定所述第一网页元素对应的目标程序源码的第一位置信息；

生成用于描述所述第一位置信息的临时网页源码，所述临时网页源码用于被浏览器解析后生成显示所述第一位置信息的第二网页元素。

获取光标对应的第一网页元素，在该第一网页元素的目标网页源码中可以确定该第一网页元素对应的目标程序源码的第一位置信息。生成用于描述第一位置信息的临时网页源码，如此，浏览器解析该临时网页源码，就可生成显示所述第一位置信息的第二网页元素。上述技术方案中，实现了自动显示该光标对应的第一网页元素对应的目标程序源码的位置信息的功能，无需人工查找该目标程序源码所在的位置，省时省力，提高了程序源码定位的效率。

在一些实施例中，确定所述第一网页元素对应的目标网页源码，包括：

针对所述第一网页元素所在的网页文件，将所述网页文件的原始程序源码文件转化为抽象语法树；

针对所述网页文件中的任一网页元素，在所述抽象语法树的程序字符信息中提取所述网页元素对应的程序源码的位置信息；

将所述位置信息作为执行要素添加至所述网页元素对应的程序源码的标签或函数语法中；

将添加了执行要素的抽象语法树转化为更新程序源码文件；所述更新程序源码文件用于被编译器进行编译，得到所述网页文件对应的网页源码；

在所述网页源码中确定所述目标网页源码。

将原始程序源码文件转化为抽象语法树，可以自动且快速地提取出任一网页元素对应的程序源码的位置信息。再将位置信息作为执行要素添加至网页元素对应的程序源码的标签或函数语法中，如此得到的更新程序源码文件中的每个程序源码都会携带有该程序源码的位置信息。那么由更新程序源码文件编译得到的网页源码中也会携带有对应程序源码的位置信息。从而实现了自动在网页源码中添加程序源码对应的位置信息的功能。那么在网页源码中确定的目标网页源码就会携带第一网页元素对应的目标程序源码的第一位置信息。

在一些实施例中，在所述目标网页源码中确定所述第一网页元素对应的目标程序源码的第一位置信息，包括：

若确定所述目标网页源码中不包含所述第一网页元素对应的目标程序源码的位置信息，则在所述目标网页源码的上级网页源码中，确定上级程序源码的上级位置信息，将所述上级位置信息作为所述第一位置信息。

若目标网页源码中不包含第一网页元素对应的目标程序源码的位置信息，则可在上级网页源码中找到上级网页源码对应的上级程序源码的上级位置信息，将上级位置信息作为第一位置信息。如此用户通过显示的上级位置信息也可很快查找到目标程序源码。降低了用户自行查找目标程序源码的工作量。

在一些实施例中，在生成用于描述所述第一位置信息的临时网页源码之前，还包括：

确定所述第一网页元素在所述当前网页中的第二位置信息；

生成用于描述所述第一位置信息的临时网页源码，包括：

根据所述第二位置信息确定所述临时网页源码对应的所述第二网页元素在所述当前网页中的第三位置信息；所述第二位置信息和所述第三位置信息之间的距离小于预设阈值；

根据所述第三位置信息生成所述临时网页源码。

通过上述方式，可以将目标程序源码的第一位置信息显示在距离第一网页元素较近的位置处，而不是随便显示在网页的任何位置。

在一些实施例中，还包括：

将所述临时网页源码添加至当前网页源码中的最高层。

如此避免了第一位置信息被当前网页的其他网页元素遮盖而无法显示的问题。

在一些实施例中，在将原始程序源码文件转化为抽象语法树之前，还包括：

接收编译器发送的程序源码改动提示消息；所述编译器用于在监控到所述原始程序源码文件发生改动后，发送程序源码改动提示消息。

由于编译器本身具有监控原始程序源码文件是否发生改动并发送提示消息的功能，因此通过拦截编译器发送的程序源码改动提示消息，重复将原始程序源码文件转化为抽象语法树的步骤，如此，就可得到更新的网页源码，该更新的网页源码中包含有各程序源码的更新的位置信息。

在一些实施例中，获取光标在当前网页的光标位置对应的网页元素之前，还包括：

接收到用户发送的开启定位代码位置命令。

为了避免在用户不想要显示程序源码的位置信息的时候，显示了程序源码的位置信息，影响用户对网页中其他功能的使用，因此只有在接收到用户发送的开启定位代码位置命令后再开始获取光标位置的操作，可以提高用户体验，提高显示程序源码位置的智能性和灵活性。

在一些实施例中，在生成用于描述所述第一位置信息的临时网页源码之后，还包括：

检测到针对所述第二网页元素的触发操作后，获取所述第一位置信息；

根据所述第一位置信息展示目标页面；所述目标页面中包括所述第一网页元素对应的目标程序源码。

上述技术方案中，在用户对第二网页元素有触发操作时，处理器可以检测到该触发操作，从而自动展示包括第一网页元素对应的目标程序源码的目标页面，以供用户直接对目标程序源码进行修改等操作。无需用户自行查找该目标程序源码，节省了用户的时间，提升了用户体验。

第二方面，本发明实施例还提供一种定位程序源码位置的装置，包括：

获取单元，用于：获取光标在当前网页的光标位置对应的第一网页元素；确定所述第一网页元素对应的目标网页源码；

处理单元，用于：

在所述目标网页源码中确定所述第一网页元素对应的目标程序源码的第一位置信息；

生成用于描述所述第一位置信息的临时网页源码，所述临时网页源码用于被浏览器解析后生成显示所述第一位置信息的第二网页元素。

在一些实施例中，所述获取单元具体用于：

针对所述第一网页元素所在的网页文件，将所述网页文件的原始程序源码文件转化为抽象语法树；

针对所述网页文件中的任一网页元素，在所述抽象语法树的程序字符信息中提取所述网页元素对应的程序源码的位置信息；

将所述位置信息作为执行要素添加至所述网页元素对应的程序源码的标签或函数语法中；

将添加了执行要素的抽象语法树转化为更新程序源码文件；所述更新程序源码文件用于被编译器进行编译，得到所述网页文件对应的网页源码；

在所述网页源码中确定所述目标网页源码。

在一些实施例中，所述处理单元具体用于：

若确定所述目标网页源码中不包含所述第一网页元素对应的目标程序源码的位置信息，则在所述目标网页源码的上级网页源码中，确定上级程序源码的上级位置信息，将所述上级位置信息作为所述第一位置信息。

在一些实施例中，所述处理单元还用于：

确定所述第一网页元素在所述当前网页中的第二位置信息；

所述处理单元具体用于：

根据所述第二位置信息确定所述临时网页源码对应的所述第二网页元素在所述当前网页中的第三位置信息；所述第二位置信息和所述第三位置信息之间的距离小于预设阈值；

根据所述第三位置信息生成所述临时网页源码。

在一些实施例中，所述处理单元还用于：

将所述临时网页源码添加至当前网页源码中的最高层。

在一些实施例中，所述处理单元还用于：

接收编译器发送的程序源码改动提示消息；所述编译器用于在监控到所述原始程序源码文件发生改动后，发送程序源码改动提示消息。

在一些实施例中，所述获取单元还用于：

接收到用户发送的开启定位代码位置命令。

在一些实施例中，所述处理单元还用于：

检测到针对所述第二网页元素的触发操作后，获取所述第一位置信息；

根据所述第一位置信息展示目标页面；所述目标页面中包括所述第一网页元素对应的目标程序源码。

第三方面，本发明实施例还提供一种计算设备，包括：

存储器，用于存储计算机程序；

处理器，用于调用所述存储器中存储的计算机程序，按照获得的程序执行上述任一方式所列的定位程序源码位置的方法。

第四方面，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行程序，所述计算机可执行程序用于使计算机执行上述任一方式所列的定位程序源码位置的方法。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的程序源码、网页源码和网页元素之间的关系示意图；

图2为本发明实施例提供的一种定位程序源码位置的方法的流程示意图；

图3为本发明实施例提供的一种网页源码示意图；

图4为本发明实施例提供的一种可能的显示效果的示意图；

图5为本发明实施例提供的一种定位程序源码位置的方法的流程示意图；

图6a为本发明实施例提供的一种通过标签生成网页源码的程序源码转化成的抽象语法树的示意图；

图6b为本发明实施例提供的一种通过函数生成网页源码的程序源码转化成的抽象语法树的示意图；

图7为本发明实施例提供的一种可能的修改后的抽象语法树->更新程序源码文件->网页源码的转化过程示意图；

图8为本发明实施例提供的一种定位程序源码位置的方法的流程示意图；

图9为本发明实施例提供的一种定位程序源码位置的装置的结构示意图；

图10为本发明实施例提供的一种计算机设备的结构示意图。

具体实施方式

为使本申请的目的、实施方式和优点更加清楚，下面将结合本申请示例性实施例中的附图，对本申请示例性实施方式进行清楚、完整地描述，显然，所描述的示例性实施例仅是本申请一部分实施例，而不是全部的实施例。

基于本申请描述的示例性实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请所附权利要求保护的范围。此外，虽然本申请中公开内容按照示范性一个或几个实例来介绍，但应理解，可以就这些公开内容的各个方面也可以单独构成一个完整实施方式。

需要说明的是，本申请中对于术语的简要说明，仅是为了方便理解接下来描述的实施方式，而不是意图限定本申请的实施方式。除非另有说明，这些术语应当按照其普通和通常的含义理解。

本申请中说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似或同类的对象或实体，而不必然意味着限定特定的顺序或先后次序，除非另外注明(Unless otherwise indicated)。应该理解这样使用的用语在适当情况下可以互换，例如能够根据本申请实施例图示或描述中给出那些以外的顺序实施。

此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的那些组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。

在介绍本发明实施例提供的定位程序源码位置的方法之前，先对如下名词作解释。

1、程序源码：开发者编写的用于生成网页源码的代码。开发者对程序源码进行修改，就可实现修改该程序源码对应的网页源码，进而对该网页源码对应的网页元素进行修改的功能。

2、网页源码：由编译器对程序源码进行编译，生成网页源码，即前端页面对应的源代码。浏览器可以对网页源码进行解析，从而渲染出网页中的各网页元素。

3、网页元素：网页中的任一元素，如输入框、文字、颜色、样式等。

图1示例性的示出了上述程序源码、网页源码和网页元素之间的关系。

RPA(Robotic Process Automation，机器流程自动化)技术可以模拟员工在日常工作中通过键盘、鼠标对计算机的操作，可以代替人类执行登录系统、操作软件、读写数据、下载文件、读取邮件等操作。以自动化机器人作为企业的虚拟劳动力，可以将员工从重复、低价值的工作中解放出来，将精力投入到高附加值的工作上，从而可以使企业在数字化智能化转型的同时又做到降低成本、增加效益。

RPA是一种使用软件机器人取代业务流程中的人工任务，并且像人一样与计算机的前端系统进行交互，因此RPA可以看作是一种运行在个人PC机或服务器中的软件型程序机器人，通过模仿用户在电脑上进行的操作来替代人类自动重复这些操作，例如检索邮件、下载附件、登录系统、数据加工分析等活动，快速、准确、可靠。虽然和传统的物理机器人一样都是通过设定的具体规则来解决人类工作中速度和准确度的问题，但是传统的物理机器人是软硬件结合的机器人，需要在特定的硬件支持下配合软件才能执行工作；而RPA机器人是纯软件层面的，只要安装了相应的软件，就可以部署到任意一台PC机和服务器中来完成规定的工作。

也就是说，RPA是一种利用“数字员工”代替人进行业务操作的一种方式及其相关的技术。本质上RPA是通过软件自动化技术，模拟人实现计算机上系统、软件、网页和文档等对象的无人化操作，获取业务信息、执行业务动作，最终实现流程自动化处理、人力成本节约和处理效率提升。

现有技术中，在用户浏览网页的过程中，若要对某个网页元素的程序源码进行修改时，需要在各个包含大量程序源码的文件中自行查找所需修改的程序源码，无疑十分耗时耗力。本申请实施例就采用了RPA技术，实现了自动化地在网页中显示某个网页元素的程序源码的位置信息的功能。

为了能够在开发者浏览网页的过程中，直接查看到任一网页元素对应的程序源码的位置，及时方便地对程序源码进行修改，本申请实施例提供一种自动定位程序源码位置的方法，如图2所示。

现有技术中，程序员编写程序源码，编译器获取程序源码对其进行编译，得到网页源码，浏览器获取网页源码对其进行解析渲染，生成网页，网页中包含各网页元素。由于程序源码中不包含程序源码的位置信息，那么网页源码中也不会包含位置信息，因此最终展示出的网页元素中不会显示该网页元素对应的程序源码位置信息。

为了解决上述问题，本申请实施例中，在编译器之后设置了后置插件。在编译器生成网页源码后，后置插件对其进行拦截，完成如下步骤。包括：

步骤201，获取光标在当前网页的光标位置对应的第一网页元素；确定所述第一网页元素对应的目标网页源码。

步骤202，在所述目标网页源码中确定所述第一网页元素对应的目标程序源码的第一位置信息。

步骤203，生成用于描述所述第一位置信息的临时网页源码，所述临时网页源码用于被浏览器解析后生成显示所述第一位置信息的第二网页元素。

在步骤201中，后置插件通过W3C(https://www.w3.org/)标准程序接口(以下简称“标准程序接口”)监听用户的光标移动过程，获取光标在当前网页的光标位置对应的第一网页元素。例如，光标所在的位置对应的第一网页元素可以是一个输入框、一个图标等。

后置插件提取该网页元素对应的目标网页源码。

为了避免在用户不想要显示某个网页元素的程序源码的位置信息的时候，显示了程序源码的位置信息，影响用户对网页中其他功能的使用，可以设置，后置插件在接收到用户发送的开启定位代码位置命令后，再获取光标在当前网页的光标位置对应的网页元素。如此，只有在接收到用户发送的开启定位代码位置命令后再开始获取光标位置的操作，可以提高用户体验，提高显示程序源码位置的智能性和灵活性。

例如，开启定位代码位置命令为某个快捷键。当用户按下该快捷键后，后置插件接收到开启定位代码位置命令，从而获取光标位置对应的第一网页元素。快捷键可以为“Alt”、“Ctrl”等。

在步骤202中，后置插件在该目标网页源码中确定是否包含该第一网页元素对应的目标程序源码的位置信息。若包含，则提取该位置信息作为第一位置信息。若不包含所述第一网页元素对应的目标程序源码的位置信息，则在所述目标网页源码的上级网页源码中，确定上级程序源码的上级位置信息，将所述上级位置信息作为所述第一位置信息。由于网页源码是树形结构，通过向上递归遍历上级网页源码，获取具有位置信息的上级网页源码，在上级网页源码中确定的上级程序源码的上级位置信息也可以代表第一位置信息。

图3示出了一种可能的网页源码的示意图。若光标位置对应的第一网页元素对应的目标网页源码为图3中的第4行代码，可以看出第4行代码中包含了该第一网页元素对应的目标程序源码的位置信息“/src/input.js:5:18/”。因此可以将该位置信息直接作为第一位置信息。

若光标位置对应的第一网页元素对应的目标网页源码为图3中的第5行代码，可以看出第5行代码中并未包含该第一网页元素对应的目标程序源码的位置信息。因此向上遍历，直至确定具有位置信息的上级网页源码。在本例中，向上遍历一级，得到第4行代码，第4行代码中就包含了上级网页元素对应的上级程序源码对应的上级位置信息“/src/input.js:5:18/”。因此可以将该位置信息作为第一位置信息。如此，虽然最后在第一网页元素处显示的第一位置信息不是第一网页元素对应的程序源码的位置信息，但是显示的是第一网页元素的上级网页元素的上级程序源码对应的上级位置信息，通过该位置信息程序员也可很快找到第一网页元素的程序源码。同样可以减少查找程序源码的时间，降低了用户自行查找目标程序源码的工作量。

在步骤203中，得到第一位置信息后，后置插件可以生成用于描述所述第一位置信息的临时网页源码。即，临时网页源码中携带有第一位置信息。

当浏览器对该临时网页源码进行解析渲染后，可以生成第二网页元素，该第二网页元素可以显示该第一位置信息。

一种具体的实现方式，第二网页元素为：对第一网页元素进行高亮的标志+展示第一位置信息的显示框。

在图4中，当用户将光标定位在“文本”对应的输入框时，后置插件获取该光标位置对应的第一网页元素，即该输入框。后置插件通过该输入框对应的目标网页源码获取该输入框对应的程序源码的第一位置信息“\src\pages\dsu\components\basic-configuration.js:1537:8”。根据该第一位置信息生成临时网页源码，临时网页源码中描述了该第一位置信息。浏览器通过对该临时网页源码进行解析，得到第二网页元素，该第二网页元素包括图中的高亮部分410和高亮部分下面的位置介绍部分420，高亮部分410就是对第一网页元素进行高亮的标志，位置介绍部分420就是展示第一位置信息的显示框。可以看出，第二网页元素中可以显示输入框对应的程序源码的第一位置信息。一种可能的方式，用户在看到第二网页元素后，就知道了第一网页元素的目标程序源码的第一位置信息，那么用户可以自行打开该目标程序源码对应的文件(\src\pages\dsu\components\basic-configuration.js)，找到该文件中的第1537行第8列。从而找到该目标程序源码，对该目标程序源码进行修改。

另一种可能的方式，用户可以点击第二网页元素，处理器检测到该点击操作后，自动跳转到包括目标程序源码的目标页面，那么用户无需自行查找，直接在目标页面对目标程序源码进行修改。具体地，在生成用于描述所述第一位置信息的临时网页源码之后，还包括：检测到针对所述第二网页元素的触发操作后，获取所述第一位置信息；根据所述第一位置信息展示目标页面；所述目标页面中包括所述第一网页元素对应的目标程序源码。这里的触发操作可以为左击、双击、右击或者可以为键盘上的某个按键，本申请实施例对触发操作的具体形式不做限制。

例如，用户点击该第二网页元素的位置介绍部分420中显示的位置信息，处理器检测到该点击操作后，获取第一位置信息为\src\pages\dsu\components\basic-configuration.js文件中的第1537行第8列。因此处理器自动打开这个文件\src\pages\dsu\components\basic-configuration.js，自动跳转到第1537行第8列。用户就可对目标程序源码进行直接修改。

浏览器对临时网页源码进行解析从而生成第二网页元素的过程可以为，浏览器直接获取该临时网页源码，对其进行解析，直接生成第二网页元素。

也可以为，将所述临时网页源码添加至当前网页源码。然后浏览器获取该添加了临时网页源码的网页源码，对其进行解析，从而展示整张网页。该整张网页中包含第二网页元素。

为了避免第一位置信息被当前网页的其他网页元素遮盖而无法显示的问题，可以将临时网页源码添加至当前网页源码的最高层。由于网页源码是树形结构，因此可以将临时网页源码添加至树结构的最高层。

获取光标对应的第一网页元素，在该第一网页元素的目标网页源码中可以确定该第一网页元素对应的目标程序源码的第一位置信息。生成用于描述第一位置信息的临时网页源码，如此，浏览器解析该临时网页源码，就可生成显示所述第一位置信息的第二网页元素。上述技术方案中，实现了自动显示该光标对应的第一网页元素对应的目标程序源码的位置信息的功能，无需人工查找该目标程序源码所在的位置，省时省力，提高了程序源码定位的效率。

在一种可能的实现方式中，在生成用于描述所述第一位置信息的临时网页源码之前，还包括：确定所述第一网页元素在所述当前网页中的第二位置信息。那么生成用于描述所述第一位置信息的临时网页源码，包括：根据所述第二位置信息确定所述临时网页源码对应的所述第二网页元素在所述当前网页中的第三位置信息；所述第二位置信息和所述第三位置信息之间的距离小于预设阈值；根据所述第三位置信息生成所述临时网页源码。

举个例子，确定第一网页元素为输入框，该输入框在当前网页中的第二位置信息为左下角和右上角的坐标，分别为(500,500)和(600,600)，并确定该输入框的尺寸为100×100。要使第二网页元素距离第一网页元素的距离较近，则需使第二网页元素在当前网页中的第三位置信息与第二位置信息的距离小于预设阈值，如此第二网页元素与第一网页元素不至于相距太远。那么根据第三位置信息生成的临时网页源码对应的第二网页元素与第一网页元素不至于相距太远。

一种具体的实现方式，生成的临时网页源码中可以携带标志的位置、尺寸、颜色和样式以及展示第一位置信息的显示框的位置、尺寸、颜色和样式。那么生成的第二网页元素就具有了更加丰富多彩的形式。对第一网页元素进行高亮可以提示用户当前显示的位置信息对应的是哪个网页元素的程序源码的位置信息。

通过上述方式，可以将目标程序源码的第一位置信息显示在距离第一网页元素较近的位置处，而不是随便显示在网页的任何位置。

下面具体介绍如何使目标网页源码中包含位置信息的方法。

一种可能的实现方式，在编译器之前设置一个前置插件，该前置插件用于拦截发送至编译器的程序源码，对该程序源码进行修改。修改后的程序源码中携带有各网页元素对应的程序源码的位置信息。修改后的程序源码被送入编译器，编译器对其进行编译，得到网页源码，网页源码中就会携带有位置信息。在这样的网页源码中的目标网页源码中也自然会包含目标程序源码的第一位置信息。

具体地，图5示出了详细的确定所述第一网页元素对应的目标网页源码的步骤，包括：

步骤501，针对所述第一网页元素所在的网页文件，将所述网页文件的原始程序源码文件转化为抽象语法树；

步骤502，针对所述网页文件中的任一网页元素，在所述抽象语法树的程序字符信息中提取所述网页元素对应的程序源码的位置信息；

步骤503，将所述位置信息作为执行要素添加至所述网页元素对应的程序源码的标签或函数语法中；

步骤504，将添加了执行要素的抽象语法树转化为更新程序源码文件；所述更新程序源码文件用于被编译器进行编译，得到所述网页文件对应的网页源码；

步骤505，在所述网页源码中确定所述目标网页源码。

在步骤501中，针对所述第一网页元素所在的网页文件，将所述网页文件的原始程序源码文件转化为抽象语法树。具体为，读取原始程序源码文件中所有后缀名为js(javascript文件)、jsx(javascript语法扩展)、mjs(javascript模块)、ts(typescript文件)、tsx(typescript语法扩展)、vue(vue组件文件)文件中的字符流，过滤掉其中的注释和空白字符(换行符、空格、制表符)后，提取字符流中的每个关键字、操作符、标签符、标点符号，将结果保存为程序字符单元。分析所有程序字符单元，将程序字符单元转化成有语法含义和程序字符信息的抽象语法树，同时，验证语法，如果包含语法错误，则中止该转化抽象语法树的程序。

程序源码可以是通过标签生成网页源码，也可以是通过函数生成网页源码。针对不同的程序源码，转化的抽象语法树也不同。图6a示出了通过标签生成网页源码的程序源码转化成的抽象语法树的示意图。图6b示出了通过函数生成网页源码的程序源码转化成的抽象语法树的示意图。

在步骤502中，针对所述网页文件中的任一网页元素，在所述抽象语法树的程序字符信息中提取所述网页元素对应的程序源码的位置信息。

由于网页源码总是通过标签或函数生成，因此可以通过这个特点从抽象语法树中分析出生成网页源码的标签或函数语法，提取这些语法中的程序字符信息，将程序字符信息中包含的代码位置和文件位置信息拼接成用于代码定位的字符串。比如，当前网页文件“search.js”，针对该网页文件中的任一网页元素，在抽象语法树的程序字符信息中提取出该网页元素对应的程序源码的位置信息为第100行第8列。则拼接成的字符串为“/search.js:100:8”。表示该程序源码位于search.js文件的第100行第8列。

在步骤503中，将所述位置信息作为执行要素添加至所述网页元素对应的程序源码的标签或函数语法中。

修改提取的标签或函数语法，将用于代码定位的字符串作为属性或参数添加到所述网页元素对应的程序源码的标签或函数语法中，由此之后的更新程序源码文件将携带各程序源码的位置信息。比如程序源码”createElement(‘div’)”默认生成的网页源码为”