將源代碼鏈接到運(yùn)行元素的制作方法
【專利摘要】一種方法包括解析文本源文檔來(lái)構(gòu)造文檔節(jié)點(diǎn)樹(shù)，使得文檔節(jié)點(diǎn)樹(shù)包括指示文本源文檔中與文檔節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)相對(duì)應(yīng)的文本位置的文本偏移。該方法包括從文檔節(jié)點(diǎn)樹(shù)構(gòu)造文檔對(duì)象模型（DOM）和表示該DOM的查看節(jié)點(diǎn)樹(shù)。查看節(jié)點(diǎn)樹(shù)的構(gòu)造包括將查看節(jié)點(diǎn)樹(shù)映射到文檔節(jié)點(diǎn)樹(shù)。該方法包括提供DOM的運(yùn)行表示，使得DOM的DOM元素經(jīng)由查看節(jié)點(diǎn)樹(shù)和文檔節(jié)點(diǎn)樹(shù)被鏈接到文本源文檔中與該DOM元素相對(duì)應(yīng)的文本。
【專利說(shuō)明】將源代碼鏈接到運(yùn)行元素
[0001]直量
[0002]web開(kāi)發(fā)工具使得開(kāi)發(fā)人員能夠診斷超文本標(biāo)記語(yǔ)言(HTML)和層疊樣式表(CSS)問(wèn)題。開(kāi)發(fā)人員可動(dòng)態(tài)地修改文檔對(duì)象模型(DOM)元素(包括CSS選擇器)并在瀏覽器中查看在運(yùn)行頁(yè)面中立即反映出的改變。然而，為了將修改永久應(yīng)用到產(chǎn)生該頁(yè)面的標(biāo)記文本源文檔，開(kāi)發(fā)人員需要定位并適當(dāng)?shù)匦薷呐c所需修改相關(guān)聯(lián)的標(biāo)記文本或起源JavaScript.,然而，定位與所需修改相關(guān)聯(lián)的源代碼文本可能是困難的，因?yàn)橄嚓P(guān)聯(lián)的標(biāo)記文本可能不是立即明顯的或者可能源于開(kāi)發(fā)人員不熟悉的代碼。
[0003]
[0004]提供本概述是為了以簡(jiǎn)化的形式介紹將在以下詳細(xì)描述中進(jìn)一步描述的一些概念。本概述并不旨在標(biāo)識(shí)出所要求保護(hù)的主題的關(guān)鍵特征或必要特征，也不旨在用于限定所要求保護(hù)的主題的范圍。
[0005]一個(gè)實(shí)施例提供一種方法，該方法包括解析文本源文檔來(lái)構(gòu)造文檔節(jié)點(diǎn)樹(shù)，使得文檔節(jié)點(diǎn)樹(shù)包括指示文本源文檔中與文檔節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)相對(duì)應(yīng)的文本的位置的文本偏移。該方法包括從文檔節(jié)點(diǎn)樹(shù)構(gòu)造文檔對(duì)象模型(DOM)和表示該DOM的查看節(jié)點(diǎn)樹(shù)。查看節(jié)點(diǎn)樹(shù)的構(gòu)造包括將查看節(jié)點(diǎn)樹(shù)映射到文檔節(jié)點(diǎn)樹(shù)。該方法包括提供DOM的運(yùn)行表示，使得DOM的DOM元素經(jīng)由查看節(jié)點(diǎn)樹(shù)和文檔節(jié)點(diǎn)樹(shù)被鏈接到文本源文檔中與該DOM元素相對(duì)應(yīng)的文本。
[0006]附圖簡(jiǎn)沭
[0007]包括附圖來(lái)提供了對(duì)各實(shí)施例的進(jìn)一步理解，且這些附圖被合并在本發(fā)明書(shū)內(nèi)并構(gòu)成其一部分。附圖示出各實(shí)施例，并且與說(shuō)明書(shū)一起用于解釋本發(fā)明的原理。其他實(shí)施例和各實(shí)施例的許多預(yù)期優(yōu)點(diǎn)將隨著參考下面的詳細(xì)描述進(jìn)行更好的理解而得到認(rèn)識(shí)。附圖的元素不一定相對(duì)于彼此而縮放。相同的附圖標(biāo)記指代對(duì)應(yīng)的類似部分。
[0008]圖1是示出web開(kāi)發(fā)工具的一個(gè)實(shí)施例的框圖。
[0009]圖2是示出適于實(shí)現(xiàn)圖1中示出的web開(kāi)發(fā)工具的各方面的計(jì)算設(shè)備/環(huán)境的框圖。
[0010]圖3是示出web開(kāi)發(fā)工具的一個(gè)實(shí)施例的功能框圖。
[0011]圖4是示出映射到文檔節(jié)點(diǎn)樹(shù)的HTML文本的一個(gè)示例的框圖。
[0012]圖5是示出映射到查看節(jié)點(diǎn)樹(shù)的文檔節(jié)點(diǎn)樹(shù)的一個(gè)示例的框圖。
[0013]圖6是示出瀏覽器實(shí)例所表示的DOM的查看節(jié)點(diǎn)樹(shù)的一個(gè)示例的框圖。
[0014]圖7是示出用于將源代碼編輯器中的標(biāo)記文本與瀏覽器中所表示的相關(guān)聯(lián)的DOM元素相鏈接的方法的一個(gè)實(shí)施例的流程圖。
[0015]圖8是示出用于更新或無(wú)效文檔節(jié)點(diǎn)樹(shù)的節(jié)點(diǎn)的文本偏移的方法的一個(gè)實(shí)施例的流程圖。
[0016]詳細(xì)描沭
[0017]在以下詳細(xì)描述中，對(duì)附圖進(jìn)行了參考，附圖構(gòu)成了實(shí)施例的一部分且在其中作為示例示出了可在其中實(shí)踐本發(fā)明的各特定實(shí)施例。可以理解，可以使用其它實(shí)施例并且可以做出結(jié)構(gòu)上或邏輯上的改變而不背離本發(fā)明的范圍。因此，以下詳細(xì)描述并不旨在限制，并且本發(fā)明的范圍由所附權(quán)利要求來(lái)限定。
[0018]應(yīng)理解，此處描述的各示例性實(shí)施例的特征可相互組合，除非另外具體注明。
[0019]圖1是示出web開(kāi)發(fā)工具100的一個(gè)實(shí)施例的框圖。web開(kāi)發(fā)工具100包括文本源文檔102和該文本源文檔的運(yùn)行表示104。在一個(gè)實(shí)施例中，文本源文檔102在網(wǎng)頁(yè)源代碼編輯器中被打開(kāi)。在其他實(shí)施例中，文本源文檔102或文本源文檔102的各部分被顯示在網(wǎng)頁(yè)源代碼查看器中。在一個(gè)實(shí)施例中，文本源文檔102的運(yùn)行表示104由瀏覽器提供。在其他實(shí)施例中，文本源文檔102的運(yùn)行表示104由設(shè)計(jì)器、屬性窗格或文本源文檔的運(yùn)行表示的其他合適的可視化來(lái)提供。
[0020]文本源文檔102的網(wǎng)頁(yè)源代碼經(jīng)由鏈接112被鏈接到由運(yùn)行表示104所表示的網(wǎng)頁(yè)的運(yùn)行頁(yè)面實(shí)例中的相關(guān)聯(lián)的文檔對(duì)象模型(DOM)IlO元素。因此，通過(guò)選擇或突出顯示運(yùn)行表示104中的DOM元素，與所選擇的或所突出顯示的DOM元素相關(guān)聯(lián)的網(wǎng)頁(yè)文本被選擇或突出顯示在文本源文檔102內(nèi)。同樣，通過(guò)選擇或突出顯示文本源文檔102內(nèi)的網(wǎng)頁(yè)文本的一部分，與網(wǎng)頁(yè)文本的所選擇的或突出顯示的部分相關(guān)聯(lián)的一個(gè)或多個(gè)DOM元素被選擇或突出顯示在運(yùn)行表示104內(nèi)。以此方式，網(wǎng)頁(yè)開(kāi)發(fā)人員可即時(shí)匹配DOM元素，因?yàn)樗鼈兣c定義這些DOM元素的網(wǎng)頁(yè)文本源代碼一起被表示在網(wǎng)頁(yè)的運(yùn)行實(shí)例中。
[0021]在一個(gè)實(shí)施例中，文本源文檔102被在源代碼編輯器中打開(kāi)，這可包括適于打開(kāi)、創(chuàng)建、編輯以及保存網(wǎng)頁(yè)文本源文檔的任何合適的文本編輯器在一個(gè)實(shí)施例中，可被源代碼編輯器編輯的網(wǎng)頁(yè)文本源文檔包括標(biāo)記文本，如超文本標(biāo)記語(yǔ)言(HTML)、層疊樣式表(CSS)、可擴(kuò)展標(biāo)記語(yǔ)言(XML)和/或可擴(kuò)展超文本標(biāo)記語(yǔ)言(XHTML)。網(wǎng)頁(yè)文本源文檔也可包括JavaScript或Jscript。如本文所使用的，“JS”被用于指示JavaScript和Jscript兩者。在其他實(shí)施例中，源代碼編輯器適于打開(kāi)、創(chuàng)建、編輯以及保存包括其他合適的網(wǎng)頁(yè)標(biāo)記文本和腳本語(yǔ)言的網(wǎng)頁(yè)文本源文檔。在一個(gè)實(shí)施例中，源代碼編輯器支持網(wǎng)頁(yè)文本源文檔的多個(gè)實(shí)例，使得相關(guān)或鏈接的網(wǎng)頁(yè)文本源文檔可在源代碼編輯器中被同時(shí)打開(kāi)。
[0022]在一個(gè)實(shí)施例中，運(yùn)行表不104是適于表不D0M110的web瀏覽器。在一個(gè)實(shí)施例中，瀏覽器是遵循萬(wàn)維網(wǎng)聯(lián)盟(W3C)的web瀏覽器。在一個(gè)實(shí)施例中，瀏覽器提供D0M110的瀏覽器不可知的表示，使得DOMl 10的表示不依賴于任何特定瀏覽器，如InternetExp1rer>FireFox>Chrome>Safari或者Opera。在另一實(shí)施例中，選擇瀏覽器使得D0M110的表示基于所選瀏覽器。瀏覽器可包括供用戶選擇D0M110的表示所基于的特定瀏覽器(如Internet Exp1rer>FireFox>Chrome>Safari 或者 Opera)的選項(xiàng)。在一個(gè)實(shí)施例中，瀏覽器支持DOM的多個(gè)實(shí)例，使得相關(guān)或鏈接的各網(wǎng)頁(yè)可同時(shí)運(yùn)行在瀏覽器內(nèi)。
[0023]運(yùn)行表示1104還可包括運(yùn)行腳本108和應(yīng)用程序編程接口(API)。腳本108和API106可以修改運(yùn)行表示104中D0M110的DOM元素。在一個(gè)實(shí)施例中，由于對(duì)D0M110的運(yùn)行表示104的修改而不再以D0M110的運(yùn)行表示104來(lái)表示的文本源文檔102的各部分經(jīng)由可視指示符被如此指示。在一個(gè)實(shí)施例中，響應(yīng)于選擇運(yùn)行表示104中的DOM元素，文本源文檔102中與DOM元素相關(guān)聯(lián)的源代碼的位置被報(bào)告給用戶。
[0024]圖2是示出適于實(shí)現(xiàn)先前參考圖1描述并示出的web開(kāi)發(fā)工具100的各方面的計(jì)算設(shè)備/環(huán)境200的一個(gè)實(shí)施例的框圖。計(jì)算設(shè)備/環(huán)境200包括一個(gè)或多個(gè)處理單元212和系統(tǒng)存儲(chǔ)器214。取決于計(jì)算設(shè)備/環(huán)境200的確切配置和類型，存儲(chǔ)器214可以是易失性(如RAM)、非易失性(諸如ROM、閃存等)或兩者的結(jié)合。
[0025]計(jì)算設(shè)備/環(huán)境200還可具有附加的特征/功能。例如，計(jì)算設(shè)備/環(huán)境200還可包含附加存儲(chǔ)(可移動(dòng)和/或不可移動(dòng))，包括但不限于磁盤、光盤或磁帶。這樣的附加存儲(chǔ)在圖2中由可移動(dòng)存儲(chǔ)216和不可移動(dòng)存儲(chǔ)218示出。計(jì)算機(jī)存儲(chǔ)介質(zhì)包括以用于存儲(chǔ)諸如計(jì)算機(jī)可讀指令、數(shù)據(jù)結(jié)構(gòu)、程序模塊或其他數(shù)據(jù)等的任何合適的方法或技術(shù)實(shí)現(xiàn)的易失性和非易失性、可移動(dòng)和不可移動(dòng)介質(zhì)。存儲(chǔ)器214、可移動(dòng)存儲(chǔ)216以及不可移動(dòng)存儲(chǔ)218都是計(jì)算機(jī)存儲(chǔ)介質(zhì)(例如，儲(chǔ)存在被至少一個(gè)處理器執(zhí)行時(shí)使得該至少一個(gè)處理器執(zhí)行一種方法的計(jì)算機(jī)可執(zhí)行指令的計(jì)算機(jī)可讀存儲(chǔ)介質(zhì))的示例。計(jì)算機(jī)存儲(chǔ)介質(zhì)包括，但不限于，RAM、ROM、EEPR0M、閃存或其它存儲(chǔ)器技術(shù)、CD-ROM、數(shù)字多功能盤(DVD)或其它光盤存儲(chǔ)、磁帶盒、磁帶、磁盤存儲(chǔ)或其它磁性存儲(chǔ)設(shè)備、或能用于存儲(chǔ)所需信息且可以由計(jì)算設(shè)備/環(huán)境200訪問(wèn)的任何其它介質(zhì)。任何這樣的計(jì)算機(jī)存儲(chǔ)介質(zhì)都可以是計(jì)算設(shè)備/環(huán)境200的一部分。
[0026]計(jì)算設(shè)備/環(huán)境200的各元件經(jīng)由一個(gè)或多個(gè)通信鏈接215通信耦合在一起。計(jì)算設(shè)備/環(huán)境200還包括允許計(jì)算設(shè)備/環(huán)境200與其它計(jì)算機(jī)/應(yīng)用226進(jìn)行通信的一個(gè)或多個(gè)通信連接224。計(jì)算設(shè)備/環(huán)境200還可以包括諸如鍵盤、定點(diǎn)設(shè)備(例如，鼠標(biāo))、筆、語(yǔ)音輸入設(shè)備、觸摸輸入設(shè)備等的輸入設(shè)備222。計(jì)算設(shè)備/環(huán)境200還可以包括諸如顯示器、揚(yáng)聲器、打印機(jī)等輸出設(shè)備220。
[0027]圖2和以上討論旨在提供其中可實(shí)現(xiàn)一個(gè)或多個(gè)實(shí)施例的合適的計(jì)算環(huán)境的簡(jiǎn)要概括描述，并且不旨在對(duì)各實(shí)施例的使用范圍或功能提出任何限制。
[0028]圖3是示出web開(kāi)發(fā)工具300的一個(gè)實(shí)施例的功能框圖。在一個(gè)實(shí)施例中，web開(kāi)發(fā)工具300提供先前參考圖1描述并示出的web開(kāi)發(fā)工具100。web開(kāi)發(fā)工具300包括標(biāo)記文本302、標(biāo)記解析器306、文檔節(jié)點(diǎn)樹(shù)310、D0M構(gòu)建器314、瀏覽器318和DOM修改監(jiān)聽(tīng)器322。標(biāo)記文本302被輸入到標(biāo)記解析器306，如在304處所示。標(biāo)記解析器306輸出文檔節(jié)點(diǎn)樹(shù)310，如在308處所示。文檔節(jié)點(diǎn)樹(shù)310被輸入到DOM構(gòu)建器314，如在312處所示。DOM構(gòu)建器314將DOM輸出給瀏覽器318，如在316處所示。DOM修改監(jiān)聽(tīng)器322跟蹤瀏覽器318內(nèi)對(duì)DOM元素的改變，如在320處所示。DOM修改監(jiān)聽(tīng)器322將改變信息輸出給文檔節(jié)點(diǎn)樹(shù)310，如在324處所示。
[0029]標(biāo)記文本302包括HTML、CSS、XML、XHTML和/或其他合適的標(biāo)記文本。在一個(gè)實(shí)施例中，包括標(biāo)記文本302的源文檔在源代碼編輯器中被打開(kāi)。在其他實(shí)施例中，web開(kāi)發(fā)工具300訪問(wèn)包括標(biāo)記文本302的源文檔而不在源代碼編輯器中打開(kāi)該源文檔。標(biāo)記文本302定義用于提供網(wǎng)頁(yè)的任何合適數(shù)量的對(duì)象。在圖3所示的示例中，標(biāo)記文本302包括HTML。該示例HTML定義用于提供包括文本“Hello”的DOM元素的一個(gè)對(duì)象。
[0030]由于標(biāo)記文本302的文本特性，標(biāo)記文本302的每一字符具有相對(duì)應(yīng)的行號(hào)(如在326處所示)以及該行的相對(duì)應(yīng)的相對(duì)字符號(hào)(如在328處所示)。例如，標(biāo)記文本302中的字符“H”在行2、字符8處。標(biāo)記文本302的每一字符還具有指示該字符相對(duì)于標(biāo)記文本302的開(kāi)頭的位置的字符號(hào)。例如，標(biāo)記文本302中的字符“H”具有字符號(hào)26，因?yàn)樗菢?biāo)記文本302中的第26個(gè)字符。因而，標(biāo)記文本302中的每一字符可基于行號(hào)和該行內(nèi)的位置或基于指示該字符相對(duì)于標(biāo)記文本302的開(kāi)頭的位置的字符號(hào)來(lái)定位。同樣，標(biāo)記文本302內(nèi)的一系列字符可基于行號(hào)范圍和在這些行內(nèi)的位置或基于字符號(hào)范圍來(lái)定位。如本文所使用的，這些行號(hào)范圍和這些行內(nèi)的位置或者字符號(hào)范圍被稱為“文本偏移”。
[0031]標(biāo)記文本302被標(biāo)記解析器306解析以構(gòu)造文檔節(jié)點(diǎn)樹(shù)310。在一個(gè)實(shí)施例中，標(biāo)記解析器306與源代碼編輯器位于相同的計(jì)算設(shè)備/環(huán)境上。在另一實(shí)施例中，標(biāo)記解析器306與源代碼編輯器位于不同的計(jì)算設(shè)備/環(huán)境上。標(biāo)記解析器306包括HTML解析器、CSS解析器、XML解析器、XHTML解析器、和/或其他合適的標(biāo)記文本解析器。在一個(gè)實(shí)施例中，標(biāo)記解析器306是遵循W3C的。在另一實(shí)施例中，標(biāo)記解析器306基于與特定瀏覽器(如 Internet Explorer、FireFox、Chrome> Safari 或者 Opera)相關(guān)聯(lián)的解析器。在其他實(shí)施例中，標(biāo)記解析器306是包括該解析器的與特定瀏覽器相關(guān)聯(lián)的基本實(shí)現(xiàn)以及基于對(duì)該特定瀏覽器運(yùn)行時(shí)執(zhí)行和/或解析行為的知識(shí)對(duì)該解析實(shí)現(xiàn)的更改的混合解析器。
[0032]標(biāo)記解析器306將來(lái)自標(biāo)記文本302的與網(wǎng)頁(yè)相關(guān)的源文檔細(xì)節(jié)包括在文檔節(jié)點(diǎn)樹(shù)310中。除了 HTML對(duì)象和CSS對(duì)象外，標(biāo)記解析器306還包括來(lái)自標(biāo)記文本302的其他細(xì)節(jié)，如可能被瀏覽器解釋的文檔類型以及源內(nèi)評(píng)論。標(biāo)記解析器306還將指示這些源文檔細(xì)節(jié)在標(biāo)記文本302中的位置的文本偏移包括在文檔節(jié)點(diǎn)樹(shù)310中。這些文本偏移將文檔節(jié)點(diǎn)樹(shù)310的每一節(jié)點(diǎn)映射到與該節(jié)點(diǎn)相關(guān)聯(lián)的標(biāo)記文本。以此方式，在解析過(guò)程期間，維持文檔節(jié)點(diǎn)樹(shù)310和標(biāo)記文本302之間的鏈接。這將標(biāo)記解析器306與集成在瀏覽器內(nèi)的常規(guī)解析器區(qū)分開(kāi)，常規(guī)解析器在呈現(xiàn)期間通常出于性能原因而丟棄或變換源文檔細(xì)節(jié)并且不維護(hù)源文檔和所呈現(xiàn)的文檔之間的任何鏈接。
[0033]在圖3所示的示例中，文檔節(jié)點(diǎn)樹(shù)310使用字符號(hào)范圍作為文本偏移。例如，文檔節(jié)點(diǎn)樹(shù)310包括父節(jié)點(diǎn)“DIV”的文本偏移“文本跨度:1-42”，這指示對(duì)象“DIV”在標(biāo)記文本302中的位置。同樣，文檔節(jié)點(diǎn)樹(shù)310包括屬性“id”的文本偏移“文本跨度:6-15”、子節(jié)點(diǎn)“P”的文本偏移“文本跨度:23-34”以及子節(jié)點(diǎn)“Hello”的文本偏移“文本跨度:26_30?！币蚨ㄟ^(guò)將每一對(duì)象的文本偏移包括在文檔節(jié)點(diǎn)樹(shù)310內(nèi)，文檔節(jié)點(diǎn)樹(shù)310內(nèi)的每一對(duì)象被映射到與該對(duì)象相關(guān)聯(lián)的源文檔標(biāo)記文本。
[0034]DOM構(gòu)建器314從文檔節(jié)點(diǎn)樹(shù)310構(gòu)造DOM和表示DOM的查看節(jié)點(diǎn)樹(shù)。DOM構(gòu)建器314將查看節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)映射到文檔節(jié)點(diǎn)樹(shù)的相應(yīng)節(jié)點(diǎn)，使得DOM的每一元素被鏈接到文檔節(jié)點(diǎn)樹(shù)310中的相關(guān)聯(lián)的對(duì)象并從而鏈接到與該對(duì)象相關(guān)聯(lián)的源文檔標(biāo)記文本。
[0035]在一個(gè)實(shí)施例中，DOM構(gòu)建器314構(gòu)造JS元素。一旦執(zhí)行，JS元素可構(gòu)造和/或修改DOM元素和查看節(jié)點(diǎn)樹(shù)內(nèi)的相應(yīng)節(jié)點(diǎn)，這可不具有文檔節(jié)點(diǎn)樹(shù)310內(nèi)的相應(yīng)節(jié)點(diǎn)。
[0036]在一個(gè)實(shí)施例中，DOM構(gòu)建器314構(gòu)造不依賴于任何特定瀏覽器(如InternetExplorer、FireFox、Chrome、Safari或者Opera)的瀏覽器不可知的D0M。在另一實(shí)施例中，DOM構(gòu)建器314被選擇使得DOM是基于所選瀏覽器來(lái)改造的。DOM構(gòu)建器314可包括供用戶選擇DOM的構(gòu)造所基于的特定瀏覽器(如Internet Explorer、FireFox、Chrome、Safari或者Opera)的選項(xiàng)。所構(gòu)造的DOM由瀏覽器318表示。在一個(gè)實(shí)施例中，瀏覽器318是遵循W3C的瀏覽器。在圖3所示的示例中，瀏覽器318顯示包括文本“Hello”的DOM元素，如標(biāo)記文本302所定義的。
[0037]查看節(jié)點(diǎn)樹(shù)和文檔節(jié)點(diǎn)樹(shù)310將瀏覽器318內(nèi)的DOM元素鏈接到標(biāo)記文本302。例如，通過(guò)選擇或突出顯示瀏覽器318內(nèi)的“Hello”，標(biāo)記文本302內(nèi)的相關(guān)聯(lián)的標(biāo)記文本被選擇或突出顯示。反過(guò)來(lái)，通過(guò)選擇或突出顯示標(biāo)記文本302內(nèi)的“
Hello〈/p>”,瀏覽器318中相關(guān)聯(lián)的DOM元素“Hello”被選擇或突出顯示。[0038]DOM修改監(jiān)聽(tīng)器322跟蹤對(duì)瀏覽器318內(nèi)DOM元素的改變，如DOM變化。在一個(gè)實(shí)施例中，DOM修改監(jiān)聽(tīng)器322跟蹤對(duì)DOM元素的運(yùn)行時(shí)修改，以將文檔節(jié)點(diǎn)樹(shù)310中的文檔偏移標(biāo)記為無(wú)效或者用負(fù)責(zé)創(chuàng)建和/或重寫(xiě)DOM元素和/或?qū)傩缘腏S的執(zhí)行位置來(lái)替換文檔節(jié)點(diǎn)樹(shù)310中的文本偏移。在一個(gè)實(shí)施例中，DOM修改監(jiān)聽(tīng)器322跟蹤由于API106和/或腳本108 (圖1)而引起的對(duì)DOM元素的改變。在一個(gè)實(shí)施例中，DOM修改監(jiān)聽(tīng)器322更新或插入與經(jīng)修改的DOM元素相關(guān)聯(lián)的文檔節(jié)點(diǎn)樹(shù)的節(jié)點(diǎn)，以指示負(fù)責(zé)修改DOM元素的腳本的行。
[0039]圖4是示出映射到文檔節(jié)點(diǎn)樹(shù)404的HTML文本402的一個(gè)示例400的框圖。為了從HTML文本402構(gòu)造文檔節(jié)點(diǎn)樹(shù)404，HTML文本402被標(biāo)記文本解析器(如先前參考圖3描述并示出的標(biāo)記解析器306)解析。在圖4所示的示例中，HTML文本402被解析，使得文檔節(jié)點(diǎn)樹(shù)404包括父節(jié)點(diǎn)“DIV”和子節(jié)點(diǎn)“SPAN”及“P”。子節(jié)點(diǎn)“SPAN”包括進(jìn)一步的子節(jié)點(diǎn)“TEXT (Hello) ”。子節(jié)點(diǎn)“P”包括進(jìn)一步的子節(jié)點(diǎn)“TEXT (World) ”和具有值“foo”的屬性“class”。
[0040]因而，文檔節(jié)點(diǎn)樹(shù)404按結(jié)構(gòu)化樹(shù)格式來(lái)維護(hù)HTML文本402源文檔細(xì)節(jié)。如先前參考圖3描述并示出的，文檔節(jié)點(diǎn)樹(shù)404還包括每一父節(jié)點(diǎn)和子節(jié)點(diǎn)的文本偏移，以分別指示與每一父節(jié)點(diǎn)和子節(jié)點(diǎn)相關(guān)聯(lián)的HTML文本在HTML文本402內(nèi)的特定位置。
[0041]圖5是示出映射到查看節(jié)點(diǎn)樹(shù)508的文檔節(jié)點(diǎn)樹(shù)506的一個(gè)示例500的框圖。文檔節(jié)點(diǎn)樹(shù)506按結(jié)構(gòu)化樹(shù)格式來(lái)提供標(biāo)記文檔502的源文檔細(xì)節(jié)。查看節(jié)點(diǎn)樹(shù)508表示HTML實(shí)例管理器504中DOM的一個(gè)實(shí)例。在一個(gè)實(shí)施例中，HTML實(shí)例管理器504可以管理查看節(jié)點(diǎn)樹(shù)的多個(gè)實(shí)例。在一個(gè)實(shí)施例中，在HTML實(shí)例管理器504內(nèi)表示DOM的查看節(jié)點(diǎn)樹(shù)508是基于所選瀏覽器的。HTML實(shí)例管理器504可包括供用戶選擇查看節(jié)點(diǎn)樹(shù)508所基于的特定瀏覽器(如 Internet Explorer、FireFox、Chrome、Safari 或者 Opera)的選項(xiàng)。
[0042]查看節(jié)點(diǎn)樹(shù)508的每一節(jié)點(diǎn)包括將每一節(jié)點(diǎn)映射到文檔節(jié)點(diǎn)樹(shù)506中的相關(guān)聯(lián)的節(jié)點(diǎn)的標(biāo)識(shí)符。在一個(gè)實(shí)施例中，該標(biāo)識(shí)符被先前參考圖3描述并示出的DOM構(gòu)建器314分配給查看節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)。在一個(gè)實(shí)施例中，該標(biāo)識(shí)符是數(shù)字。在圖5所示的示例中，查看節(jié)點(diǎn)樹(shù)508的標(biāo)識(shí)符“ 105”被映射到文檔節(jié)點(diǎn)樹(shù)506的父節(jié)點(diǎn)“DIV”。同樣，標(biāo)識(shí)符“ 106”被映射到子節(jié)點(diǎn)“SPAN”且標(biāo)識(shí)符“ 107”被映射到子節(jié)點(diǎn)“TEXT (Hello) ”。因而，查看節(jié)點(diǎn)樹(shù)的每一標(biāo)識(shí)符將查看節(jié)點(diǎn)樹(shù)的一節(jié)點(diǎn)鏈接到文檔節(jié)點(diǎn)樹(shù)中的相關(guān)聯(lián)的節(jié)點(diǎn)。
[0043]圖6是示出瀏覽器實(shí)例614所表示的DOM的查看節(jié)點(diǎn)樹(shù)610的一個(gè)示例600的框圖。應(yīng)用602包括HTML實(shí)例管理器608，它管理查看節(jié)點(diǎn)樹(shù)610。在一個(gè)實(shí)施例中，HTML實(shí)例管理器608管理查看節(jié)點(diǎn)樹(shù)的多個(gè)實(shí)例。應(yīng)用606包括實(shí)例管理器612，它管理瀏覽器實(shí)例614。在一個(gè)實(shí)施例中，實(shí)例管理器612管理多個(gè)瀏覽器實(shí)例。瀏覽器實(shí)例614表示DOM的實(shí)例。應(yīng)用602通過(guò)通信鏈路(COM) 604通信耦合到應(yīng)用606。
[0044]查看節(jié)點(diǎn)樹(shù)610的每一節(jié)點(diǎn)的標(biāo)識(shí)符被鏈接到瀏覽器實(shí)例614所表示的相關(guān)聯(lián)的DOM元素，如查看節(jié)點(diǎn)樹(shù)610中每一“D0M代理”所指示的。因而，瀏覽器實(shí)例614所表示的每一 DOM元素被鏈接或映射到查看節(jié)點(diǎn)樹(shù)610的一節(jié)點(diǎn)。因此，瀏覽器實(shí)例614中表示的每一 DOM元素被通過(guò)查看節(jié)點(diǎn)樹(shù)和文檔節(jié)點(diǎn)樹(shù)鏈接到標(biāo)記文本源文檔中的標(biāo)記文本。
[0045]在圖6所示的示例中，查看節(jié)點(diǎn)樹(shù)610的標(biāo)識(shí)符“105”被鏈接到瀏覽器實(shí)例614所表示的DOM元素的標(biāo)識(shí)符“ 105”的DOM代理。同樣，標(biāo)識(shí)符“ 106”被鏈接到標(biāo)識(shí)符“ 106”的DOM代理且標(biāo)識(shí)符“ 107”被鏈接到標(biāo)識(shí)符“ 107”的DOM代理。在該示例中，查看節(jié)點(diǎn)樹(shù)610包括將子節(jié)點(diǎn)“TEXT (Hello) ”(圖5)鏈接到瀏覽器實(shí)例614內(nèi)的DOM元素“Hello”的標(biāo)識(shí)符“107”。
[0046]圖7是示出用于將源代碼編輯器中的標(biāo)記文本與瀏覽器中相關(guān)聯(lián)的DOM元素相鏈接的方法702的一個(gè)實(shí)施例的流程圖。在704，標(biāo)記文本源文檔(例如，先前參考圖3描述并示出的標(biāo)記文本302)在源代碼編輯器中被打開(kāi)。在706，構(gòu)造映射到標(biāo)記文本源文檔的文檔節(jié)點(diǎn)樹(shù)(例如，先前參考圖3描述并示出的文檔節(jié)點(diǎn)樹(shù)310)。在708，構(gòu)造DOM和表示映射到文檔節(jié)點(diǎn)樹(shù)的DOM的查看節(jié)點(diǎn)樹(shù)(例如，先前參考圖5描述并示出的查看節(jié)點(diǎn)樹(shù)508)
[0047]在710，在瀏覽器中表示DOM (例如，先前參考圖1描述并示出的運(yùn)行表示104)。在712，對(duì)瀏覽器中DOM元素的選擇被鏈接到源代碼編輯器中相關(guān)聯(lián)的標(biāo)記文本，或者對(duì)源代碼編輯器中標(biāo)記文本的選擇被鏈接到瀏覽器中相關(guān)聯(lián)的DOM元素。經(jīng)由查看節(jié)點(diǎn)樹(shù)和文檔節(jié)點(diǎn)樹(shù)來(lái)提供DOM元素和相關(guān)聯(lián)的標(biāo)記文本之間的鏈接。
[0048]圖8是示出用于更新或無(wú)效文檔節(jié)點(diǎn)樹(shù)的節(jié)點(diǎn)的文本偏移的方法800的一個(gè)實(shí)施例的流程圖。在802，跟蹤對(duì)DOM的運(yùn)行表示的修改。對(duì)DOM的運(yùn)行表示的修改可以是由API106、腳本108 (圖1)或其他合適的過(guò)程而引起的。在804，基于對(duì)DOM的運(yùn)行表示的修改來(lái)更新或無(wú)效文檔節(jié)點(diǎn)樹(shù)中節(jié)點(diǎn)的文本偏移。在一個(gè)實(shí)施例中，更新與對(duì)DOM的運(yùn)行表示的修改相關(guān)聯(lián)的文檔節(jié)點(diǎn)樹(shù)中對(duì)應(yīng)節(jié)點(diǎn)的文本偏移，以指示負(fù)責(zé)該修改的JS的位置。
[0049]各實(shí)施例提供了用于將瀏覽器中表示的DOM元素與標(biāo)記文本源文檔中用來(lái)構(gòu)造該DOM元素的標(biāo)記文本相鏈接的web開(kāi)發(fā)工具。標(biāo)記文本源文檔被逐段解析以構(gòu)造D0M，使得初始源代碼與所構(gòu)造的DOM元素子節(jié)點(diǎn)精確映射得到維護(hù)。使用所公開(kāi)的web開(kāi)發(fā)工具，網(wǎng)頁(yè)開(kāi)發(fā)人員可立即在運(yùn)行頁(yè)面中定位與所選擇的DOM元素相關(guān)聯(lián)的源代碼，并立即在與所選擇的源代碼相關(guān)聯(lián)的運(yùn)行頁(yè)面中定位DOM元素。
[0050]盡管此處說(shuō)明并描述了具體實(shí)施例，但本領(lǐng)域技術(shù)人員可以理解，可用各種替換和/或等價(jià)實(shí)現(xiàn)來(lái)替換所示出并描述的具體實(shí)施例而不背離本發(fā)明的范圍。本申請(qǐng)旨在覆蓋此處討論的具體實(shí)施例的任何改編或變型。因此，本發(fā)明旨在僅由權(quán)利要求書(shū)及其等效方案來(lái)限制。
【權(quán)利要求】
1.一種方法，包括: 解析文本源文檔來(lái)構(gòu)造文檔節(jié)點(diǎn)樹(shù)，使得所述文檔節(jié)點(diǎn)樹(shù)包括指示所述文本源文檔中與所述文檔節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)相對(duì)應(yīng)的文本的位置的文本偏移； 從所述文檔節(jié)點(diǎn)樹(shù)構(gòu)造文檔對(duì)象模型(DOM)和表示所述DOM的查看節(jié)點(diǎn)樹(shù),構(gòu)造所述查看節(jié)點(diǎn)樹(shù)包括將所述查看節(jié)點(diǎn)樹(shù)映射到所述文檔節(jié)點(diǎn)樹(shù)；以及 提供所述DOM的運(yùn)行表示，使得所述DOM的DOM元素經(jīng)由所述查看節(jié)點(diǎn)樹(shù)和所述文檔節(jié)點(diǎn)樹(shù)被鏈接到所述文本源文檔中與所述DOM元素相對(duì)應(yīng)的文本。
2.如權(quán)利要求1所述的方法，其特征在于，還包括: 跟蹤對(duì)DOM元素的運(yùn)行表示的修改；以及 進(jìn)行以下之一: 基于所述修改將與經(jīng)修改的DOM元素相對(duì)應(yīng)的所述查看節(jié)點(diǎn)樹(shù)的節(jié)點(diǎn)的文本偏移標(biāo)記為無(wú)效，以及 基于所述修改用經(jīng)更新的文本偏移來(lái)替換與經(jīng)修改的DOM元素相對(duì)應(yīng)的查看節(jié)點(diǎn)樹(shù)的節(jié)點(diǎn)的文本偏移。
3.如權(quán)利要求2所述的方法，其特征在于，跟蹤修改包括跟蹤DOM變化事件。
4.如權(quán)利要求2所述的方法，其特征在于，跟蹤修改包括經(jīng)由所述DOM的運(yùn)行表示的應(yīng)用程序編程接口(API)來(lái)跟蹤修改。
5.如權(quán)利要求1所述的方法，其特征在于，還包括: 跟蹤由于所述DOM的運(yùn)行表示中腳本的執(zhí)行而引起的對(duì)DOM元素的運(yùn)行表示的修改；以及 進(jìn)行以下之一: 更新及插入與經(jīng)修改的DOM元素相關(guān)聯(lián)的所述文檔節(jié)點(diǎn)樹(shù)的節(jié)點(diǎn)以指示負(fù)責(zé)修改所述DOM元素的的腳本的行。
6.如權(quán)利要求1所述的方法，其特征在于，提供所述DOM的運(yùn)行表示包括在瀏覽器實(shí)例中提供所述DOM的運(yùn)行表示。
7.如權(quán)利要求1所述的方法，其特征在于，解析所述文本源文檔包括用超文本標(biāo)記語(yǔ)言(HTML)解析器和層疊樣式表(CSS)解析器之一來(lái)解析所述文本源文檔。
8.如權(quán)利要求1所述的方法，其特征在于，解析文本源文檔包括基于所指定的瀏覽器的解析器來(lái)解析所述文本源文檔。
9.如權(quán)利要求1所述的方法，其特征在于，還包括: 在解析所述文本源文檔之前在源代碼編輯器中打開(kāi)所述文本源文檔。
10.一種存儲(chǔ)用于控制計(jì)算設(shè)備以便執(zhí)行一種方法的計(jì)算機(jī)可執(zhí)行指令的計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述方法包括: 從標(biāo)記文本源文檔構(gòu)造文檔節(jié)點(diǎn)樹(shù)，使得所述文檔節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)包括文本偏移和標(biāo)記文本源文檔細(xì)節(jié)，所述文檔節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)中的文本偏移指示所述標(biāo)記文本源文檔中與所述文檔節(jié)點(diǎn)樹(shù)的每一節(jié)點(diǎn)相對(duì)應(yīng)的標(biāo)記文本的位置； 從所述文檔節(jié)點(diǎn)樹(shù)來(lái)構(gòu)造文檔對(duì)象模型(DOM)和表示所述DOM的查看節(jié)點(diǎn)樹(shù),構(gòu)造所述查看節(jié)點(diǎn)樹(shù)包括將所述查看節(jié)點(diǎn)樹(shù)映射到所述文檔節(jié)點(diǎn)樹(shù)；以及 在瀏覽器中表示所述D0M，使得每一 DOM元素經(jīng)由所述查看節(jié)點(diǎn)樹(shù)和所述文檔節(jié)點(diǎn)樹(shù)被鏈接 到與所述DOM元素相關(guān)聯(lián)的標(biāo)記文本。
【文檔編號(hào)】G06F17/00GK103620586SQ201280030491
【公開(kāi)日】2014年3月5日 申請(qǐng)日期:2012年5月30日 優(yōu)先權(quán)日:2011年6月23日
【發(fā)明者】M·C·范寧, M·豪爾, G·林斯各特, F·G·安德魯, K·A·肖曼, E·特沃倫 申請(qǐng)人:微軟公司