怎麼在瀏覽器中偵錯JS程式碼？

2019-12-19 05:02:16

作為web開發者，經常需要使用JavaScript來完成一些頁面效果，但是有時候會發現JS沒有效果，這時候就需要在瀏覽器中偵錯一下JS程式碼。下面就來介紹一下主流瀏覽器的偵錯JS程式碼的方法。

1

Chrome瀏覽器

按F12或是"設定"--》「工具」--》「開發者工具」，即可開啟chrome的偵錯工具。

2

關於這個工具的用法，請參考「怎麼使用chrome偵錯工具」。這裡主要講怎麼使用source這個選項來偵錯JS程式碼。下圖source選項的視窗。

3

下圖中1為source索引標籤，2是在小視窗中選中source選項，3是當前頁面的原始碼，這個需要自己確定，一般會是index或是比較具體的jsp的名稱。雙擊3中的頁面，右邊的視窗中會出現頁面的原始碼，如下圖4. 點選5，會格式化程式碼，是程式碼有合理換行，比較清晰。

4

下面就是具體的偵錯了。

在下圖1中，先通過元素定位找到一個按鈕，檢視原始碼，找到它點選後的JS方法，然後在source視窗查詢，如圖2中的1，定位到該方法，在方法的第一行程式碼的左邊，單擊，視窗上會出現3這樣的箭頭，表示斷點設定在這裡。4是一些控制，包括繼續執行，暫停執行，跳入，跳出等。5顯示的是當前所有的斷點的資訊。

5

在頁面上點選按鈕，頁面會進入下圖所示的狀態，表示進入JS方法中的斷點了。程式碼執行會停在斷點處。1上面的繼續按鈕，可以是JS方法繼續執行，也可以使用3上面的繼續按鈕。程式碼停在2中的程式碼行，這時可以將滑鼠懸停在變數上來檢視變數值，也可以在console中列印輸出。點選3上的執行下一行可以執行下一行，也可以跳入某個方法或是跳出。點選繼續，程式碼會跳到下一個斷點或是完成偵錯。

6

FireFox瀏覽器。

按F12或是「設定」--》"開發者"--》「Web控制台」

7

FireFox和chrome的偵錯方法是一樣的，只是瀏覽器的偵錯視窗和按鈕位置有少許區別，請參照chrome瀏覽器的偵錯方法就可以。下面是FireFox的偵錯視窗截圖。

怎麼在瀏覽器中偵錯JS程式碼？

1

2

3

4

5

6

7

熱門文章