1 在你的 js中需要調(diào)試的地方寫上 debugeer
2 瀏覽器訪問的時候 F12開啟開發(fā)者模式，進入要調(diào)試的功能的模塊，然后你就發(fā)現(xiàn)新大陸了

首先請打開“谷歌瀏覽器”（廢話），然后打開一個網(wǎng)頁，按“F12”會出現(xiàn)一個控制臺，找到一個叫做“Sources”,點擊它

OK，如果你的頁面現(xiàn)在已經(jīng)加載過JS腳本的話，那么應(yīng)該可以看到一些JS文件了

然后你可以在左側(cè)側(cè)欄的序號那些位置點擊一下就設(shè)置成斷點，當(dāng)你要執(zhí)行某個函數(shù)的時候瀏覽器就會自動進入調(diào)試模式了

是可以調(diào)試js的。

使用的工具：谷歌瀏覽器、測試的網(wǎng)站；

可以按照下面的方法進行調(diào)試：

1、f12 打開開發(fā)者工具，控制臺介紹：

Elements：頁面元素，可以進行編輯，保存后實時查看頁面效果；

Network： 查看js模擬的http請求，例如下圖中修改購物車中商品數(shù)量，可以實時的看到請求地址，直接上圖。

2、點擊請求地址，會把請求的頭信息和響應(yīng)信息等數(shù)據(jù)展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點擊查看頭信息，preview，響應(yīng)信息，cookie，timeline對我們有用的。注意，preview是此處模擬http請求的發(fā)送數(shù)據(jù)，直接預(yù)覽出來了。

3、Sources：次功能是js頁面調(diào)試中最突出的功能，上圖。

功能介紹：左側(cè)sources目錄可以展開，查看加載本頁面所調(diào)用的資源，如js，css，php。此處先介紹斷點調(diào)試，可以順序的看到程序的執(zhí)行過車，勾選右側(cè)的Any XHR 按鈕，上圖。

4、一步一步執(zhí)行，如添加數(shù)量的時候，可以看到右側(cè)的call stock進程，可以看到此處出發(fā)了js中changePrice()函數(shù)，在此處我們可以進行邏輯分析了?；騽t在代碼行處單擊設(shè)置斷點，英文選項是add breakpoints，單擊右擊都可以，最是好用，上圖。

5、可以查看你設(shè)置的所有斷點，右側(cè)展開，如圖，斷點調(diào)試用的比較多，當(dāng)然了還可以在js里直接寫代碼，查看實時數(shù)據(jù)變化，查看要注意ctrl+s 保存操作。

6、Timeline：次功能是查看頁面性能，頁面渲染速度的，一般是用不到的。測試人員可以查看，圖中展示一些性能參數(shù)供參考，上圖。

Profile：次功能主要測試加載文件速度參考，可以在此處上傳我們的文件供測試用。點擊 Load上傳即可，一般用不著。

備注：Console：此功能是模擬js控制臺，直接寫代碼，查看結(jié)果。高級功能使用時開啟斷點，查看變量的變化過程。還可以條用函數(shù)。