作為web開發者，經常需要使用JavaScript來完成一些頁面效果，但是有時候會發現JS沒有效果，這時候就需要在瀏覽器中調試一下JS代碼。下面就來介紹一下主流瀏覽器的調試JS代碼的方法。
工具/原料
Chrome瀏覽器
FireFox瀏覽器
方法/步驟
Chrome瀏覽器
按F12或是"設置"--》“工具”--》“開發者工具”，即可打開chrome的調試工具。
關於這個工具的用法，請參考“怎麼使用chrome調試工具”。這裡主要講怎麼使用source這個選項來調試JS代碼。下圖source選項的窗口。
0 怎麼使用chrome調試工具
下圖中1為source選項卡，2是在小窗口中選中source選項，3是當前頁面的原代碼，這個需要自己確定，一般會是index或是比較具體的jsp的名稱。雙擊3中的頁面，右邊的窗口中會出現頁面的原代碼，如下圖4. 點擊5，會格式化代碼，是代碼有合理換行，比較清晰。
下面就是具體的調試了。
在下圖1中，先通過元素定位找到一個按鈕，查看原代碼，找到它點擊後的JS方法，然後在source窗口查詢，如圖2中的1，定位到該方法，在方法的第一行代碼的左邊，單擊，窗口上會出現3這樣的箭頭，表示斷點設置在這裡。4是一些控制，包括繼續執行，暫停執行，跳入，跳出等。5顯示的是當前所有的斷點的信息。
在頁面上點擊按鈕，頁面會進入下圖所示的狀態，表示進入JS方法中的斷點了。代碼執行會停在斷點處。1上面的繼續按鈕，可以是JS方法繼續執行，也可以使用3上面的繼續按鈕。代碼停在2中的代碼行，這時可以將鼠標懸停在變量上來查看變量值，也可以在console中打印輸出。點擊3上的執行下一行可以執行下一行，也可以跳入某個方法或是跳出。點擊繼續，代碼會跳到下一個斷點或是完成調試。
FireFox瀏覽器。
按F12或是“設置”--》"開發者"--》“Web控制檯”
FireFox和chrome的調試方法是一樣的，只是瀏覽器的調試窗口和按鈕位置有少許區別，請參照chrome瀏覽器的調試方法就可以。下面是FireFox的調試窗口截圖。
