本文目錄一覽：
chrome 如何調試js
是可以調試js的。
使用的工具：谷歌瀏覽器、測試的網站；
可以按照下面的方法進行調試：
1、f12 打開開發者工具，控制台介紹：
Elements：頁面元素，可以進行編輯，保存後實時查看頁面效果；
Network： 查看js模擬的http請求，例如下圖中修改購物車中商品數量，可以實時的看到請求地址，直接上圖。
2、點擊請求地址，會把請求的頭信息和響應信息等數據展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點擊查看頭信息，preview，響應信息，cookie，timeline對我們有用的。注意，preview是此處模擬http請求的發送數據，直接預覽出來了。
3、Sources：次功能是js頁面調試中最突出的功能，上圖。
功能介紹：左側sources目錄可以展開，查看載入本頁面所調用的資源，如js，css，php。此處先介紹斷點調試，可以順序的看到程序的執行過車，勾選右側的Any XHR 按鈕，上圖。
4、一步一步執行，如添加數量的時候，可以看到右側的call stock進程，可以看到此處出發了js中changePrice()函數，在此處我們可以進行邏輯分析了。或則在代碼行處單擊設置斷點，英文選項是add breakpoints，單擊右擊都可以，最是好用，上圖。
5、可以查看你設置的所有斷點，右側展開，如圖，斷點調試用的比較多，當然了還可以在js里直接寫代碼，查看實時數據變化，查看要注意ctrl+s 保存操作。
6、Timeline：次功能是查看頁面性能，頁面渲染速度的，一般是用不到的。測試人員可以查看，圖中展示一些性能參數供參考，上圖。
Profile：次功能主要測試載入文件速度參考，可以在此處上傳我們的文件供測試用。點擊 Load上傳即可，一般用不著。
備註：Console：此功能是模擬js控制台，直接寫代碼，查看結果。高級功能使用時開啟斷點，查看變數的變化過程。還可以條用函數。
有哪些 JS 調試技巧？
其實當你經驗足夠的時候，有些錯誤不需要調試就能想明白。當然，新手而言，從調試做起。
主要的技巧取決於你使用的調試工具，這裡以我使用的chrome為例。首先跳出chrome的調試工具，右鍵選擇檢查。。
接著彈出開發者窗口，如圖
這個就是調試頁面了，然後單擊頂頭的source，找到你的js腳本，如圖：
圖片中那個藍色的小框框就是斷點了，設置方法就是單擊那裡。
可以見到，窗口下面紅色鮮紅的值就是錯誤了，單擊後面的錯誤位置就能定位了(語法錯誤能顯示定位，但是邏輯錯誤無法定位。內置api出錯定位會出錯，比如JSON.parse()出錯就定位到html文件去了)
左下角有一個藍色小箭頭，後面是能輸入的，輸入一下試試，
我輸入了cookie，就返回了cookie的值。其他的同理。
另外也可以在js腳本裡面使用console.log()，在console一欄會顯示的。更多的方法，嘗試才知道。
有哪些 JS 調試技巧
JS 調試，關鍵就是加斷點來調試了。沒什麼技巧可說。
看下這個，用firefox瀏覽器調試js:
如何使用firefox進行網頁js調試
1、首先使用Firefox火狐瀏覽器打開需要調試頁面，也可以在開發工具設置火狐瀏覽器來打開：
2、在打開的Firefox瀏覽器中按F12鍵，接著就會打開「開發者工具」了：
3、此時選擇「調試器」選項，然後選擇需要調試的JS文件，接著就可以在需要調試的位置加入斷點進行調試：
4、按F11或者F10單步調試JS，這裡F11和F10的區別是F11調試，單步執行進入調用的其它函數；而F10調試單步執行，是不進入調用的其它函數的。當然也可以單機頁面上相應的按鈕進行調試。以上就是用Firefox調試網頁的過程：
如何進行html調試和js腳本調試
工具/原料
chrome瀏覽器 Mozilla firefox 電腦
方法/步驟
1、以chrome為例，首先打開需要調試的頁面，按F12快捷鍵打開調試工具。
2、選擇指定的dom節點進行查看和編輯。
3、js斷點調試：chrome非常強大，在chrome調試工具欄中，你可以進行js斷點調試以及格式化查看（一些大型的門戶網站都會將js壓縮成無任何格式的代碼這在研究時特別費勁）：我先寫一段簡單的js代碼：function debug(){for (var i=0;i10;i++){alert(i);}調試截圖如下：
4、js ajax調試，ajax技術如今越來越頻繁使用，所以，ajax調試也必不可少：在chrome調試工具中，可以查看到當前頁面所以的請求，包括ajax請求，以下是頁面打開後所有發起的請求。
原創文章，作者：T4PB8，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/130639.html
微信掃一掃 
支付寶掃一掃 