如下所有操作均以谷歌瀏覽器為準:
例如:
當打開首頁時:
http://localhost:8080/index.html
如果該頁面包含了框架(iframe)
1.打開瀏覽器,按F12(部分電腦需要一起按下Fn)
2.如果修改了js代碼,並且需要調試的js所在頁面在框架內部,則按下鼠標右鍵:
選擇重新加載框架即可讓瀏覽器頁面加載最新的js(不需要清除緩存);
選擇查看框架源代碼得到類似如下的URL:
view-source:http://localhost:8080/getPage.do?page=1&rows=10
則刪除view-source:
回車訪問剩下的URL: http://localhost:8080/getPage.do?page=1&rows=10
即可進入框架(iframe)內部顯示的內容的自身所在頁面.
在此頁面按下F12喚起瀏覽器控制臺,即可直接找到需要調試的js文件
3.調試步驟:
在瀏覽器控制臺喚起的狀態下,鼠標右鍵點擊網址欄的刷新按鈕,選擇第三個選項:清空緩存並硬性重新加載,即可清空該頁面緩存(該操作清空的只是該頁面緩存,所以已經登錄的用戶不會被清除,不需要重新登錄)
此時會初始化頁面使用到的所有的js
切換到瀏覽器console,找到"三個點"圖標,點擊,選擇search,console上回顯示一個輸入框(search)
將需要調試的js方法名輸入到該搜索框,回車,將會定位到頁面和js中的該方法
在js函數的該方法上打斷點,然後觸發相應的事件,執行對應的js函數即可
4.在進入斷點時,已經走過的代碼的js變量可以在控制臺上查看變量的值,並進行一系列的操作

瀏覽器調試方法