javascript除錯和調試的簡單介紹

本文目錄一覽：

• 1、如何在網頁中調試JavaScript
• 2、火狐瀏覽器中的javascript怎麼調試
• 3、怎麼在ie里打開javascript調試
• 4、ie8 javascript調試
• 5、如何調試JS?
• 6、JS怎麼進行單步調試

如何在網頁中調試JavaScript

以IE8瀏覽器為例，接下來重點介紹並演示如何使用瀏覽器自帶的開發人員工具調試JS程序。（該工具快捷按鈕為F12）

1、在工具-Internet選項-高級，去掉“禁用腳步調試（Internet Explorer）”項的勾選。

2、去掉“顯示友好http錯誤信息”項的勾選。最後點擊應用，確定按鈕。

3、預覽表單，當要執行的js程序出現錯誤時，瀏覽器會給出提示。

4、在給出的錯誤提示窗口中，選擇“是（Y）”按鈕，進入IE瀏覽器自帶的開發人員工具腳本調試界面。

5、根據JS調試信息可以知道，當前JS報錯是由於沒有找到指定對象“dat”而導致的。我們需要在表單設計器中，修改JS程序並保存。因演示效果的需要，在本例中是沒有設置id值為dat的單行輸入框控件的，本例中第二個單行輸入框控件的id值是data2。修改後的JS代碼。

6、將其改成值data2後，再進行測試不會出現JS報錯信息，程序得以正常執行。

7、本例只是演示了如何利用IE自帶的開發人員工具進行簡單的調試工作，如需了解其他調試及排查技巧，請參閱網絡及相關書籍進行學習。

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

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

方法如下：

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

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

怎麼在ie里打開javascript調試

1、在記事本里輸入一段程序，這裡為了簡單，就在瀏覽器上顯不一個文本框和一個按鈕，做一個加法運算

2、打開瀏覽器輸入文件地址，出現如下所示的界面。

3、按F12鍵，出現javascript的調試窗口。在需要調試的地方前面有數字行的地方左擊命中斷點。

4、再點擊“啟動調試”，回到瀏覽器再點擊按鈕“確定”,就會進入斷點，等待。

5、執行跟蹤斷點，這裡會記錄下每一步變量的值。

6、當斷點完成後就會回到ie窗口，這裡文本的值就會變化。

ie8 javascript調試

如果用的是谷歌核心的瀏覽器,比如chrome,360瀏覽器,世界之窗CHROME版,按一下F12,瀏覽器底部將會顯示這個窗口

打開IE,也是按F12,請按一下紅框的減號,如果不是,跳過這一步

選擇”控制台”

在此處輸入JS代碼回車即可運行

由於IE不支持直接在控制台trace輸出,我們輸入document.write(“大家好”)來執行查看結果

谷歌瀏覽器調試遠比IE強大,建議大家盡量使用谷歌瀏覽器好一點,多行代碼可以先在記事本寫好再複製進去執行

請選擇console,這裡是控制台輸出窗口,在這裡可以直接寫JS代碼,然後回車,代碼會馬上執行

現在說說用IE來測試JS代碼,IE8版本以下的瀏覽器,不能即時執行代碼,對學習效果不是很好,所以建議升級到至少IE8

如何調試JS?

目前，常用的瀏覽器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關鍵字進行調試了；進過這樣的設置，我們還可以捕獲到意外的錯誤，進行跟蹤調試。

JS怎麼進行單步調試

1、打開firebug,點擊“腳本”選項。

2、點擊“所有”選項，這裡可以選擇要顯示的腳本，建議選擇“顯示所有腳本”。

3、在“所有選項”的旁邊，是當前顯示的JavaScript文件的名字，點擊它，可以看到當前頁面用到的所有JavaScript文件，在列表裡找或者直接在列表的搜索框搜索你要調試的JavaScript文件。

4、在腳本正文行號的左邊點擊，可以在此行設置斷點，程序運行到此行就會暫停。

5、此時紅點上會有個黃色箭頭，代表此行即將被執行。右邊的監控欄可以輸入你想監控的表達式，查看它的值。

6、腳本正文右上角有四個圖標，第一個圖標表示取消此次調試，但如果下次程序執行到此斷點還是會暫停；第二個圖標表示單步進入程序；第三個圖標表示單步跳過程序；第四個圖標表示單步退出。

注意事項

調試完腳本後，記得清除斷點，在紅點位置點擊一下就行了。