最新版chrome控制台偵錯js使用

2019-12-19 16:33:21

網站開發偵錯，chrome是程式設計師的福音，尤其是對js的偵錯。

1

開啟測試網址：

f12 開啟開發者工具：

控制台介紹：

Elements：頁面元素，可以進行編輯，儲存後實時檢視頁面效果

Network：檢視js模擬的http請求，例如下圖中修改購物車中商品數量，可以實時的看到請求地址，直接上圖。點選請求地址，會把請求的頭資訊和響應資訊等資料展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點選檢視頭資訊，preview，響應資訊，cookie，timeline對我們有用的。注意，preview是此處模擬http請求的傳送資料，直接預覽出來了。

2

Sources：次功能是js頁面偵錯中最突出的功能，上圖。

功能介紹：左側sources目錄可以展開，檢視載入本頁面所呼叫的資源，如js，css，php。此處先介紹斷點偵錯，可以順序的看到程式的執行過車，勾選右側的Any XHR 按鈕，上圖。一步一步執行，如新增數量的時候，可以看到右側的call stock進程，可以看到此處出發了js中changePrice()函數，在此處我們可以進行邏輯分析了。或則在程式碼行處單擊設定斷點，英文選項是

add breakpoints，單擊右擊都可以，最是好用，上圖，還可以檢視你設定的所有斷點，右側展開，如圖，斷點偵錯用的比較多，當然了還可以在js裡直接寫程式碼，檢視實時資料變化，檢視要注意ctrl+s 儲存操作。