CN103620586A - 将源代码链接到运行元素 - Google Patents

Abstract

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

Description

将源代码链接到运行元素

背景

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元素的网页文本源代码一起被表示在网页的运行实例中。

在一个实施例中，文本源文档102被在源代码编辑器中打开，这可包括适于打开、创建、编辑以及保存网页文本源文档的任何合适的文本编辑器在一个实施例中，可被源代码编辑器编辑的网页文本源文档包括标记文本，如超文本标记语言（HTML）、层叠样式表（CSS）、可扩展标记语言（XML）和/或可扩展超文本标记语言（XHTML）。网页文本源文档也可包括JavaScript或Jscript。如本文所使用的，“JS”被用于指示JavaScript和Jscript两者。在其他实施例中，源代码编辑器适于打开、创建、编辑以及保存包括其他合适的网页标记文本和脚本语言的网页文本源文档。在一个实施例中，源代码编辑器支持网页文本源文档的多个实例，使得相关或链接的网页文本源文档可在源代码编辑器中被同时打开。

在一个实施例中，运行表示104是适于表示DOM110的web浏览器。在一个实施例中，浏览器是遵循万维网联盟（W3C）的web浏览器。在一个实施例中，浏览器提供DOM110的浏览器不可知的表示，使得DOM110的表示不依赖于任何特定浏览器，如Internet Explorer、FireFox、Chrome、Safari或者Opera。在另一实施例中，选择浏览器使得DOM110的表示基于所选浏览器。浏览器可包括供用户选择DOM110的表示所基于的特定浏览器（如InternetExplorer、FireFox、Chrome、Safari或者Opera）的选项。在一个实施例中，浏览器支持DOM的多个实例，使得相关或链接的各网页可同时运行在浏览器内。

运行表示1104还可包括运行脚本108和应用程序编程接口（API）。脚本108和API106可以修改运行表示104中DOM110的DOM元素。在一个实施例中，由于对DOM110的运行表示104的修改而不再以DOM110的运行表示104来表示的文本源文档102的各部分经由可视指示符被如此指示。在一个实施例中，响应于选择运行表示104中的DOM元素，文本源文档102中与DOM元素相关联的源代码的位置被报告给用户。

图2是示出适于实现先前参考图1描述并示出的web开发工具100的各方面的计算设备/环境200的一个实施例的框图。计算设备/环境200包括一个或多个处理单元212和系统存储器214。取决于计算设备/环境200的确切配置和类型，存储器214可以是易失性（如RAM）、非易失性（诸如ROM、闪存等）或两者的结合。

计算设备/环境200还可具有附加的特征/功能。例如，计算设备/环境200还可包含附加存储（可移动和/或不可移动），包括但不限于磁盘、光盘或磁带。这样的附加存储在图2中由可移动存储216和不可移动存储218示出。计算机存储介质包括以用于存储诸如计算机可读指令、数据结构、程序模块或其他数据等的任何合适的方法或技术实现的易失性和非易失性、可移动和不可移动介质。存储器214、可移动存储216以及不可移动存储218都是计算机存储介质（例如，储存在被至少一个处理器执行时使得该至少一个处理器执行一种方法的计算机可执行指令的计算机可读存储介质）的示例。计算机存储介质包括，但不限于，RAM、ROM、EEPROM、闪存或其它存储器技术、CD-ROM、数字多功能盘（DVD）或其它光盘存储、磁带盒、磁带、磁盘存储或其它磁性存储设备、或能用于存储所需信息且可以由计算设备/环境200访问的任何其它介质。任何这样的计算机存储介质都可以是计算设备/环境200的一部分。

计算设备/环境200的各元件经由一个或多个通信链接215通信耦合在一起。计算设备/环境200还包括允许计算设备/环境200与其它计算机/应用226进行通信的一个或多个通信连接224。计算设备/环境200还可以包括诸如键盘、定点设备（例如，鼠标）、笔、语音输入设备、触摸输入设备等的输入设备222。计算设备/环境200还可以包括诸如显示器、扬声器、打印机等输出设备220。

图2和以上讨论旨在提供其中可实现一个或多个实施例的合适的计算环境的简要概括描述，并且不旨在对各实施例的使用范围或功能提出任何限制。

图3是示出web开发工具300的一个实施例的功能框图。在一个实施例中，web开发工具300提供先前参考图1描述并示出的web开发工具100。web开发工具300包括标记文本302、标记解析器306、文档节点树310、DOM构建器314、浏览器318和DOM修改监听器322。标记文本302被输入到标记解析器306，如在304处所示。标记解析器306输出文档节点树310，如在308处所示。文档节点树310被输入到DOM构建器314，如在312处所示。DOM构建器314将DOM输出给浏览器318，如在316处所示。DOM修改监听器322跟踪浏览器318内对DOM元素的改变，如在320处所示。DOM修改监听器322将改变信息输出给文档节点树310，如在324处所示。

标记文本302包括HTML、CSS、XML、XHTML和/或其他合适的标记文本。在一个实施例中，包括标记文本302的源文档在源代码编辑器中被打开。在其他实施例中，web开发工具300访问包括标记文本302的源文档而不在源代码编辑器中打开该源文档。标记文本302定义用于提供网页的任何合适数量的对象。在图3所示的示例中，标记文本302包括HTML。该示例HTML定义用于提供包括文本“Hello”的DOM元素的一个对象。

由于标记文本302的文本特性，标记文本302的每一字符具有相对应的行号（如在326处所示）以及该行的相对应的相对字符号（如在328处所示）。例如，标记文本302中的字符“H”在行2、字符8处。标记文本302的每一字符还具有指示该字符相对于标记文本302的开头的位置的字符号。例如，标记文本302中的字符“H”具有字符号26，因为它是标记文本302中的第26个字符。因而，标记文本302中的每一字符可基于行号和该行内的位置或基于指示该字符相对于标记文本302的开头的位置的字符号来定位。同样，标记文本302内的一系列字符可基于行号范围和在这些行内的位置或基于字符号范围来定位。如本文所使用的，这些行号范围和这些行内的位置或者字符号范围被称为“文本偏移”。

标记文本302被标记解析器306解析以构造文档节点树310。在一个实施例中，标记解析器306与源代码编辑器位于相同的计算设备/环境上。在另一实施例中，标记解析器306与源代码编辑器位于不同的计算设备/环境上。标记解析器306包括HTML解析器、CSS解析器、XML解析器、XHTML解析器、和/或其他合适的标记文本解析器。在一个实施例中，标记解析器306是遵循W3C的。在另一实施例中，标记解析器306基于与特定浏览器（如InternetExplorer、FireFox、Chrome、Safari或者Opera）相关联的解析器。在其他实施例中，标记解析器306是包括该解析器的与特定浏览器相关联的基本实现以及基于对该特定浏览器运行时执行和/或解析行为的知识对该解析实现的更改的混合解析器。

标记解析器306将来自标记文本302的与网页相关的源文档细节包括在文档节点树310中。除了HTML对象和CSS对象外，标记解析器306还包括来自标记文本302的其他细节，如可能被浏览器解释的文档类型以及源内评论。标记解析器306还将指示这些源文档细节在标记文本302中的位置的文本偏移包括在文档节点树310中。这些文本偏移将文档节点树310的每一节点映射到与该节点相关联的标记文本。以此方式，在解析过程期间，维持文档节点树310和标记文本302之间的链接。这将标记解析器306与集成在浏览器内的常规解析器区分开，常规解析器在呈现期间通常出于性能原因而丢弃或变换源文档细节并且不维护源文档和所呈现的文档之间的任何链接。

在图3所示的示例中，文档节点树310使用字符号范围作为文本偏移。例如，文档节点树310包括父节点“DIV”的文本偏移“文本跨度：1-42”，这指示对象“DIV”在标记文本302中的位置。同样，文档节点树310包括属性“id”的文本偏移“文本跨度：6-15”、子节点“P”的文本偏移“文本跨度：23-34”以及子节点“Hello”的文本偏移“文本跨度：26-30。”因而，通过将每一对象的文本偏移包括在文档节点树310内，文档节点树310内的每一对象被映射到与该对象相关联的源文档标记文本。

DOM构建器314从文档节点树310构造DOM和表示DOM的查看节点树。DOM构建器314将查看节点树的每一节点映射到文档节点树的相应节点，使得DOM的每一元素被链接到文档节点树310中的相关联的对象并从而链接到与该对象相关联的源文档标记文本。

在一个实施例中，DOM构建器314构造JS元素。一旦执行，JS元素可构造和/或修改DOM元素和查看节点树内的相应节点，这可不具有文档节点树310内的相应节点。

在一个实施例中，DOM构建器314构造不依赖于任何特定浏览器（如Internet Explorer、FireFox、Chrome、Safari或者Opera）的浏览器不可知的DOM。在另一实施例中，DOM构建器314被选择使得DOM是基于所选浏览器来改造的。DOM构建器314可包括供用户选择DOM的构造所基于的特定浏览器（如Internet Explorer、FireFox、Chrome、Safari或者Opera）的选项。所构造的DOM由浏览器318表示。在一个实施例中，浏览器318是遵循W3C的浏览器。在图3所示的示例中，浏览器318显示包括文本“Hello”的DOM元素，如标记文本302所定义的。

查看节点树和文档节点树310将浏览器318内的DOM元素链接到标记文本302。例如，通过选择或突出显示浏览器318内的“Hello”，标记文本302内的相关联的标记文本被选择或突出显示。反过来，通过选择或突出显示标记文本302内的“<p>Hello</p>”，浏览器318中相关联的DOM元素“Hello”被选择或突出显示。

DOM修改监听器322跟踪对浏览器318内DOM元素的改变，如DOM变化。在一个实施例中，DOM修改监听器322跟踪对DOM元素的运行时修改，以将文档节点树310中的文档偏移标记为无效或者用负责创建和/或重写DOM元素和/或属性的JS的执行位置来替换文档节点树310中的文本偏移。在一个实施例中，DOM修改监听器322跟踪由于API106和/或脚本108（图1）而引起的对DOM元素的改变。在一个实施例中，DOM修改监听器322更新或插入与经修改的DOM元素相关联的文档节点树的节点，以指示负责修改DOM元素的脚本的行。

图4是示出映射到文档节点树404的HTML文本402的一个示例400的框图。为了从HTML文本402构造文档节点树404，HTML文本402被标记文本解析器（如先前参考图3描述并示出的标记解析器306）解析。在图4所示的示例中，HTML文本402被解析，使得文档节点树404包括父节点“DIV”和子节点“SPAN”及“P”。子节点“SPAN”包括进一步的子节点“TEXT(Hello)”。子节点“P”包括进一步的子节点“TEXT(World)”和具有值“foo”的属性“class”。

因而，文档节点树404按结构化树格式来维护HTML文本402源文档细节。如先前参考图3描述并示出的，文档节点树404还包括每一父节点和子节点的文本偏移，以分别指示与每一父节点和子节点相关联的HTML文本在HTML文本402内的特定位置。

图5是示出映射到查看节点树508的文档节点树506的一个示例500的框图。文档节点树506按结构化树格式来提供标记文档502的源文档细节。查看节点树508表示HTML实例管理器504中DOM的一个实例。在一个实施例中，HTML实例管理器504可以管理查看节点树的多个实例。在一个实施例中，在HTML实例管理器504内表示DOM的查看节点树508是基于所选浏览器的。HTML实例管理器504可包括供用户选择查看节点树508所基于的特定浏览器（如Internet Explorer、FireFox、Chrome、Safari或者Opera）的选项。

查看节点树508的每一节点包括将每一节点映射到文档节点树506中的相关联的节点的标识符。在一个实施例中，该标识符被先前参考图3描述并示出的DOM构建器314分配给查看节点树的每一节点。在一个实施例中，该标识符是数字。在图5所示的示例中，查看节点树508的标识符“105”被映射到文档节点树506的父节点“DIV”。同样，标识符“106”被映射到子节点“SPAN”且标识符“107”被映射到子节点“TEXT(Hello)”。因而，查看节点树的每一标识符将查看节点树的一节点链接到文档节点树中的相关联的节点。

图6是示出浏览器实例614所表示的DOM的查看节点树610的一个示例600的框图。应用602包括HTML实例管理器608，它管理查看节点树610。在一个实施例中，HTML实例管理器608管理查看节点树的多个实例。应用606包括实例管理器612，它管理浏览器实例614。在一个实施例中，实例管理器612管理多个浏览器实例。浏览器实例614表示DOM的实例。应用602通过通信链路（COM）604通信耦合到应用606。

查看节点树610的每一节点的标识符被链接到浏览器实例614所表示的相关联的DOM元素，如查看节点树610中每一“DOM代理”所指示的。因而，浏览器实例614所表示的每一DOM元素被链接或映射到查看节点树610的一节点。因此，浏览器实例614中表示的每一DOM元素被通过查看节点树和文档节点树链接到标记文本源文档中的标记文本。

在图6所示的示例中，查看节点树610的标识符“105”被链接到浏览器实例614所表示的DOM元素的标识符“105”的DOM代理。同样，标识符“106”被链接到标识符“106”的DOM代理且标识符“107”被链接到标识符“107”的DOM代理。在该示例中，查看节点树610包括将子节点“TEXT(Hello)”（图5）链接到浏览器实例614内的DOM元素“Hello”的标识符“107”。

图7是示出用于将源代码编辑器中的标记文本与浏览器中相关联的DOM元素相链接的方法702的一个实施例的流程图。在704，标记文本源文档（例如，先前参考图3描述并示出的标记文本302）在源代码编辑器中被打开。在706，构造映射到标记文本源文档的文档节点树（例如，先前参考图3描述并示出的文档节点树310）。在708，构造DOM和表示映射到文档节点树的DOM的查看节点树（例如，先前参考图5描述并示出的查看节点树508）

在710，在浏览器中表示DOM（例如，先前参考图1描述并示出的运行表示104）。在712，对浏览器中DOM元素的选择被链接到源代码编辑器中相关联的标记文本，或者对源代码编辑器中标记文本的选择被链接到浏览器中相关联的DOM元素。经由查看节点树和文档节点树来提供DOM元素和相关联的标记文本之间的链接。

图8是示出用于更新或无效文档节点树的节点的文本偏移的方法800的一个实施例的流程图。在802，跟踪对DOM的运行表示的修改。对DOM的运行表示的修改可以是由API106、脚本108（图1）或其他合适的过程而引起的。在804，基于对DOM的运行表示的修改来更新或无效文档节点树中节点的文本偏移。在一个实施例中，更新与对DOM的运行表示的修改相关联的文档节点树中对应节点的文本偏移，以指示负责该修改的JS的位置。

各实施例提供了用于将浏览器中表示的DOM元素与标记文本源文档中用来构造该DOM元素的标记文本相链接的web开发工具。标记文本源文档被逐段解析以构造DOM，使得初始源代码与所构造的DOM元素子节点精确映射得到维护。使用所公开的web开发工具，网页开发人员可立即在运行页面中定位与所选择的DOM元素相关联的源代码，并立即在与所选择的源代码相关联的运行页面中定位DOM元素。

尽管此处说明并描述了具体实施例，但本领域技术人员可以理解，可用各种替换和/或等价实现来替换所示出并描述的具体实施例而不背离本发明的范围。本申请旨在覆盖此处讨论的具体实施例的任何改编或变型。因此，本发明旨在仅由权利要求书及其等效方案来限制。

Claims (10)

1.一种方法，包括：

解析文本源文档来构造文档节点树，使得所述文档节点树包括指示所述文本源文档中与所述文档节点树的每一节点相对应的文本的位置的文本偏移；

从所述文档节点树构造文档对象模型（DOM）和表示所述DOM的查看节点树，构造所述查看节点树包括将所述查看节点树映射到所述文档节点树；以及

提供所述DOM的运行表示，使得所述DOM的DOM元素经由所述查看节点树和所述文档节点树被链接到所述文本源文档中与所述DOM元素相对应的文本。

2.如权利要求1所述的方法，其特征在于，还包括：

跟踪对DOM元素的运行表示的修改；以及

进行以下之一：

基于所述修改将与经修改的DOM元素相对应的所述查看节点树的节点的文本偏移标记为无效，以及

基于所述修改用经更新的文本偏移来替换与经修改的DOM元素相对应的查看节点树的节点的文本偏移。

3.如权利要求2所述的方法，其特征在于，跟踪修改包括跟踪DOM变化事件。

4.如权利要求2所述的方法，其特征在于，跟踪修改包括经由所述DOM的运行表示的应用程序编程接口（API）来跟踪修改。

5.如权利要求1所述的方法，其特征在于，还包括：

跟踪由于所述DOM的运行表示中脚本的执行而引起的对DOM元素的运行表示的修改；以及

进行以下之一：

更新及插入与经修改的DOM元素相关联的所述文档节点树的节点以指示负责修改所述DOM元素的的脚本的行。

6.如权利要求1所述的方法，其特征在于，提供所述DOM的运行表示包括在浏览器实例中提供所述DOM的运行表示。

7.如权利要求1所述的方法，其特征在于，解析所述文本源文档包括用超文本标记语言(HTML)解析器和层叠样式表（CSS）解析器之一来解析所述文本源文档。

8.如权利要求1所述的方法，其特征在于，解析文本源文档包括基于所指定的浏览器的解析器来解析所述文本源文档。

9.如权利要求1所述的方法，其特征在于，还包括：

在解析所述文本源文档之前在源代码编辑器中打开所述文本源文档。

10.一种存储用于控制计算设备以便执行一种方法的计算机可执行指令的计算机可读存储介质，所述方法包括：

从标记文本源文档构造文档节点树，使得所述文档节点树的每一节点包括文本偏移和标记文本源文档细节，所述文档节点树的每一节点中的文本偏移指示所述标记文本源文档中与所述文档节点树的每一节点相对应的标记文本的位置；

从所述文档节点树来构造文档对象模型（DOM）和表示所述DOM的查看节点树，构造所述查看节点树包括将所述查看节点树映射到所述文档节点树；以及

在浏览器中表示所述DOM，使得每一DOM元素经由所述查看节点树和所述文档节点树被链接到与所述DOM元素相关联的标记文本。

Images