調試js（vscode調試js）

• 1、如何在網頁中調試JavaScript
• 2、JS怎麼進行單步調試
• 3、谷歌瀏覽器怎麼調試js
• 4、chrome 如何調試js
• 5、如何使用firefox進行網頁js調試

以IE8瀏覽器為例，接下來重點介紹並演示如何使用瀏覽器自帶的開發人員工具調試JS程序。（該工具快捷按鈕為F12）

1、在工具-Internet選項-高級，去掉“禁用腳步調試（Internet Explorer）”項的勾選。

2、去掉“顯示友好http錯誤信息”項的勾選。最後點擊應用，確定按鈕。

3、預覽表單，當要執行的js程序出現錯誤時，瀏覽器會給出提示。

4、在給出的錯誤提示窗口中，選擇“是（Y）”按鈕，進入IE瀏覽器自帶的開發人員工具腳本調試界面。

5、根據JS調試信息可以知道，當前JS報錯是由於沒有找到指定對象“dat”而導致的。我們需要在表單設計器中，修改JS程序並保存。因演示效果的需要，在本例中是沒有設置id值為dat的單行輸入框控件的，本例中第二個單行輸入框控件的id值是data2。修改後的JS代碼。

6、將其改成值data2後，再進行測試不會出現JS報錯信息，程序得以正常執行。

7、本例只是演示了如何利用IE自帶的開發人員工具進行簡單的調試工作，如需了解其他調試及排查技巧，請參閱網絡及相關書籍進行學習。

1、打開firebug,點擊“腳本”選項。

2、點擊“所有”選項，這裡可以選擇要顯示的腳本，建議選擇“顯示所有腳本”。

3、在“所有選項”的旁邊，是當前顯示的JavaScript文件的名字，點擊它，可以看到當前頁面用到的所有JavaScript文件，在列表裡找或者直接在列表的搜索框搜索你要調試的JavaScript文件。

4、在腳本正文行號的左邊點擊，可以在此行設置斷點，程序運行到此行就會暫停。

5、此時紅點上會有個黃色箭頭，代表此行即將被執行。右邊的監控欄可以輸入你想監控的表達式，查看它的值。

6、腳本正文右上角有四個圖標，第一個圖標表示取消此次調試，但如果下次程序執行到此斷點還是會暫停；第二個圖標表示單步進入程序；第三個圖標表示單步跳過程序；第四個圖標表示單步退出。

注意事項

調試完腳本後，記得清除斷點，在紅點位置點擊一下就行了。

是可以調試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的。

使用的工具：谷歌瀏覽器、測試的網站；

可以按照下面的方法進行調試：

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控制台，直接寫代碼，查看結果。高級功能使用時開啟斷點，查看變量的變化過程。還可以條用函數。

1、首先使用Firefox火狐瀏覽器打開需要調試頁面，也可以在開發工具設置火狐瀏覽器來打開：

2、在打開的Firefox瀏覽器中按F12鍵，接着就會打開“開發者工具”了：

3、此時選擇“調試器”選項，然後選擇需要調試的JS文件，接着就可以在需要調試的位置加入斷點進行調試：

4、按F11或者F10單步調試JS，這裡F11和F10的區別是F11調試，單步執行進入調用的其它函數；而F10調試單步執行，是不進入調用的其它函數的。當然也可以單機頁面上相應的按鈕進行調試。以上就是用Firefox調試網頁的過程：