如下所有操作均以谷歌瀏覽器為準:
例如:
當開啟首頁時:
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變數可以在控制檯上檢視變數的值,並進行一系列的操作