集成开发环境中的实况浏览器工具的制作方法
【专利摘要】浏览器中的选择可被映射回在生成该选择的一个或多个源文件中的相应位置范围。在源文件中的选择可被映射到在浏览器的DOM中的相应位置范围。在浏览器中的选择可被映射到在从DOM生成的块列表中的位置范围。在DOM的块列表中的位置范围可被映射到在从所获取文件生成的块列表中的相应位置范围，该所获取文件从web服务器处被接收到。在所获取文件的块列表中的位置范围可被映射到在特定源文件中的特定位置，该特定源文件负责生成在浏览器中的选择。在浏览器中的选择和源文件可被同时显示，该源文件被滚动到与在浏览器中的选择相对应的位置范围。
【专利说明】集成开发环境中的实况浏览器工具
[0001]背景
[0002]万维网已成为普遍存在的现代生活部分。因此，web开发是极速增长的产业。web开发在若干深远的方面不同于常规软件开发。
[0003]复杂的网站可以由若干不同的页面组成，其内容可以从许多不同的文件生成。将代码写入文件的web开发者可以用无限数量的方式来将内容划分在这些文件中，这些文件在由web服务器处理并被显示在浏览器中时造成观看者看见的页面。在web服务器处理这些文件时，它通常在这期间生成附加内容。由web服务器处理的很少几行的代码可负责在最终网页中生成成百上千行的代码。当客户机作出对web服务器的请求时，web服务器确定什么文件组成了该响应，将这些文件汇编成单个文件，并将该响应发回客户机。在浏览器已将从web服务器处接收到的文档加载到浏览器中后，将交互式特征添加到网页的脚本语言可添加、删除或修改文档中的内容。
[0004]web处理工作的方式影响web开发。当web开发者想要改变网站的一部分时,web开发者必须知道在web服务器处与该网站相关联的哪些文件是必须要改变的文件。此外，当今，无法知道服务器生成的内容将是什么，直到代码已被web服务器处理并且客户机已接收了响应，因此web开发者只能猜测他的改变会产生的效果。脚本语言频繁在HTML文件上运行以将应用类功能添加到静态的HTML文档中。在脚本语言执行后，浏览器所呈现的文档与来自服务器的原始文件不同。目前不存在将在浏览器中选择的元素映射回从web服务器接收到的文件的自动化方式。
[0005]概述
[0006]可通过以下方式将在浏览器中的选择映射到在生成该选择的源代码文件中的位置范围:将该选择映射到在所获取文件中的位置范围，并将在所获取文件中的位置范围映射到在源文件中的位置范围。可通过以下方式将在源文件中的位置范围映射到在浏览器中的选择:将在源文件中的位置范围映射到在所获取文件中的位置范围，并将在所获取文件中的位置范围映射到在浏览器中的选择。
[0007]可通过以下方式将在浏览器中的选择映射到在所获取文件中的位置范围:创建浏览器文件和从web服务器处获取的原始文档之间的关联，将浏览器选择映射到浏览器文件，并使用浏览器文件和获取的原始文件之间的关联将在浏览器中的选择映射到从web服务器处获取的原始文档。
[0008]通过以下方式来将在所获取文件中的位置范围映射到在生成该所获取文件的源文件中的位置范围:在生成该所获取文件期间收集元数据。该元数据可用于创建可被用于将在所获取文件中的位置范围映射到在源文件中的位置范围的映射表。该映射表还可被用于将在源文件中的位置范围映射到在所获取文件中的位置范围。浏览器文件和原始所获取文件之间的关联可用于将在所获取文件中的位置范围映射到在浏览器中的选择。执行这些任务的模块可被集成在IDE (集成开发环境)中。
[0009]当响应于HTTP请求而在web服务器上生成HTML代码时，可以用以下元数据来扩充该代码:将各HTML代码段映射回在特定源文件中的特定位置的信息。当生成表示用户可以浏览的网页的文件的代码在web服务器上执行时，映射信息可被注入到所生成的文件 中，或者可以经由另一机制被传送到客户机侧浏览器。客户机侧映射模块可以从web服务 器接收文件，记录元数据并使用该元数据来创建映射表，该映射表将来自所获取文件的位 置范围映射到在产生该内容的源文件中的相应位置范围。客户机侧模块可以提供与开发功 能集成在一起并在IDE中运行的浏览体验。可通过作出到web服务器的全程往返来将内容 呈现在开发中的页面中，使得被呈现给和显示给开发者的内容是生产web服务器的响应， 而非是web服务器行为的模拟解释。
[0010]文档对象模型(DOM)工具可以提供对表示浏览器页面的树数据结构的可视化。层 叠样式表(CSS)工具可以将所选的样式特征映射回其源代码文件，以允许通过在相应源文 件中选择规则或属性并改变该规则或属性来将HTML元素的样式特征的所构想的改变自动 变成永久的。开发者还可以在浏览器中查看所构想的样式改变，而不将该改变应用于源文 件。
[0011]服务器侧映射模块可以与web框架集成，使得该web框架可以收集响应于来自客 户机上的浏览器的HTTP请求而从服务器发送到客户机的映射信息。
[0012]提供本概述是为了以简化的形式介绍将在以下【具体实施方式】中进一步描述的选 择的概念。本概述并不旨在标识所要求保护主题的关键特征或必要特征，也不旨在用于限 制所要求保护主题的范围。
[0013]附图简述
[0014]在附图中:
[0015]图1示出了根据此处所公开的主题的各方面的提供IDE中的实况浏览器工具的系 统100的示例；
[0016]图2a示出根据此处所公开的主题的各方面的用于在所获取的代码文件和源代码 文件之间进行映射的方法200的示例；
[0017]图2b示出根据此处所公开的主题的各方面的用于在浏览器文件和所获取文件之 间进行映射的方法203的示例；
[0018]图2c示出了根据此处所公开的主题的各方面的创建在DOM中的位置范围和在所 获取文件中的位置范围之间的关联的方法290的示例；
[0019]图2d示出了根据此处所公开主题的各方面的所获取文件的块列表和DOM的块列 表的示例230的示例；
[0020]图2e示出了从浏览器中的选择映射到DOM块列表并随后映射到所获取文件的示 例 270 ；
[0021]图2f是根据此处所公开的主题的各方面的用于提供IDE中的实况浏览器工具的 方法240的示例；
[0022]图3是根据本文所公开主题的各方面的计算环境的示例的框图；以及
[0023]图4是根据此处所公开的主题的各方面的集成开发环境的示例的框图。
[0024]详细描述
[0025]概览
[0026]在web开发中，(具体地，在诸如微软的ASP.NET之类的框架中)，许多不同的源文 件可被组合以在web上形成用户可浏览的页面。例如，网站可具有在网站上的菜单栏中列出的多个页面，诸如“主页”、“关于”、和“联系我们”等。菜单栏的代码可存在于一个源文件中，“关于”页面可存在于另一源文件中，并以此类推。在用户浏览网站时，所有源文件可以作为单个文件(诸如，例如称为“About, htm”(关于)的文件或称为“Contact, htm”(联系)的文件)回到用户的浏览器。
[0027]想要改变网站上的某些事物的开发者必须知道他想要改变的元素位于什么文件中。通常，查找要改变的文件变成了不同寻常的任务，因为例如存在web开发者可选择来划分网站的内容的许多不同的方式，并因为信息可以从数据库中被提取出而非被编码在源中。因此，开发者可能被迫手动地执行“在文件中查找”命令、浏览代码或依赖于记住该元素可在哪里被找到。
[0028]根据此处所公开的主题的各方面，在浏览器中选择的任何元素、字符或位置范围都可被映射到生成它的源代码，并且在源代码中选择的任何位置范围都可被映射到该源代码生成在浏览器中的事物。带有调用的被编译的(例如，被编译成汇编代码、二进制代码、可执行代码)开发者源代码可以在编译期间或在稍后的时间被操纵，其这些调用在被执行时发出将代码段映射回特定源文件并映射回在源文件中的特定位置的元数据。被操纵的调用可被插入所解释的源代码文件，该源代码文件在被解释时发出将代码段映射回特定源文件并映射回在该源文件中的特定位置的元数据。元数据可包括注入的符号，该注入的符号指明HTML中从特定开始位置到特定结束位置的信息来自源文件中从特定开始位置到特定结束位置的信息。
[0029]各源文件可在开发者机器上被编译在一起，并被上传到服务器中，以形成在用户导航到网站时运行的代码。在网站的页面被浏览时，文件被服务器生成并被用户的计算机上的浏览器获取。在用户导航到服务器时，该服务器可以执行可执行代码中的各方法。该可执行代码可以用如下这样的方式来操纵:在服务器代码构建浏览器将获得的HTML文件时，示出HTML文件的每一片段来自何处的源代码中的元数据可被收集。元数据可被包括在HTML文件中或可被单独地发送。浏览器所获取的文件因此可包括该浏览器不需要向用户显示的元数据。因此，在浏览器获得HTML文件时，可以将元数据从浏览器用来显示网站内容的该文件中移除。元数据可被持久存储到存储器中的数据结构中。该数据结构可被用来将浏览器中的选择映射回到源文件，并可被用来将源文件中的选择映射到所获取文件。
[0030]将浏览器选择映射回从服务器获取的HTML文件可变得更困难，因为诸如Javascript、微软的 JScript?、Actionscript、Apple script、VBscript 等脚本语言可以在该浏览器中运行。脚本语言可以改变从服务器获取的HTML。HTML生成包括文本、列表、表格和超链接的静态文档。脚本语言可通过添加、删除、改变和移动HTML元素来将HTML用作呈现语言以提供类似应用的体验。脚本语言通过改变表示浏览器中查看的文档的数据结构来实现这一点。根据此处所公开的主题的各方面，可以维护从服务器处接收的原始文件的副本。可以向原始文件中的字和元素分配标识符。在脚本语言执行时，可将底层HTML的改变与从web服务器处接收到的原始HTML进行比较。HTML文件的块列表和DOM的块列表可被创建，其中相同的块具有相同的标识符，使得如果数据结构中的元素因脚本语言的执行的结果而移动时，该元素仍可被映射到从web服务器接收的原始HTML。当脚本语言改变了该文档时，差异算法可以被运行以允许浏览器中的用户选择被映射到原始所获取文件。
[0031]在此描述的各特征的组合使得在浏览器中的选择能够被映射到在源代码中的相应位置。源代码选择可被映射回该源代码部分在浏览器中最终生成的事物。即，在浏览器中 的选择到开发者的机器上的源文件间的映射以及相反映射的组合为开发者提供了利用选 择网页中的元素的用户动作来访问源代码文件以获得该元素的能力。例如，假设开发者想 要改变网站上的联系页面中的电话号码。开发者可以打开IDE，使用客户机计算机上的客户 机侧浏览器中的查看命令来带出浏览器，打开该浏览器，导航到联系页面，并使用DOM(文件 对象模型)检查器工具来选择该联系页面中的电话号码。联系页面的源文件可被显示在浏 览器显示的附近，使得生成该浏览器页面的HTML代码可以与该浏览器中的网页一起被同 时查看。源代码的视图可被滚动到源文件中与浏览器中的选择相对应的位置。例如，客户机 侧模块可以将用户带到联系页面，并带到联系文件中硬编码该电话号码或找到在文件或数 据库中访问该电话号码的命令的确切位置。通过将源文件中的选择映射到在从所获取文件 生成的块列表中的位置范围，可将在源文件中的选择映射到在浏览器中的位置范围。可将 在所获取文件中的位置范围映射到在从负责生成在源文件中的选择的动态浏览器文件(例 如，D0M)生成的块列表中的位置范围。
[0032]响应于接收到改变源文件中的电话号码的用户输入，该文件可被保存，该站点可 被重建，并且代码可被上传到服务器。此外，客户机侧映射模块可告知开发者浏览器上的页 面与源代码匹配还是不匹配。(相反，已知浏览器不知道该浏览器正在运行文件的最新近版 本还是它不在运行文件的最新近版本。)通过选择显示在屏幕上的选项，与所显示的网页对 应的源文件可以被取得，并可示出源文件的最当前版本。
[0033]客户机侧映射模块可以包括DOM (文档对象模型)树可视化器工具，该工具从HTML 创建元素，并可显示该HTML页面的各元素的图形表示。网页的另一方面是该页面看上去的 样子。页面看上去的样子被称为其样式，并包括该页面中使用的颜色、大小、布局和字体等。 页面的样式由层叠样式表(CSS)确定。样式可被定义在多个地方，包括但不限于文档中的 某处、紧接着该元素、在分开的CSS文件中等。根据此处公开的主题的各方面，与浏览器相 关联的CSS工具可以分析页面中的特定元素的样式。
[0034]对于特定标签(HTML元素)，CSS工具可以按网格的形式显示已应用于该元素的所 有样式。CSS工具可以将各样式方面显示在例如在浏览器显示下面显示的工具窗格中，各样 式方面包括颜色、大小、页边距、字体大小、填补、粗体、斜体等。当作出样式值中的改变时， 通过改变实况DOM文件可将这些改变立刻反映在浏览器中。此外，可将各样式从CSS工具 所显示网格映射到为那个元素定义该样式的源文件。例如，如果在特定源文件中为特定元 素定义了颜色，则客户机侧映射模块可确定在其中定义该元素的颜色的源文件的身份。可 以提供在其中定义在那个特定样式的文档或文件中的确切位置。通过选择定义要改变的特 征的元素的属性，或者通过选择定义要改变的特征的规则，客户机侧映射模块可以确定并 显示在源文件中的位置，在该位置处，开发者可以通过改变源文件来作出该改变。CSS规则 映射可以通过以下方式来实现:为原始所获取文件中的每一 CSS规则生成唯一标识符，并 使用该唯一标识符来将DOM规则映射回其原始源。项目系统可用于使运行时URL与开发者 机器上的原始项目路径相关联。
[0035]从被浏览器用来显示特定页面的实况DOM文件到源文件的选择映射可以向服务 器发送输入，并从服务器接收输出(在此被称为通过服务器的往返)。由于在服务器上可发 生大量的处理，因此确定开发者的改变的结果会是什么可能是个挑战。例如，HTML代码可以按某次序定义项，但在该次序在服务器处被处理之前，没有人能够知道所得的页面看上去将是什么样的，因为它依赖于服务器处理，诸如多少项被排序了等。之前的开发软件已提供了设计观点，该设计观点尝试在开发计算机上模拟在服务器执行了其服务器侧处理之后，文件在浏览器中看上去将是什么样的。
[0036]由于开发计算机一般缺少对实况服务器上的信息的访问，并且不执行服务器侧处理，因此当处理在服务器上发生时开发模拟通常与页面的外观不是非常接近。根据在此公开的主题的各方面，从web服务器请求数据。开发文件被发送到web服务器，web服务器处理这些文件，并将结果返回给开发机器。HTTP请求可以被执行，使得开发机器可以显示相对于实际顾客体验而言可信的结果。换言之，代替在IDE中在浏览器中呈现当前页面的内容，到服务器的全程往返被作出，使得向开发者呈现的事物与服务器将向查看网页的用户提供的事物相同。
[0037]为了实现选择映射，基于web服务器计算机上生成的元数据的映射表可以被创建。该映射表可以将响应于来自浏览器的HTTP请求而被客户机从web服务器接收到的文件的各部分(即，所获取文件)映射到源文件。该文件的每一部分可以通过向该文件的每一部分分配基于元数据的标识符来标识。响应于检测到选择文件的所标识部分的选择事件，该文件的所选部分被映射回所获取文档，并被映射回源文件，由此使得用户能够经由到服务器的往返而获得该页面的内容，并将实况浏览器的内容映射回源文件。
[0038]IDE中的实况浏览器工具
[0039]图1示出了根据此处所公开的主题的各方面的用于提供IDE中的实况浏览器工具的系统100的示例。系统100的全部或各部分可以驻留在诸如下面参考图3所描述的计算机之类的一个或多个计算机上。系统100可在诸如参考图4所描述的软件开发计算机之类的软件开发计算机上整体地或部分地执行。系统100的全部或各部分可以在诸如IDE104之类的IDE内执行。IDE104可以是诸如参考图4所描述的IDE之类的IDE，或者可以是任何其它IDE。系统100的全部或各部分可以在IDE之外执行。系统100的全部或各部分可被实现为插件或附件。
[0040]系统100可包括诸如计算机102之类的一个或多个计算机或计算设备，包括:一个或多个处理器(诸如处理器142等)、存储器(诸如存储器144)、和一个或多个服务器侧模块(诸如，服务器模块108等)，该一个或多个服务器侧模块用于提供支持IDE中的实况浏览器工具的服务器侧处理。系统100还可包括诸如计算机103之类的一个或多个计算机或计算设备，包括:一个或多个处理器(诸如处理器143等)、存储器(诸如存储器145)、和一个或多个客户机侧模块(诸如，客户机模块116),该一个或多个客户机侧模块用于提供IDE中的实况浏览器工具。也可以包括本领域已知的其他组件，但此处未示出。可以理解，一个或多个服务器模块(诸如服务器模块108等)可被加载到存储器144中，以使得一个或多个处理器(诸如处理器142等)执行归于该一个或多个服务器侧模块的动作。将理解，一个或多个客户机侧模块(诸如客户机模块116中的一个或多个)可被加载到存储器145中，使得一个或多个处理器(诸如处理器143)执行归于该一个或多个客户机侧模块的动作。
[0041]计算机102可以表示web服务器计算机，该计算机使用HTTP协议将网页或其他文档递送给浏览器。计算机102可以包括web框架(诸如，web框架104)中的一个或多个。web框架104可以是诸如但不限于ASP.NET、PHP、PERL、Ruby等web框架。在图1中由服务器模块108等来表示该系统中提供根据此处所公开的主题的各方面的实况浏览器工具的 服务器部分。服务器模块108等可以是web框架的插件或植入程序。源代码132和/或编 译代码134可以被服务器模块108等接收，并可被用于生成HTML文件，响应于来自诸如浏 览器118之类的浏览器的HTTP请求，该HTML文件被从服务器计算机102发送到客户机计 算机103。
[0042]服务器模块108可以生成要被发送给客户机计算机(诸如，客户机计算机103)的 HTML文件(“所获取文件”)。服务器模块108可以发出与用来生成HTML文件的各部分的源 文件有关的信息。与这些源文件有关的信息可被返回给客户机计算机。例如，可以通过将 信息嵌入在发送给客户机的HTML文件中来返回该信息，或者可以在单独的文件中发送该 信息。元数据被包括在发送给客户机计算机的HTML文件、被单独发送、还是根本不被发送 可以由网站配置设置、HTTP头信息、查询串信息、和表单数据等来控制。
[0043]服务器模块108可以生成将在带注释的HTML文件中的各位置与在源代码文件中 的各源代码部分相关联的元数据。例如，XML表可用于存储源位置和目的地位置两者。或者， 令牌可用于将在HTML文件中的位置范围与各源代码文件部分相关联，等等。根据此处所公 开的主题的某些方面，服务器模块108可以生成开始令牌和结束令牌，开始令牌和结束令 牌一起定义在由服务器计算机102生成的HTML文件中的来自特定源文件中的特定位置的 位置范围。将理解，令牌的格式可以是任何格式。例如，一个格式可以是$StartT0ken$(开 始令牌)和$endToken$ (结束令牌)。$startToken$可用于为所考虑的HTML代码部分界定 在HTML文件中的开始位置，而$endToken$可用于为其界定在HTML文件中的结束位置。可 以向每一开始令牌/结束令牌对分配一序列号或其他标识符，以将一对开始和结束令牌与 另一对开始和结束令牌区分开。
[0044]在服务器完成生成所请求的文件后，上下文数据可被生成。任何数据结构都可用 于展示上下文信息。展示上下文数据的一种方式是XML格式的数据结构，该XML格式的数 据结构可用作映射表，并包括将HTML文件中的各部分与源中的各部分相关联所需的数据。 例如，可包括与由开始和结束令牌来定界的在HTML文件中的位置范围相对应的在源文件 中的范围的表。根据此处所公开的主题的某些方面，上下文信息可被包括在向客户机计算 机发送的HTML文件的末尾。可以用标识特定一对开始和结束令牌的标识符(例如，对那对 开始和结束令牌而言是唯一的标识符)来标识每一对开始和结束令牌，以通过匹配标识符 来启用在HTML文件中的位置和在用来生成HTML片段的特定源文件中的位置之间的映射。
[0045]例如，对于在所获取文件中的在位置50处开始的10字符范围(其可被映射到源文 件中的在位置0处开始的10字符范围)，在所获取文件中的所选择的位置58 (其落于该10 字符范围内)可被如下映射到源文件:可以从所选择的位置中减去所获取范围的开始位置， 并可将结果加到在源文件中的范围的开始位置上。在该情况下，为58-50+0=8，其中8是在 源文件中的所选择的位置。对于在所获取文件中的所选范围的各开始和结束位置，可以执 行相同的运算，以找到在源文件中的相应范围的开始和结束位置。一个源位置范围可以映 射到在由服务器计算机102生成的HTML文件中的多个位置范围。在一个源文件中的一个 范围可以包括在另一个源文件中的各范围，使得在所获取文件中的单个位置可以映射到多 个源文件。例如，源文件可以包括用于在当前位置处包含另一源文件的命令。
[0046]由服务器生成的HTML中的内容可以与源文件中的内容逐字符相同。这种内容类型被称为字面内容。字面内容可以是例如HTML。由服务器生成的HTML中的内容可以与源文件中的内容不同。这种内容类型被称为非字面内容。非字面内容可以是源文件中被运行来产生在由服务器生成的HTML文件中的HTML的代码。由服务器产生的元数据可以包括以下上下文信息:被用来将源文件映射到所获取文件的标识符、在源文件中的开始位置、在源文件中的结束位置或另选地在源文件中的长度、(输出所源自的)源文件的名称或路径、指示内容是字面内容还是非字面内容的指示符、在所获取文件中的开始位置、在所获取文件中的结束位置或另选地在所获取文件中的长度。该信息使从所获取文件到源文件的转换成为可能。
[0047]图2a示出了根据此处所公开的主题的各方面的用于在浏览器文件和源代码文件之间进行映射的方法200的示例。图2a中所述的方法可由诸如但不限于以上参考图1所述的系统来实施。以下描述的一些动作可以是可任选的。以下描述的一些动作可按不同于以下所述的序列来执行。
[0048]在201，浏览器可向诸如web服务器计算机102之类的web服务器发送请求特定网页的HTTP请求。在202，运行服务器侧浏览器模块的web服务器可以接收该HTTP请求，并作为响应，在204可生成包括HTML文件和映射元数据的响应。根据此处所描述的主体的某些方面，所生成的HTML文件可包括界定HTML文件中的每一输出元素的位置范围的注释。web服务器计算机可以生成包括映射表的元数据，该映射表包括HTML文件中的每一有注释元素的上下文数据。web服务器可将带注释的HTML文件和元数据发送给客户机。在206，客户机文件可以接收带注释的HTML文件和元数据。元数据可以被嵌入在HTML中，或者可以被单独地发送。在208，可以使用该元数据来生成可被用来在所获取文件和源代码文件之间以及在源文件和所获取文件之间进行映射的数据结构。在210，可以将这些注释从HTML文件中去除，并且在212，可将所得的动态浏览器文件传递给浏览器以供显示。动态浏览器文件可以被表示为DOM。
[0049]计算机103可以表示主控web浏览器(例如，浏览器118)的客户机计算机。浏览器118可以任何浏览器，包括但不限于Mosaic、微软的Internet Explorer?.、Mozilla、Netscape、和Firefox等。web浏览器是用于检索、呈现和遍历万维网上的信息资源的软件应用。信息资源由统一资源标识符(URI)来标识，并且可以是网页、图像、视频或其他内容片段。计算机103可以表示软件开发计算机。根据此处所描述的主题的各方面，计算机103可以主控IDE110，IDEllO包括IDE中的实况浏览器工具的一个或多个客户机模块116等。这一个或多个客户机模块116可以包括以下各项中的一个或多个:浏览器118、映射模块136、DOM树可视化器160、CSS工具162和/或过滤器124。系统100还可包括以下各项中的任何一个或全部:映射表138、一个或多个源文件(在图1中由源文件126表示)、所获取文件128和/或诸如实况D0M130等动态浏览器文件。文档对象模型(DOM)是跨平台、语言无关的约定，该约定用于表示HTML、XHTML和XML文档中的对象并与其进行交互。DOM元素可以由包括诸如但不限于Jscript等脚本语言的编程语言来寻址和操控。DOM支持任何定向的导航。即，DOM支持从子到其父、从父到其子、和从子到先前同辈的导航。计算机103还可以包括web服务器组件(例如，web框架和类似于服务器模块108的一个或多个服务器模块)(未示出)。计算机102和103可以经由网络114连接。
[0050]浏览器118可以向web服务器(诸如，web服务器计算机102)发送HTTP请求。或者，该请求可以被发送给计算机103上的web服务器。该HTTP请求可以是对网站的页面的 请求。被请求的HTML文件可以是如在此描述的带注释的HTML文件。元数据可以被单独地 发送，或者可以被嵌入在带注释的HTML文件中。可以提供附加元数据，该附加元数据消除 了对HTML文件中的注释的需要。响应于接收该HTTP请求，web服务器计算机102可以生成 HTML文件，在该HTML文件中注入了将在该HTML中的位置范围映射到在源文件中的相应位 置范围的元数据。带注释的HTML文件可被发送到客户机计算机103。或者，该元数据可以 在单独的文件中被发送。客户机模块116中的一个或多个模块可以接收带注释的HTML文 件(所获取文件128)，可以去除元数据和/或注释、可以从该元数据构建映射表138、并且可 以为浏览器生成不带有元数据的文件。
[0051]从被浏览器用来导出并显示网页的所获取文件生成的文件被称为动态浏览器文 件，并可被转换成D0M，诸如D0M130。或者，元数据可被单独地发送。响应于接收该HTTP请 求，服务器模块可以生成HTML文件和元数据文件，在该元数据文件中提供有将所获取文件 中的每一输出元素映射到源文件中的相应位置的元数据。HTML文件和元数据文件可被发送 到客户机计算机103。客户机模块116可以接收HTML文件、(例如，所获取文件128)和元数 据文件。映射模块136可以从该元数据构建映射表138，并可将该HTML文件提供给浏览器。 映射模块136可以使用映射表138通过以上更全面地描述的匹配标识符来在动态浏览器文 件或D0M130和源文件126之间进行映射。浏览器118可以基于映射表138中的信息将正 在浏览器118中显示的页面的源代码文件(例如，源代码编辑器(例如，源代码编辑器119) 中的源文件126)同时显示在浏览器显示附近。
[0052]根据此处所公开的主题的各方面，计算机103可以主控IDEl 10，IDEllO包括在浏 览器中的选择和从web服务器所获取的文件之间进行映射的一个或多个模块(例如，选择 映射模块137)。选择映射模块137可包括过滤模块。或者，诸如过滤器124等过滤模块可 以在选择映射模块137的外部。选择映射模块137可包括差异模块。或者，诸如差异模块 120等差异模块可以在选择映射模块137的外部。选择映射模块137可包括块列表生成模 块。或者，诸如块列表生成模块122等块列表生成模块可以在选择映射模块137的外部。 IDEllO可以包括以下中的一个或多个:浏览器118、布局引擎(未示出)和/或在浏览器中 呈现的文件上执行的脚本语言150。IDEllO可以包括诸如源代码编辑器119等源代码编辑 器。
[0053]系统100还可以包括以下各项中的任一个或全部:诸如所获取文件128等获取文 件、诸如D0M130等动态浏览器文件、诸如所获取文件块列表129等从所获取文件导出的块 列表、以及诸如DOM块列表127等从DOM导出的块列表。浏览器118可以向web服务器发 送对网站的页面的请求(例如，HTTP请求)。作为响应，浏览器118可以从web服务器接收网 页。该网页可以是HTML文件。由浏览器118接收到的文件可以作为所获取文件128被存 储在存储器145。由于HTML文件是从web服务器接收的，根据此处所公开的主题的某些方 面，诸如过滤器124等模块可以向HTML文件中的每一元素分配标识符，使得每一个不同的 元素被分配了其自己的标识符。也可以向各个字分配标识符。通过HTML开始标签和HTML 结束标签对的存在性来界定HTML文件中的元素。过滤器124可以是操作MME (多用途因 特网电子邮件扩展)类型的“文本”的MME过滤器。将理解，或者，可以在脚本语言运行之 前的另一时刻(例如，在HTML文件被呈现在浏览器中后)向HTML文件中的每一元素分配标识符。
[0054]即使脚本语言在运行并且各元素被到处移动或被改变，标识符仍使得DOM中的各元素能被映射到所获取文件中的各元素，并反之亦然。将理解，无法映射被删除了的元素。类似地，被插入在DOM中的元素不能被映射到所获取文件中的相应元素，因为该元素不在该所获取文件中。可以将HTML所获取文件128解析成文档对象模型(D0M)，诸如D0M130。文档对象模型(DOM)是跨平台的、语言无关的约定，该约定用于表示HTML、XHTML和XML文档中对象并与这些对象进行交互。DOM元素可以由包括诸如但不限于Jscript等脚本语言的编程语言来寻址和操控。DOM支持任何方向上的导航。即，DOM支持从子到其父、从父到其子、和从子到先前同辈的导航。
[0055]从所获取文件128创建的D0M130可以被存储在存储器145中，并可被布局引擎用于显示网页的视图，诸如浏览器118中的视图104。D0M130可通过执行脚本语言来修改。因此，D0M130可以随时间改变，并且是动态的。当浏览器118首次呈现从服务器获取的网页时，视图104对应于所获取文件128。HTML转换成DOM使得脚本语言能够在浏览器118中执行。诸如Jscript之类的脚本语言可执行。在脚本语言执行时，脚本语言可以改变D0M。当DOM改变时，视图104可以在浏览器中改变。因此，只要脚本语言一执行，所获取文件将不再反映当前视图。在DOM改变时，相应的改变被反映在视图104中。
[0056]诸如块列表生成模块122之类的块列表生成模块可以从D0M130生成块列表(例如，DOM块列表127)。诸如块列表生成模块122之类的块列表生成模块可以从所获取文件128生成块列表(例如，所获取文件块列表129)。诸如差异模块120之类的差异模块可以在所获取文件块列表129和DOM块列表127上运行，以在各块列表之间进行映射，即使DOM不再反映所获取文件。以下更全面的描述由差异模块120执行的处理。
[0057]因此，根据此处所公开的主题的各方面，当脚本语言改变在浏览器118中的视图102底层的DOM数据结构时，差异算法可以在DOM和所获取文件的块列表上运行，以处理这些块列表中的映射改变。DOM块列表127可以改变以反映由脚本语言的执行作出的改变。
[0058]图2b示出了根据此处所公开的主题的各方面的将在浏览器中的选择映射到从web服务器获取的文件的方法203的示例。图2中所述的方法可由诸如但不限于参考图1描述的系统来实施。以下描述的一些动作可以是可任选的。以下描述的一些动作可按不同于以下所述的序列来执行。
[0059]在213，浏览器可以向web服务器发送诸如HTTP请求之类的请求。在214，浏览器可以从web服务器接收所请求的文件。由浏览器响应于浏览器请求而接收的文件在此被称为所获取文件。所获取文件可以是HTML文件。所获取文件可以被加载到存储器中。在214，随着所获取文件被接收，可在216向HTML文件中的各元素分配标识符，使得向每一个不同的元素分配其自己的标识符。HTML文件可被转换成D0M，并被浏览器呈现。在执行期间，在218，诸如但不限于Jscript等脚本语言可在DOM上运行。在220，脚本语言可在其执行时改变D0M。在222，可以通过匹配块标识符来生成DOM和所获取文件之间的关联，如以下更全面地描述的。在224，响应于选择被显示在浏览器中的文档的一部分的用户输入，该选择可被映射到DOM的一部分。在226，DOM的该部分可被映射到所获取文件的一部分。
[0060]图2c示出了根据此处所公开的主题的各方面的创建在DOM中的位置范围和在所获取文件中的位置范围之间的关联的方法290的示例。图2c中描述的方法可由诸如但不限于参考图1中描述的系统来实施。以下描述的一些动作可以是可任选的。以下描述的一 些动作可按不同于以下所述的序列来执行。
[0061]在292，可以将不同的标识符可以分配给所获取文件中的每一元素。元素可以通 过开始标签和结束标签的存在性被标识出。在294，可从所获取文件创建块列表。可从DOM 创建另一块列表。为了创建所获取文件(HTML文件)的块列表，可以解析该文件，并且可为 在HTML文件中遇到的每一开始和结束标签对创建一个块。向该元素分配的标识符可被保 存。可为HTML文件中的每一字创建一个块。根据此处所公开的主题的某些方面，可向字分 配作为该字的散列的标识符。因此，如果特定字在HTML文件中被遇到了一次以上，则在该 特定字的每一次出现将具有相同的标识符。
[0062]为了创建D0M294的块列表，该DOM可被转换成HTML文件，并且以上参考所获取文 件来描述的过程可用于生成该DOM块列表。或者,可以走查DOM树，并可由此创建如上所述 的DOM块列表。在296，差异模块可以在所创建的两个块列表上运行诸如修正Heckel差异 算法之类的差异算法。差异算法可以在DOM块列表和所获取文件块列表上运行。可将HTML 中的每一开始和结束标签看成块。因此，可为所获取文件中和DOM中的每一个字及每一开 始或结束标签对创建块。由于同一标签通常在HTML文档中被使用一次以上，唯一标识符 可被分配给每一开始标签(例如，通过用唯一标识符来设置所获取文件中的相应元素的属 性)。各字将其文本用作其标识符，并且因此如果相同的字在文档中出现一次以上的话，则 这些字将是非唯一的。如果所获取文件块具有与DOM块的唯一标识符匹配的唯一标识符， 则这两个块被确定为是相同的。它们的关联可以被记录。如果所获取文件块具有非唯一标 识符(诸如文本的情况)，但它存在于所获取文件中的相关联的块的附近，且具有匹配标识 符的块存在于DOM中的相应块附近，则这两个块被确定为是相同的块。它们的关联可以被 记录。在块列表中向前和向后重复应用该过程找到了具有非唯一标识符的未被改变的块的 关联。所记录的关联被用于在所获取文件和DOM块列表之间进行映射，并且反之亦然。
[0063]图2d示出了所获取文件的块列表(例如，所获取文件块列表232)和DOM的块列表 (例如，DOM块列表234)的示例230。每一文件中的各相同块可以使用所分配的标识符而彼 此关联(例如，用所获取文件块列表232的id=AAA240来标识的块映射到由DOM块列表234 中的id=AAA242来标识的块)。例如，在图2c中，所获取文件块列表232中块236与DOM块 列表234中的块238相同。块236可被映射到块238并反之亦然，因为块236的标识符240 与块238的标识符242相同。DOM块列表234中的块244没有映射到所获取文件块列表232 中的块，因为“
【权利要求】
1.一种系统，包括: 计算设备的至少一个处理器； 所述计算设备的存储器；以及 加载到所述存储器中的至少一个模块，所述模块使所述至少一个处理器: 通过以下方式将在IDE中的浏览器中的选择映射到在生成处于所述浏览器中选择的位置范围处的内容的源文件中的位置范围，并将在源文件中的选择映射到在动态浏览器文件中的位置范围: 将在所述浏览器中的选择映射到在所获取文件中的位置范围，所述所获取文件包括响应于HTTP请求从web服务器接收的文件； 将在所述所获取文件中的位置范围映射到在生成在所述浏览器中的所述选择的所述源文件中的位置范围；以及 将在所述浏览器中的选择与源代码编辑器中的所述源文件同时显示在所述IDE中，所述源文件被滚动到与在所述浏览器中的选择相对应的位置范围。
2.如权利要求1所述的系统，其特征在于，所述至少一个处理器接收将在所述所获取文件中的位置范围映射到在特定源文件中的特定位置范围的元数据，该元数据包括所述特定源文件的路径以及在所述特定源文件中的开始位置。
3.如权利要求2所述的系统，其特征在于，所述至少一个模块从接收到的元数据生成映射表，所述映射表将在所述所获取文件中的位置范围映射到在源文件中的位置范围。·
4.如权利要求1所述的系统，其特征在于，在所述浏览器中呈现的内容包括生产服务器的响应。
5.一种方法，包括: 由软件开发计算机的处理器从web服务器接收在IDE中的浏览器中的用户选择； 将在所述浏览器中的所述选择映射到在所获取文件中的位置范围，所述所获取文件包括响应于HTTP请求从web服务器接收的文件；以及 将在所述所获取文件中的位置范围映射到在生成所述浏览器中的所述用户选择的源文件中的位置范围；以及 将在IDE中的浏览器中的所述选择与在所述源文件中的位置范围同时显示，所述源文件在所述IDE的源代码编辑器中被滚动到生成所述浏览器中的用户选择的位置范围。
6.如权利要求5所述的方法，其特征在于，还包括: 接收将所述所获取文件中的位置范围映射到产生了在所述所获取文件的位置范围处的内容的源文件中的相应位置范围的元数据，所述元数据包括到所述源文件的路径以及在所述源文件中的与在所述所获取文件中的位置范围相对应的相应位置范围。
7.如权利要求6所述的方法，其特征在于，还包括: 在所述软件开发计算机的存储器中生成映射表，所述映射表通过创建所述所获取文件和浏览器文件之间的关联来将所述浏览器中的内容映射到所述所获取文件中的相应内容。
8.如权利要求7所述的方法，其特征在于，还包括: 通过向所述web服务器发送生成服务器内容的请求来生成所述服务器内容并将所述服务器内容显示在所述浏览器中。
9.如权利要求5所述的方法，其特征在于，还包括:显示表示浏览器页面的树数据结构，所述浏览器页面被显示在所述浏览器中。
10.一种包括当执行时使计算设备的至少一个处理器执行下列操作的计算机可执行指令的计算机可读存储介质:接收在IDE中的浏览器中的选择；将在所述浏览器中的选择映射到在动态浏览器文件块列表中的位置范围；将在所述动态浏览器文件块列表中的位置范围映射到在所获取文件块列表中的位置范围，所述所获取文件包括响应于HTTP请求从web服务器接收的文件；以及将在所述所获取文件块列表中的位置范围映射到生成在所述浏览器中的选择的源文件中的相应位置范围；以及将在所述浏览器中的选择和所述源文件同时显示在所述IDE中，所述源文件在源代码编辑器中被滚动到所述源文件中的相应位置范围。·
【文档编号】G06F17/00GK103597469SQ201280029384
【公开日】2014年2月19日 申请日期:2012年6月5日 优先权日:2011年6月16日
【发明者】D·P·查迪亚, J·M·戴维斯, J·E·伽宝迪贡扎乐兹, V·R·乔希, M·J·哈德, M·巴切, A·T-P·潘, R·曼伽洛, J·E·容格 申请人:微软公司