在Firefox中調(diào)試JavaScript

在Firefox中調(diào)試JavaScript

使用IntelliJ IDEA，您可以使用Firefox遠(yuǎn)程調(diào)試功能，在Firefox版本36及更高版本中調(diào)試客戶端JavaScript。但是，強(qiáng)烈建議您使用Chrome或Chrome系列的任何其他瀏覽器，原因如下：

• IntelliF IDEA在FireFox的調(diào)試會話期間不支持源映射，這會阻止對壓縮或計(jì)算機(jī)生成的JavaScript的調(diào)試。
• 在Firefox中進(jìn)行調(diào)試時(shí)，您無法動態(tài)預(yù)覽對HTML，CSS或JavaScript代碼的更改 - 此功能稱為實(shí)時(shí)編輯，通過JetBrains Chrome擴(kuò)展程序支持，因此僅在Google Chrome中可用。

您可以調(diào)試在IntelliJ IDEA內(nèi)置Web服務(wù)器或外部服務(wù)器上運(yùn)行的應(yīng)用程序。

在Firefox中啟用遠(yuǎn)程調(diào)試

1. 打開Firefox瀏覽器，然后打開：工具| 開發(fā)者|切換工具。
2. 在打開的“開發(fā)工具”窗格中，單擊工具欄上的“工具箱選項(xiàng)”圖標(biāo) ，然后選中“高級設(shè)置”下的“啟用遠(yuǎn)程調(diào)試”復(fù)選框 。
   
   
3. 選擇：工具|開發(fā)者|開發(fā)人員工具欄。在瀏覽器底部打開的控制臺中，鍵入：listen <port number>。
   
   
   您可以設(shè)置任何端口號，但建議您使用6000或更高版本。稍后您將在運(yùn)行配置中指定此端口號。

調(diào)試應(yīng)用程序

1. 根據(jù)需要在JavaScript代碼中設(shè)置斷點(diǎn)。
2. 創(chuàng)建Firefox Remote類型的調(diào)試配置： 
   從主菜單中選擇：運(yùn)行|編輯配置，單擊工具欄上的 ，然后從彈出列表中選擇Firefox Remote。
3. 在打開的“運(yùn)行/調(diào)試配置：Firefox遠(yuǎn)程”對話框中，在Host字段鍵入localhost。在Port字段中，鍵入在Firefox中啟用遠(yuǎn)程調(diào)試時(shí)指定的端口，默認(rèn)值為6000。
4. 在Firefox中打開您的應(yīng)用程序。瀏覽器在代碼執(zhí)行后顯示應(yīng)用程序，也就是說，您設(shè)置的斷點(diǎn)尚未生效。
5. 在工具欄上的“選擇運(yùn)行/調(diào)試配置”下拉列表中選擇新創(chuàng)建的配置， 然后單擊“ 調(diào)試”  。
6. 在打開的對話框中，單擊“確定”以允許來自瀏覽器的傳入連接。
7. 在瀏覽器中刷新應(yīng)用程序頁面：該頁面顯示直到一個(gè)斷點(diǎn)的代碼執(zhí)行結(jié)果。
8. 在“調(diào)試”工具窗口中，繼續(xù)執(zhí)行操作：逐步執(zhí)行程序，停止并恢復(fù)程序執(zhí)行，暫停時(shí)檢查它，查看實(shí)際的HTML DOM等。

示例

假設(shè)您有一個(gè)簡單的應(yīng)用程序，由兩個(gè)文件組成： index.html和index.js文件，其中index.html引用index.js。此示例顯示了如何在IntelliJ IDEA內(nèi)置服務(wù)器上運(yùn)行應(yīng)用程序時(shí)調(diào)試應(yīng)用程序。

開始調(diào)試

1. 在index.js中設(shè)置斷點(diǎn) 。
2. 創(chuàng)建FireFox遠(yuǎn)程調(diào)試配置，在Host和Port中輸入localhost和6000：
   
   
3. 在編輯器中打開index.html，在上下文菜單中選擇“在瀏覽器中打開”，然后從列表中選擇：Firefox：
   
   
   瀏覽器打開，顯示IntelliJ IDEA端口上運(yùn)行的應(yīng)用程序（當(dāng)前63345）：
   
   
4. 從工具欄上的下拉列表中 選擇index_firefox_remote配置，然后單擊“調(diào)試” ：
   
   
   在打開的“傳入連接”對話框中單擊“確定”：
   
    
   在瀏覽器中刷新應(yīng)用程序頁面。