調(diào)試部署到遠(yuǎn)程服務(wù)器的JavaScript

調(diào)試部署到遠(yuǎn)程服務(wù)器的JavaScript

在開(kāi)始之前，按照配置JavaScript調(diào)試器中的說(shuō)明配置內(nèi)置調(diào)試器。要使用實(shí)時(shí)編輯功能并在瀏覽器中動(dòng)態(tài)查看HTML和CSS中的更改，請(qǐng)安裝JetBrains IDE Support Chrome擴(kuò)展。在“HTML，CSS和JavaScript中的實(shí)時(shí)編輯”一節(jié)中了解更多內(nèi)容。

提示：默認(rèn)情況下，調(diào)試會(huì)話在具有自定義Chrome用戶數(shù)據(jù)的新窗口中啟動(dòng)。要使用您熟悉的外觀打開(kāi)新的Chrome實(shí)例，請(qǐng)?jiān)贗ntelliJ IDEA中配置Chrome以開(kāi)始使用您的用戶數(shù)據(jù)，有關(guān)詳細(xì)信息，請(qǐng)參閱“使用默認(rèn)Chrome用戶數(shù)據(jù)啟動(dòng)調(diào)試會(huì)話”。

什么是遠(yuǎn)程Web服務(wù)器？

在IntelliJ IDEA中，任何在當(dāng)前項(xiàng)目之外具有文檔根目錄的服務(wù)器都稱為“遠(yuǎn)程服務(wù)器”。此服務(wù)器實(shí)際上可能在物理遠(yuǎn)程主機(jī)或您的計(jì)算機(jī)上運(yùn)行。

例如，如果您的項(xiàng)目位于：C：/IntelliJ IDEAProjects/MyProject中 ，并且Web服務(wù)器文檔根目錄是：C：/XAMPP/htdocs，則對(duì)于IntelliJ IDEA，此Web服務(wù)器是遠(yuǎn)程的。

如何在IntelliJ IDEA項(xiàng)目中將服務(wù)器上的應(yīng)用程序源與本地副本同步？

要在遠(yuǎn)程Web服務(wù)器上調(diào)試應(yīng)用程序 ，您需要在IntelliJ IDEA項(xiàng)目中獲取其源代碼的副本。要同步本地和遠(yuǎn)程源，請(qǐng)按照“創(chuàng)建遠(yuǎn)程服務(wù)器配置”和“配置IntelliJ IDEA與Web服務(wù)器的同步”中所述來(lái)創(chuàng)建部署配置。

調(diào)試遠(yuǎn)程服務(wù)器上的應(yīng)用程序

1. 根據(jù)需要在JavaScript代碼中設(shè)置斷點(diǎn)。
2. 創(chuàng)建JavaScript Debug類型的調(diào)試配置 ： 
   從主菜單中，選擇：運(yùn)行|編輯配置，然后在編輯配置對(duì)話框中，單擊工具欄上的，并從彈出列表中選擇JavaScript調(diào)試。
3. 在打開(kāi)的“運(yùn)行/調(diào)試配置：JavaScript調(diào)試”對(duì)話框中，指定運(yùn)行應(yīng)用程序的URL地址。根據(jù)服務(wù)器訪問(wèn)配置，此URL地址應(yīng)該是Web服務(wù)器根URL和相對(duì)于Web服務(wù)器文檔根的HTML文件路徑的連接，請(qǐng)參閱“配置IntelliJ IDEA與Web服務(wù)器的同步”。單擊“確定”以保存配置設(shè)置。
   
4. 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的配置， 然后單擊“ 調(diào)試”（）。運(yùn)行配置中指定的HTML文件將在所選瀏覽器中打開(kāi)，并顯示“調(diào)試”工具窗口。
5. 在“調(diào)試”工具窗口中，繼續(xù)執(zhí)行操作：逐步執(zhí)行程序，停止并恢復(fù)程序執(zhí)行，暫停時(shí)檢查它，查看實(shí)際的HTML DOM等。

示例

假設(shè)您有一個(gè)由index.html文件和MyJavaScript.js文件組成的簡(jiǎn)單應(yīng)用程序 ，其中index.html引用了MyJavaScript.js。現(xiàn)在讓我們將簡(jiǎn)單的應(yīng)用程序部署到本地Web服務(wù)器，請(qǐng)參閱“IntelliJ IDEA如何部署和使用Web服務(wù)器”。在這個(gè)例子中它是Apache：

使用本地Web服務(wù)器（如如我們的示例中的Nginx或Apache），或Web服務(wù)器位于遠(yuǎn)程主機(jī)上時(shí)，您需要?jiǎng)?chuàng)建運(yùn)行/調(diào)試配置以啟動(dòng)JavaScript調(diào)試器。為此，請(qǐng)單擊IntelliJ IDEA窗口右上角的下拉列表，然后選擇“編輯配置”?；蛘撸瑥闹鞑藛沃羞x擇：運(yùn)行|編輯配置：

在打開(kāi)的“運(yùn)行/調(diào)試配置”對(duì)話框中，單擊，并從列表中選擇“JavaScript調(diào)試”：

在以下位置指定運(yùn)行應(yīng)用程序的URL：

在我們的示例中，服務(wù)器上的本地項(xiàng)目結(jié)構(gòu)和文件結(jié)構(gòu)是相同的，因此不需要映射。

現(xiàn)在我們可以開(kāi)始調(diào)試：從IntelliJ IDEA窗口右上角的下拉列表中選擇新的運(yùn)行/調(diào)試配置，然后單擊列表右側(cè)的 ：

配置映射

映射設(shè)置Web服務(wù)器上的文件與其本地副本之間的對(duì)應(yīng)關(guān)系。你需要映射：

• 在遠(yuǎn)程Web服務(wù)器上部署并運(yùn)行應(yīng)用程序時(shí)。
• 除了項(xiàng)目根目錄之外還定義了多個(gè)資源根文件夾。

在大多數(shù)情況下，IntelliJ IDEA通過(guò)重用部署配置中的映射來(lái)自動(dòng)設(shè)置路徑映射。如果您的應(yīng)用程序結(jié)構(gòu)很復(fù)雜，則需要進(jìn)行其他手動(dòng)配置。

配置映射的步驟：

1. 如上述的調(diào)試應(yīng)用程序中所述， 創(chuàng)建JavaScript Debug類型的調(diào)試配置 。
2. 在“本地文件的遠(yuǎn)程URL”區(qū)域中，根據(jù)當(dāng)前使用的部署配置，將文件和文件夾映射到服務(wù)器上文件和文件夾的URL地址 ，請(qǐng)參閱“將本地文件夾映射到服務(wù)器上的文件夾和URL地址以訪問(wèn)它們”。