[发明专利]将源代码链接到运行元素

说明书

背景

web开发工具使得开发人员能够诊断超文本标记语言（HTML）和层叠样式表（CSS）问题。开发人员可动态地修改文档对象模型（DOM）元素（包括CSS选择器）并在浏览器中查看在运行页面中立即反映出的改变。然而，为了将修改永久应用到产生该页面的标记文本源文档，开发人员需要定位并适当地修改与所需修改相关联的标记文本或起源JavaScript。然而，定位与所需修改相关联的源代码文本可能是困难的，因为相关联的标记文本可能不是立即明显的或者可能源于开发人员不熟悉的代码。

概述

提供本概述是为了以简化的形式介绍将在以下详细描述中进一步描述的一些概念。本概述并不旨在标识出所要求保护的主题的关键特征或必要特征，也不旨在用于限定所要求保护的主题的范围。

一个实施例提供一种方法，该方法包括解析文本源文档来构造文档节点树，使得文档节点树包括指示文本源文档中与文档节点树的每一节点相对应的文本的位置的文本偏移。该方法包括从文档节点树构造文档对象模型（DOM）和表示该DOM的查看节点树。查看节点树的构造包括将查看节点树映射到文档节点树。该方法包括提供DOM的运行表示，使得DOM的DOM元素经由查看节点树和文档节点树被链接到文本源文档中与该DOM元素相对应的文本。

附图简述

包括附图来提供了对各实施例的进一步理解，且这些附图被合并在本发明书内并构成其一部分。附图示出各实施例，并且与说明书一起用于解释本发明的原理。其他实施例和各实施例的许多预期优点将随着参考下面的详细描述进行更好的理解而得到认识。附图的元素不一定相对于彼此而缩放。相同的附图标记指代对应的类似部分。

图1是示出web开发工具的一个实施例的框图。

图2是示出适于实现图1中示出的web开发工具的各方面的计算设备/环境的框图。

图3是示出web开发工具的一个实施例的功能框图。

图4是示出映射到文档节点树的HTML文本的一个示例的框图。

图5是示出映射到查看节点树的文档节点树的一个示例的框图。

图6是示出浏览器实例所表示的DOM的查看节点树的一个示例的框图。

图7是示出用于将源代码编辑器中的标记文本与浏览器中所表示的相关联的DOM元素相链接的方法的一个实施例的流程图。

图8是示出用于更新或无效文档节点树的节点的文本偏移的方法的一个实施例的流程图。

详细描述

在以下详细描述中，对附图进行了参考，附图构成了实施例的一部分且在其中作为示例示出了可在其中实践本发明的各特定实施例。可以理解，可以使用其它实施例并且可以做出结构上或逻辑上的改变而不背离本发明的范围。因此，以下详细描述并不旨在限制，并且本发明的范围由所附权利要求来限定。

应理解，此处描述的各示例性实施例的特征可相互组合，除非另外具体注明。

图1是示出web开发工具100的一个实施例的框图。web开发工具100包括文本源文档102和该文本源文档的运行表示104。在一个实施例中，文本源文档102在网页源代码编辑器中被打开。在其他实施例中，文本源文档102或文本源文档102的各部分被显示在网页源代码查看器中。在一个实施例中，文本源文档102的运行表示104由浏览器提供。在其他实施例中，文本源文档102的运行表示104由设计器、属性窗格或文本源文档的运行表示的其他合适的可视化来提供。

文本源文档102的网页源代码经由链接112被链接到由运行表示104所表示的网页的运行页面实例中的相关联的文档对象模型（DOM）110元素。因此，通过选择或突出显示运行表示104中的DOM元素，与所选择的或所突出显示的DOM元素相关联的网页文本被选择或突出显示在文本源文档102内。同样，通过选择或突出显示文本源文档102内的网页文本的一部分，与网页文本的所选择的或突出显示的部分相关联的一个或多个DOM元素被选择或突出显示在运行表示104内。以此方式，网页开发人员可即时匹配DOM元素，因为它们与定义这些DOM元素的网页文本源代码一起被表示在网页的运行实例中。