通常在專案中我們對js指令碼進行除錯有以下2種方式：
- alert除錯法
首先是最原始也是最簡單的使用alert，在頁面中需要輸出需要的變數的地方加上alert函式，將變數彈出顯示：
alert方式雖然簡單，但是除錯繁瑣，假如需要監視的變數過多的話，會彈出大量的彈出框，使用者體驗相當不好。目前alert除錯方式我們不推薦使用
。
- 瀏覽器除錯工具法
其次是使用瀏覽器的除錯工具，Chrome，IE以及FireFox都自帶瀏覽器除錯工具，特別是FireFox還有除錯外掛FireBug，下面以Chrome瀏覽器
的除錯工具為例對js進行除錯。
開啟Chrome瀏覽器，在瀏覽器中輸入：http://localhost:8080/standardlesson/com.bstek.dorado.sample.standardlesson.junior.system
.SystemInfo.d
在頁面載入完成後，使用【F12】快捷鍵開啟Chrome除錯工具，
切換到【Sources】頁，在130行用【滑鼠左鍵】打上斷點，然後點選頁面中的【獲取系統資訊】按鈕後，頁面執行到斷點處暫停
我們可以選擇使用快捷鍵【F8】繼續js程式碼執行或者跳到下一個斷點處，也可以使用快捷鍵【F10】逐過程，即跳過該語句中的方法、表示式等，
快捷鍵【F11】逐語句除錯，即單步除錯，會跳入方法、表示式，進行逐語句的跟蹤除錯。除了快捷鍵我們也可以使用上圖中的按鈕。
點選【F10】，執行下一句js程式碼，滑鼠雙擊選中info並懸停片刻，可以看到info中包含的變數
我們可以看到res中包含3個變數，如果需要新增監視，點選滑鼠右鍵在彈出選單中選擇【Add to Watch】，新增監視
在右側的【Watch Expressions】監視區中可以監控res中的變數：
此除錯方法功能強大且方便快捷，但是需要對View檢視輸出到頁面的原始碼比較熟悉，畢竟找到具體的js並打上斷點還是需要花費一番功夫。
滑鼠定位到變數上去，然後右鍵選擇“Add to Watch”
- （強烈推薦）Debugger關鍵字除錯法
接下來給大家介紹一種除錯方法，方便快捷，不需要在View輸出的頁面中尋找需要除錯的js，這個也是我們強烈推薦大家的除錯方式。
我們在需要除錯的js中加入debugger關鍵字
開啟Chrome頁面載入頁面並使用【F12】快捷鍵開啟除錯工具後，點選頁面中的【獲取系統資訊】按鈕，我們發現斷點自動停止在debugger關
鍵字處：
接下來除錯跟方法二一致，我們發現此方法的好處在於不用在頁面上打斷點，且更加方便快捷。