js代碼調試技巧（JS在線調試）

本文目錄一覽：

• 1、如何使用firefox進行網頁js調試
• 2、js 壓縮後的代碼如何調試？
• 3、如何調試html網頁中的js代碼
• 4、dreamweaver里如何調試javascript代碼
• 5、火狐瀏覽器中的javascript怎麼調試

如何使用firefox進行網頁js調試

1、首先使用Firefox火狐瀏覽器打開需要調試頁面，也可以在開發工具設置火狐瀏覽器來打開：

2、在打開的Firefox瀏覽器中按F12鍵，接著就會打開「開發者工具」了：

3、此時選擇「調試器」選項，然後選擇需要調試的JS文件，接著就可以在需要調試的位置加入斷點進行調試：

4、按F11或者F10單步調試JS，這裡F11和F10的區別是F11調試，單步執行進入調用的其它函數；而F10調試單步執行，是不進入調用的其它函數的。當然也可以單機頁面上相應的按鈕進行調試。以上就是用Firefox調試網頁的過程：

js 壓縮後的代碼如何調試？

我想你問的是不是類似UglifyJS之類的混淆過的JS代碼？這種壓縮通常會把變數、函數名之類的改成非常短的名稱，因此這種壓縮過的代碼就難以識別了。

對於這種代碼，推薦的思路是先看瀏覽器中是否有報錯，然後根據錯誤來判斷自己原始代碼里可能出錯的位置；如果沒有報錯，那也是斷定大概的位置，然後Chrome里打開開發者工具里的Sources，打開自己的代碼，用這個地方可以對代碼進行重新排版：

當然，如果是uglify過的代碼還是很難看，只能根據自己實際代碼里的一些常量內容作為關鍵詞在瀏覽器的代碼裡面搜自己可能的位置，然後加斷點推測去調試。

上面的辦法，都是在你對壓縮JS這個過程沒有控制的情況下，如果是你自己壓縮JS代碼，可以在壓縮的時候同時生成sourcemap文件，一般是xxx.js.map文件。如果連同這個文件一起部署，那麼在開發者工具中打開的時候，也可以看到最原始的代碼了。這是最推薦的辦法，調試起來也是最輕鬆的。

如何調試html網頁中的js代碼

以谷歌瀏覽器Chrome為例（火狐類似），說下前端打「斷點」：

一、按F12快捷鍵打開Chrome控制台，點擊「Sources」選項卡，如圖：

二、刷新當前網頁，代碼執行到「斷點」處會停住，如上圖藍色區域；

三、按F8快捷鍵可以在不同的斷點之間切換、按F10快捷鍵程序代碼會一步步執行，這樣就能很方便定位到錯誤區域，排查錯誤。

說明：火狐瀏覽器的操作方法和谷歌類似，當然界面略有不同。

dreamweaver里如何調試javascript代碼

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調試功能。我們先來看IE的：

1、在F12開發人員工具中進行調試

打開IE瀏覽器，按下F12鍵，就會打開開發人員工具，這是IE內置的開發人員開發工具，方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。

如果你打開的時候沒有固定在網頁底部，可以點擊右上角菜單欄中的按鈕來完成。

我們看到在這個工具窗口裡面有幾個標籤頁，分別是：HTML、CSS、控制台、腳本、探查器和網路，點開每一個標籤，可以執行相應的任務。

在HTML標籤窗口中，工具欄中的按鈕所執行的操作如下圖：

CSS標籤是用來查看樣式的；控制台顯示網頁中JS的各種輸出信息，包括錯誤信息、用戶日誌等；打開腳本標籤頁，這裡面才是我們想要的內容。

我在圖中用黃色矩形選中連個控制項，左側的下拉列表用來選擇文件，右側的按鈕用來啟動調試。當點擊啟動調試後，調試程序會將窗口最大化，我們在選中的文件中找到需要調試的位置，點擊左側邊欄添加斷點即可進行調試。

當有程序運行到我們的斷點處時，就可以進行調試了：

在這裡，我們可以使用快捷鍵進行操作，常用的快捷鍵如下：

F9：添加/移除 斷點

F10：逐過程，即跳過該語句中的方法、表達式等

F11：逐語句調試，即單步調試，會跳入方法、表達式，進行逐語句的跟蹤調試

在執行過程中，如果我們要執行即時的代碼，我們就需要在右側的窗格中輸入代碼，按回車即可：

如果要執行多行代碼，點擊運行按鈕右側的雙箭頭，就會打開多行模式。我就不再截圖片了。

這種直接在瀏覽器中調試的方法同樣適用於Google瀏覽器Chrome和FireFox FireDebug，只不過在細枝末葉上面有些不同罷了，主體的功能都是一樣的。

按F12鍵進入開發者工具，可以查看源代碼、樣式和js：

點擊Scripts按鈕，可以打開這個調試窗口，裡面包含了網頁中腳本文件源碼，點擊左側的按鈕可以打開選擇文件的側窗口。

2、使用debugger關鍵字進行調試

這種方法很簡單，我們只需要在進行調試的地方加入debugger關鍵字，然後當瀏覽器運行到這個關鍵字的時候，就會中斷：

設置以後就可以使用debugger關鍵字進行調試了；進過這樣的設置，我們還可以捕獲到意外的錯誤，進行跟蹤調試。

火狐瀏覽器中的javascript怎麼調試

所需工具材料：火狐瀏覽器

方法如下：

1、打開火狐瀏覽器，按F12鍵調取調試工具。

2、選擇「調試器」選項，然後選擇需要調試的JS代碼，接著在合適的位置加入斷點。