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控制台」
7
FireFox和chrome的調試方法是一樣的,只是瀏覽器的調試窗口和按鈕位置有少許區別,請參照chrome瀏覽器的調試方法就可以。下面是FireFox的調試窗口截圖。
2. 谷歌瀏覽器調試js 斷點怎麼使用
在需要調試來的頁面按下自F12(Ctrl+Shift+I,右擊滑鼠選擇檢查(圖1))或者如下圖操作:
4.打開文件後在行號前面單擊添加斷點(如上圖藍色部分),按F5刷新頁面即可調試。