元素的定位方法、装置、电子设备及存储介质与流程

1.本发明实施例涉及互联网技术领域，尤其涉及一种元素的定位方法、装置、电子设备及存储介质。


背景技术：

2.互联网是使用标准互联网协议组通信协议链接大量的设备的互联计算机网络的系统，大多数的用户通过网页和网站接触互联网，网站是从单个网域提供的一组相关的网页，并托管在至少一个网络服务器上。现今的网页越来越多元化，对于用户而言，多种多样的网页提高了用户的体验度。但是对于研发人员而言，在研发、测试、调试阶段增加了工作量。
3.在对网页进行调试时，需要针对网页上的每个元素对照着编译器中的对应的元素进行调试，当网页中出现大量各种各样的元素时，通过人工从编辑器中挑选出每个元素源文件中对应的内容耗时耗力，并且，容易出现错误。


技术实现要素：

4.本发明实施例提供一种元素的定位方法、装置、电子设备及存储介质，以实现根据页面中的元素，确定编译器中该元素在源文件中的位置信息，提高了查找效率。
5.第一方面，本发明实施例提供了一种元素的定位方法，所述方法包括：
6.当检测到触发操作时，确定与所述触发操作相对应的目标元素；
7.确定与所述目标元素相对应的元素属性信息；
8.基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息；
9.其中，所述目标源文件为编译器中对各元素所属页面进行编译后得到的程序文件。
10.第二方面，本发明实施例还提供了一种元素的定位装置，所述装置包括：
11.目标元素确定模块，用于当检测到触发操作时，确定与所述触发操作相对应的目标元素；
12.元素属性信息确定模块，用于确定与所述目标元素相对应的元素属性信息；
13.目标位置信息确定模块，用于基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息；
14.其中，所述目标源文件为编译器中对各元素所属页面进行编译后得到的程序文件。
15.第三方面，本发明实施例还提供了一种电子设备，所述电子设备包括：
16.一个或多个处理器；
17.存储装置，用于存储一个或多个程序，
18.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明实施例任一所述的元素的定位方法。
19.第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如本发明实施例任一所述的元素的定位方法。
20.本发明实施例的技术方案，通过检测页面上的触发操作，确定与触发操作相对应的目标元素。并确定与目标元素相对应的元素属性信息，基于元素属性信息，确定目标元素在目标源文件中的目标位置信息的方法，提高了元素定位的效率。通过本发明实施例的技术方案，在页面上确定了目标元素后，基于目标元素的元素属性信息自动在目标源文件中确定目标元素的目标位置信息，进而，可以快速找到目标元素对应的源文件，从整体上提高了对目标元素对应的源文件进行修改等操作的效率，提高用户的体验度。
附图说明
21.为了更加清楚地说明本发明示例性实施例的技术方案，下面对描述实施例中所需要用到的附图做一简单介绍。显然，所介绍的附图只是本发明所要描述的一部分实施例的附图，而不是全部的附图，对于本领域普通技术人员，在不付出创造性劳动的前提下，还可以根据这些附图得到其他的附图。
22.图1为本发明实施例一中的一种元素的定位方法的流程示意图；
23.图2为本发明实施例二中的一种元素的定位方法的流程示意图；
24.图3为本发明实施例三中的一种元素的定位方法的示意图；
25.图4为本发明实施例四中的一种元素的定位装置的结构程示意图；
26.图5为本发明实施例五中的一种电子设备的结构程示意图。
具体实施方式
27.下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。
28.实施例一
29.图1为本发明实施例所提供的一种元素的定位方法的流程示意图，本实施例可适用于在页面调试阶段，确定页面中的元素在源文件中的位置信息的情形，该方法可以由页面的定位装置来执行，该装置可以通过软件和/或硬件的形式实现。
30.如图1所述，本发明实施例的页面的定位方式具体包括如下步骤：
31.s110、当检测到触发操作时，确定与所述触发操作相对应的目标元素。
32.其中，触发操作是指在检测到页面上针对某个或者多个元素的点击操作。检测触发操作的方式可以是检测enter功能按键的触发操作，也可以是检测鼠标的触发操作等。触发操作的检测方式可以根据实际情况进行具体的设置。元素是指页面上显示的内容，或者可以点击的控件，目标元素是指触发操作对应的元素。
33.需要说明的是，这里的页面包括网页页面，也可以是移动终端的app页面。
34.具体的，通过检测触发操作，确定与触发操作对应的目标元素，为后续确定目标元素在目标源文件中的位置信息做准备工作。
35.在本发明实施例中，设置了至少两种触发操作的检测方式，可选的，所述当检测到
触发操作时，确定与所述触发操作相对应的目标元素，包括：当检测到所述光标在所述页面上各元素所属位置信息的停滞时长大于预设停滞时长时，确定所述位置信息所对应的目标元素；和/或当检测到鼠标的触发操作时，确定与所述触发操作对应的目标元素。
36.其中，光标是指页面上的可以移动的光标，光标的形状可以是手型、箭头型等，元素的位置信息表示元素在一个页面上的具体位置，位置信息可以是位置坐标，位置标识等，比如，元素的位置信息是指位置坐标，以页面的中心作为原点，划分出横坐标和纵坐标，之后应用横坐标和纵坐标的形式表示元素的位置信息。停滞时长是指光标停止不动的时长。鼠标的触发操作是指用户点击鼠标而生成的触发操作。这里的鼠标触发操作可以是左键触发，也可以是右键触发。
37.具体的，在页面上当检测到光标停滞，确定光标是否在元素所属的位置信息内停滞，也即首先确定光标停滞的位置是否有元素。当确定光标停滞的位置有对应的元素时，计算光标停滞时长，当停滞时长大于预先设置的停滞时长时，基于位置信息确定目标元素。和/或，通过检测鼠标针对某一个元素的触发确定目标元素。
38.s120、确定与所述目标元素相对应的元素属性信息。
39.其中，元素属性信息是指元素的元属性，包括坐标信息、元素标识信息、元素的类型等。元素的类型是指元素属于图像、视频、文本、功能按键等类型。元素标识信息是指将该元素与其他元素区分开的标识信息，元素标识信息包括元素的名称等。
40.具体的，当确定目标元素后，获取目标元素的元素属性信息，为后续根据元素属性信息在目标源文件中确定目标元素的位置信息做准备工作。
41.s130、基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息。
42.其中，所述目标源文件为编译器中对各元素所属页面进行编译，从而得到的文件。目标位置信息是指目标元素在对应的源文件中的位置信息。编译器是指对页面上的元素进行编辑的软件。
43.具体的，根据元素属性信息，在目标源文件中确定目标元素的位置信息，以此完成目标元素的定位。通过在页面上确定目标元素，并获取目标元素的元素属性信息确定在目标源文件中目标元素的位置信息的方式，简化了用户手动在编译器中的众多源文件中翻找目标元素的对应位置信息的工作，提高了元素定位的效率。
44.在本发明实施例中，所述基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息，包括：基于所述元素属性信息向所述编译器发送查询请求，以使所述编译器基于查询请求中的元素属性信息确定所述目标元素在所述目标源文件中的目标位置信息。
45.其中，所述查询请求包括元素属性信息。所述查询请求可以是http请求。
46.具体的，根据元素属性信息生成查询请求，并将查询请求发送至编译器，以使编译器接收到查询请求后，根据查询请求中包括的元素属性信息确定目标源文件中的目标元素的位置信息。通过查询请求建立页面与编译器中的目标源文件的连接，加快查询的速度。
47.本发明实施例的技术方案，通过检测页面上的触发操作，确定与触发操作相对应的目标元素。并确定与目标元素相对应的元素属性信息，基于元素属性信息，确定目标元素在目标源文件中的目标位置信息的方法，提高了元素定位的效率，解决了现有技术中从大
量的源文件中手动翻找该页面元素对应的位置，耗时长的问题，实现了基于目标元素的元素属性信息自动在目标源文件中确定目标元素的目标位置信息，进而，可以快速找到目标元素对应的源文件，从整体上提高了对目标元素对应的源文件进行修改等操作的效率，提高用户的体验度。
48.实施例二
49.图2是本发明实施例提供的一种元素的定位方法的流程示意图，本发明实施例是在上述实施例的可选方案的基础上，增加了将预设元素属性信息添加到待编译源文件中的步骤，对于该步骤的具体内容，将在本发明实施例中进行详细的阐述。其中，与上述实施例相同或者相似的技术术语将不再赘述。
50.如图2所述，本发明实施例的页面的定位方式具体包括如下步骤：
51.s210、在所述编译器对所述页面中的各待编译元素进行编译时，将各待编译元素的预设元素属性信息写入至待编译源文件。
52.需要说明的是，本发明实施例中的应用场景对元素的编译阶段，具体是指对元素的元素属性信息已经进行了预先的设置。现在，需要将待编译元素对应的预设元素属性信息添加到待编译源文件中，以基于添加了待编译元素的待编译源文件生成目标源文件。
53.其中，待编译元素是指需要将预设元素属性信息写入到待编译源文件中的元素。预设元素属性信息是指事先编辑好的元素的元素属性信息。
54.具体的，在编译器中，对页面中的各个待编译元素进行编译时，可以将每个待编译元素的预设元素属性信息写入到待编译源文件中。可选的，在待编译源文件中找到待编译元素的位置信息(待编译元素对应的源文件)，在待编译元素对应的位置将预设元素属性信息添加到待编译源文件中。
55.当然，对于将各待编译元素的预设元素属性信息写入至待编译源文件，也可以是设置待编译文件中各个待编译元素与元素属性信息的关联关系，将关联关系标识写入到待编译源文件中。其中，关联关系标识可以设置在待编译源文件中的待编译元素所在位置。当基于元素属性信息确定目标元素在目标源文件中的目标位置信息时，可以基于关联关系中元素属性信息对应的关联关系标识，之后确定关联关系标识在目标源文件中的目标元素的位置信息。
56.s220、基于写入预设元素属性信息的待编译源文件，生成目标源文件。
57.具体的，当待编译源文件中每个元素都已经添加了元素属性信息，基于待编译源文件生成目标源文件，以在检测到触发目标元素时，根据目标元素的元素属性信息和所述源文件中的预设元素属性信息，确定所述目标元素的目标位置信息。
58.在本发明实施例中，所述在所述编译器对所述页面中的各待编译元素进行编译时，将各待编译元素的预设元素属性信息写入至待编译源文件，包括：获取源文件模板中预先编辑的待使用配置项以及默认配置项，基于所述待使用配置项以及所述默认配置项生成目标配置项；其中，所述目标配置项与所述预设元素属性信息相对应；基于所述源文件模板中的文件信息生成抽象语法树；基于所述目标配置项确定所述抽象语法树中各个叶子节点所对应的待编译元素的预设元素属性信息。
59.其中，源文件模板是指编译元素的源代码的模板，可以采用.vue模板。默认配置项是指在源文件模板中预先设置的配置项，包括元素的位置信息等。待使用配置项是指除了
默认配置项以外的，用户设置的配置项。目标配置项与元素属性信息相对应，是指元素属性信息基于目标配置项进行的配置。在对元素进行文件编写的阶段，根据页面需要，对元素的元素属性信息进行设置。抽象语法树(abstract syntax code,ast)可以将源文件以树状结构，叶子节点与待编译元素存在对应关系。
60.具体的，获取源文件模板中的预先编辑好的待使用配置项和默认配置项，并将待使用配置项和默认配置项进行结合，生成目标配置项。根据源文件模板中的元素的源代码生成抽象语法树，基于目标配置项确定抽象语法树中各个叶子节点所对应的待编译元素的元素属性信息。依次将每个待编译元素的元素属性信息添加到对应的待编译元素的位置处。
61.在本发明实施例中，所述基于所述目标配置项确定所述抽象语法树中各个叶子节点所对应的待编译元素的预设元素属性信息之后，还包括：基于目标抽象语法树生成源文件组；其中，所述目标抽象语法树是所述抽象语法树的各叶子节点所对应的待编译元素添加预设元素属性信息后生成的语法树，所述源文件组包括至少一个源文件，每个源文件是基于对应的页面中的元素生成的；所述基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息，包括：基于所述元素属性信息确定所述目标元素在源文件组中的位置信息。
62.其中，源文件包括着一个页面内的所有元素的源代码信息，源文件组包括至少一个页面对应的源文件。
63.具体的，当抽象语法树的各叶子节点所对应的待编译元素都添加了元素属性信息后，基于该抽象语法树生成目标抽象语法树，并根据目标抽象语法树生成源文件组。当检测到触发操作，并基于触发操作确定了目标元素，基于目标元素确定元素属性信息后，基于元素属性信息确定目标元素在源文件组中的位置。由于源文件组中的源文件数量巨大，若是手动查找目标元素在源文件组中的位置，耗时较长，人工成本高。采用本发明实施例的技术方案可以提高目标元素的定位效率。
64.在本发明实施例中，所述基于所述元素属性信息确定所述目标元素在源文件组中的位置，包括：基于所述元素属性信息从源文件组中确定目标源文件；确定所述目标元素在所述目标源文件中的位置信息。
65.具体的，源文件组包括多个页面的源文件，所以基于元素属性信息先确定源文件组中与元素属性信息对应的页面的目标源文件，之后从目标源文件中确定目标元素的位置信息。可选的，元素属性信息中包括当前页面的页面标识，在对应的源文件中包括对应页面的页面标识，比如，在源文件的名称中包含对应页面的页面标识。通过页面标识确定页面的目标源文件，之后，从目标源文件确定目标元素的位置信息。
66.s230、当检测到触发操作时，确定与所述触发操作相对应的目标元素。
67.s240、确定与所述目标元素相对应的元素属性信息。
68.s250、基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息。
69.本发明实施例的技术方案，通过在编译器对页面中的各个待编译元素进行编译时，将各待编译元素的预设元素属性信息写入到待编译源文件中，基于写入预设元素属性信息的待编译源文件，生成目标源文件。之后在检测到触发操作时，确定触发操作相对应的
目标元素，确定目标元素相对应的元素属性信息，之后基于元素属性信息，确定目标元素在目标源文件中的目标位置信息。通过本发明实施例的技术方案，事先将待编译元素的预设元素属性信息添加到待编译源文件中，基于待编译源文件生成的目标源文件。实现了基于在页面上对目标元素的触发操作，确定目标元素以及目标元素的元素属性信息，在目标源文件中确定与元素属性信息对应的目标元素的位置信息，提高了元素定位的效率。
70.实施例三
71.图3为本发明实施例所提供的一种元素的定位方法的示意图。本发明实施例是上述实施例的可选实施例，本发明实施例对网页端或者移动终端的浏览器的页面和编译器进行联动设置，达到在页面上选择某个元素时，可以快速定位到页面元素在源文件中位置，从整体上提高提升调试的效率。其中，编辑器是指vscode webstorm idea等用于书写软件源文件的工具。源文件是指编辑器中书写的文本内容。元素指vue框架中使用的标签，是原生浏览器提供标签的超集。元素属性信息是指当前元素在编辑器中的行、列、文件绝对地址等属性信息。浏览器/运行环境指包含使用js引擎运行的一切环境，包括但不限于pc端浏览器，pc端桌面软件，移动端浏览器，移动端软件，vr可视化工具，物联网设备等。具体的：
72.本发明实施例将使用autojump
‑
loader(自动跳转
‑
装载机)模块，用于对待编译源文件进行处理，通过webpack中loader模块对待编译源文件进行重编译，重新生成源文件组，并且提供serverinjectplugin(服务器注入插件)自动注入服务。通过autojumpplugin(自动跳转插件)注入调试组件服务。autojump
‑
loader模块组合vue
‑
template
‑
compiler子模块和vue
‑
compiler
‑
tool模块。vue
‑
compiler
‑
tool(编译器视图
‑
工具)模块用于提供的visit函数来进行ast的遍历，对每个tree node的叶子节点上增添上预设元属属性信息。vue
‑
inspect(视图检查)模块用于对客户端调试ui组件渲染展示以及调用服务端提供的接口以连通编辑器。launch
‑
editor(启动编辑器)模块判断跨平台运行环境，根据wmic process命令来判断当前操作系统运行上下文中的编辑器进程，通过内置的命令唤起编辑器。等实现对元素的定位。
73.在对待编译元素添加预设元素属性信息阶段，输入.vue模板源文件，通过配置在webpack中的autojump
‑
loader模块对待编译源文件进行处理，首先通过用户传入的待使用配置项和默认配置项的合并，生成目标配置项。之后使用vue
‑
template
‑
compiler子模块将来进行.vue模板源文件转换为ast，接着使用vue
‑
compiler
‑
tool模块提供的visit函数来进行ast的遍历，对每个tree node的叶子节点上增添上预设元属属性信息，最后，通过vue
‑
template
‑
compiler子模块提供的templategenerateor(模块生成器)生成源文件组，输出给vue
‑
loader模块生成目标文件。
74.在前端，基于页面上的元素进行定位，通过autojumpplugin注入调试组件，在页面被渲染出来后，打开调试模式，监听鼠标的触发操作，对页面上的dom element进行蒙层定位和覆盖，当检测鼠标的触发操作时，确定触发操作对应的页面上的位置信息，并确定位置信息对应的元素以及元素属性信息，基于元素属性信息发送http请求，唤起对应元素在编辑器中的位置。
75.基于页面上的元素进行定位时，后端服务器的运行情况，具体的，通过serverinjectplugin在webpack服务启动中，获取空闲阶段的端口进行后台服务的启动，监听前端发送过来的http请求，根据请求内的元素属性信息来唤起编辑器，并确定编译器中
的元素的位置信息。
76.本发明实施例的技术方案，通过在编译阶段将待编译元素的预设元素属性信息添加到待编译源文件中，以基于待编译源文件生成源文件组。之后，在前端，检测到鼠标的触发操作后，确定鼠标触发操作对应的位置信息，确定位置信息对应的目标元素，以及目标元素确定元素属性信息。基于元素属性信息生成的http请求，将http请求发送至编译器，以唤起编译器，并确定http请求中的元素属性信息对应的目标元素在源文件组中对应的源文件中的位置。通过本发明实施例的技术方案可以实现基于页面中的元素，在编译器中快速定位该元素在源文件组中的位置，提高元素定位的效率，从整体上减少调试的时间。
77.实施例四
78.图4为本发明实施例提供的一种页面的定位装置的结构示意图，本发明实施例所提供的元素的定位装置可执行本发明任意实施例所提供的元素的定位方法，具备执行方法相应的功能模块和有益效果。该装置包括：目标元素确定模块410、元素属性信息确定模块420和目标位置信息确定模块430；其中：
79.目标元素确定模块410，用于当检测到触发操作时，确定与所述触发操作相对应的目标元素；元素属性信息确定模块420，用于确定与所述目标元素相对应的元素属性信息；目标位置信息确定模块430，用于基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息；其中，所述目标源文件为编译器中对各元素所属页面进行编译后得到的源文件。
80.进一步的，所述目标元素确定模块410包括：
81.第一目标元素确定子模块，用于当检测到所述光标在所述页面上各元素所属位置信息的停滞时长大于预设停滞时长时，确定所述位置信息所对应的目标元素；和/或第二目标元素确定子模块，用于当检测到鼠标的触发操作时，确定与所述触发操作对应的目标元素。
82.进一步的，所述目标位置信息确定模块430包括：
83.目标位置信息确定子模块，用于基于所述元素属性信息向所述编译器发送查询请求，以使所述编译器基于查询请求中的元素属性信息确定所述目标元素在所述目标源文件中的目标位置信息。
84.进一步的，所述装置还包括：
85.预设元素属性信息写入模块，用于在所述编译器对所述页面中的各待编译元素进行编译时，将各待编译元素的预设元素属性信息写入至待编译源文件；目标源文件生成模块，用于基于写入预设元素属性信息的待编译源文件，生成目标源文件，以在检测到触发目标元素时，根据目标元素的元素属性信息和所述源文件中的预设元素属性信息，确定所述目标元素的目标位置信息。
86.进一步的，所述预设元素属性信息写入模块包括：
87.目标配置项生成子模块，用于获取源文件模板中预先编辑的待使用配置项以及默认配置项，基于所述待使用配置项以及所述默认配置项生成目标配置项；其中，所述目标配置项与所述预设元素属性信息相对应；抽象语法树生成子模块，用于基于所述源文件模板中的文件信息生成抽象语法树；元素属性信息确定子模块，用于基于所述目标配置项确定所述抽象语法树中各个叶子节点所对应的待编译元素的预设元素属性信息。
88.进一步的，所述装置还包括：
89.源文件组生成模块，用于基于目标抽象语法树生成源文件文件组；其中，所述目标抽象语法树是所述抽象语法树的各叶子节点所对应的待编译元素添加预设元素属性信息后生成的语法树，所述源文件组包括至少一个源文件，每个源文件是基于对应的页面中的元素生成的；所述目标位置信息确定模块430包括：位置确定子模块，用于基于所述元素属性信息确定所述目标元素在源文件组中的位置信息。
90.进一步的，所述位置确定子模块还用于：
91.基于所述元素属性信息从源文件组中确定目标源文件；确定所述目标元素在所述目标源文件中的位置信息。
92.本发明实施例提供的元素的定位装置，通过检测页面上的触发操作，确定与触发操作相对应的目标元素。并确定与目标元素相对应的元素属性信息，基于元素属性信息，确定目标元素在目标源文件中的目标位置信息的方法，提高了元素定位的效率。在现有技术中，用户需要从大量的源文件中手动翻找该页面元素对应的位置，耗时长，而且容易出错。通过本发明实施例的技术方案，在页面上确定了目标元素后，基于目标元素的元素属性信息自动在目标源文件中确定目标元素的目标位置信息，进而，可以快速找到目标元素对应的源文件，整体上提高了对目标元素对应的源文件进行修改等操作的效率，提高用户的体验度。
93.值得注意的是，上述装置所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明实施例的保护范围。
94.实施例五
95.图5为本发明实施例提供的一种电子设备的结构示意图。图5示出了适于用来实现本发明实施例实施方式的示例性设备50的框图。图5显示的设备50仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
96.如图5所示，设备50以通用计算设备的形式表现。设备50的组件可以包括但不限于：一个或者多个处理器或者处理单元501，系统存储器502，连接不同系统组件(包括系统存储器502和处理单元501)的总线503。
97.总线503表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(isa)总线，微通道体系结构(mac)总线，增强型isa总线、视频电子标准协会(vesa)局域总线以及外围组件互连(pci)总线。
98.设备50典型地包括多种计算机系统可读介质。这些介质可以是任何能够被设备50访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
99.系统存储器502可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(ram)504和/或高速缓存存储器505。设备50可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统506可以用于读写不可移动的、非易失性磁介质(图5未显示，通常称为“硬盘驱动器”)。尽管图5中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如cd
‑
rom,dvd
‑
rom或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器
可以通过一个或者多个数据介质接口与总线503相连。存储器502可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。
100.具有一组(至少一个)程序模块507的程序/实用工具508，可以存储在例如存储器502中，这样的程序模块507包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块507通常执行本发明所描述的实施例中的功能和/或方法。
101.设备50也可以与一个或多个外部设备509(例如键盘、指向设备、显示器510等)通信，还可与一个或者多个使得用户能与该设备50交互的设备通信，和/或与使得该设备50能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(i/o)接口511进行。并且，设备50还可以通过网络适配器512与一个或者多个网络(例如局域网(lan)，广域网(wan)和/或公共网络，例如因特网)通信。如图所示，网络适配器512通过总线503与设备50的其它模块通信。应当明白，尽管图5中未示出，可以结合设备50使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、raid系统、磁带驱动器以及数据备份存储系统等。
102.处理单元501通过运行存储在系统存储器502中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的元素的定位方法。
103.实施例六
104.本发明实施例还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种元素的定位方法，所述方法包括：
105.当检测到触发操作时，确定与所述触发操作相对应的目标元素；确定与所述目标元素相对应的元素属性信息；基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息；其中，所述目标源文件为编译器中对各元素所属页面进行编译后得到的源文件。
106.本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd
‑
rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
107.计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
108.计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限
于无线、电线、光缆、rf等等，或者上述的任意合适的组合。
109.可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如java、smalltalk、c ，还包括常规的过程式程序设计语言——诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(lan)或广域网(wan)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
110.注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

技术特征：
1.一种元素的定位方法，其特征在于，包括：当检测到触发操作时，确定与所述触发操作相对应的目标元素；确定与所述目标元素相对应的元素属性信息；基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息；其中，所述目标源文件为编译器中对各元素所属页面进行编译后得到的源文件。2.根据权利要求1所述的方法，其特征在于，所述当检测到触发操作时，确定与所述触发操作相对应的目标元素，包括：当检测到所述光标在所述页面上各元素所属位置信息的停滞时长大于预设停滞时长时，确定所述位置信息所对应的目标元素；和/或当检测到鼠标的触发操作时，确定与所述触发操作对应的目标元素。3.根据权利要求1所述的方法，其特征在于，所述基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息，包括：基于所述元素属性信息向所述编译器发送查询请求，以使所述编译器基于查询请求中的元素属性信息确定所述目标元素在所述目标源文件中的目标位置信息。4.根据权利要求3所述的方法，其特征在于，在所述检测到触发操作之前，还包括：在所述编译器对所述页面中的各待编译元素进行编译时，将各待编译元素的预设元素属性信息写入至待编译源文件；基于写入预设元素属性信息的待编译源文件，生成目标源文件，以在检测到触发目标元素时，根据目标元素的元素属性信息和所述源文件中的预设元素属性信息，确定所述目标元素的目标位置信息。5.根据权利要求4所述的方法，其特征在于，所述在所述编译器对所述页面中的各待编译元素进行编译时，将各待编译元素的预设元素属性信息写入至待编译源文件，包括：获取源文件模板中预先编辑的待使用配置项以及默认配置项，基于所述待使用配置项以及所述默认配置项生成目标配置项；其中，所述目标配置项与所述预设元素属性信息相对应；基于所述源文件模板中的文件信息生成抽象语法树；基于所述目标配置项确定所述抽象语法树中各个叶子节点所对应的待编译元素的预设元素属性信息。6.根据权利要求5所述的方法，其特征在于，所述基于所述目标配置项确定所述抽象语法树中各个叶子节点所对应的待编译元素的预设元素属性信息之后，还包括：基于目标抽象语法树生成源文件组；其中，所述目标抽象语法树是所述抽象语法树的各叶子节点所对应的待编译元素添加预设元素属性信息后生成的语法树，所述源文件组包括至少一个源文件，每个源文件是基于对应的页面中的元素生成的；所述基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息，包括：基于所述元素属性信息确定所述目标元素在源文件组中的位置信息。7.根据权利要求6所述的方法，其特征在于，所述基于所述元素属性信息确定所述目标元素在源文件组中的位置，包括：
基于所述元素属性信息从源文件组中确定目标源文件；确定所述目标元素在所述目标源文件中的位置信息。8.一种元素的定位装置，其特征在于，包括：目标元素确定模块，用于当检测到触发操作时，确定与所述触发操作相对应的目标元素；元素属性信息确定模块，用于确定与所述目标元素相对应的元素属性信息；目标位置信息确定模块，用于基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息；其中，所述目标源文件为编译器中对各元素所属页面进行编译后得到的程序文件。9.一种电子设备，其特征在于，所述电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1
‑
7中任一所述的元素的定位方法。10.一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1
‑
7中任一所述的元素的定位方法。
技术总结
本发明实施例公开了一种元素的定位方法、装置、电子设备及存储介质，所述方法包括：当检测到触发操作时，确定与所述触发操作相对应的目标元素；确定与所述目标元素相对应的元素属性信息；基于所述元素属性信息，确定所述目标元素在目标源文件中的目标位置信息；其中，所述目标源文件为编译器中对各元素所属页面进行编译后得到的源文件。通过本发明实施例的技术方案，在页面上确定了目标元素后，基于目标元素的元素属性信息自动在目标源文件中确定目标元素的目标位置信息，进而，可以快速找到目标元素对应的源文件，从整体上提高了对目标元素对应的源文件进行修改等操作的效率，提高用户的体验度。用户的体验度。用户的体验度。


技术研发人员：柴必青
受保护的技术使用者：挂号网（杭州）科技有限公司
技术研发日：2021.03.26
技术公布日：2021/6/29