js的調試方法（js調試工具和方法如何使用）

本文目錄一覽：

• 1、有哪些 JS 調試技巧
• 2、JS怎麼進行單步調試
• 3、有哪些 JS 調試技巧？

有哪些 JS 調試技巧

基於 Electron 將 Node.js 和 Chromium 的功能融合在了一起。它的目的在於為調試、分析和開發 Node.js 應用程序提供一個簡單的界面。

devtool 的詳細介紹請參考：在 Chrome 開發者工具中調試 node.js，譯者：sqrthree (根號三)

以下是我的使用體會：

雖然看起來和 Chrome 的 Developer Tools 沒什麼兩樣，但是如果只是一些小的 js 腳本，就不需要去寫一個 html 網頁再引用；

或者需要 node 環境運行的 js 文件，也不需要 WebStorm 這個龐大的 IDE；

相比 node-inspector，devtool 提供的調試功能更多，包括 Elements、Timeline、Profiles、Resources、Audit 這些面板，以及最新的 Chrome 開發者工具裡帶了的功能，比如 Workspace（分分鐘變 IDE）、移動設備模擬、Promise inspector（Experiments），但是這些 node-inspector 都沒有。

直接命令行下啟動，替代 node 命令和在 Terminal 下沒有交互的 console.log()

安裝方法:

npm i -g devtool

安裝過程會從 GitHub 下載 electron-prebuilt，而國內你懂的原因可能會下載失敗，或者如果沒耐心中斷下載，用 devtool 的時候會報錯。解決方法在最下面。

小技巧

另外啟動調試可以用：

devtool path/to/file.js -w –break

這樣可以監聽文件變化自動 restart，以及在文件開頭自動 break 以便打斷點調試

—— Update 2016-03-09——

為 devtool 添加一個別名

alias dt=’devtool -w –break’

—— Update 2016-06-12——

錯誤更新：

Error: ENOENT: no such file or directory, open ‘/usr/local/lib/node_modules/devtool/node_modules/electron-prebuilt/path.txt’

因為 npm 安裝 devtool 會自動從 GitHub 下載，而如果安裝的時候中斷了，安裝程序不會識別到，哪怕重新安裝 devtool。這時候需要安裝 electron-prebuilt：

npm i -g electron-prebuilt

或者用瀏覽器從 GitHub 下載對應版本（安裝 electron-prebuilt 的時候會顯示下載的 Electron 版本）：：用瀏覽器下載一般會快很多

然後在 /usr/local/lib/node_modules/devtool/node_modules/electron-prebuilt/ 下創建 path.txt （Mac系統為例，其他系統要根據報錯的路徑來），內容為：

./dist/Electron.app/Contents/MacOS/Electron

以及 dist 文件夾，把下載下來的解壓，Electron.app 放到 dist 里，就可以了。

—— Update 2016-06-21——

今天又遇到個問題 devtool 完全用不了了，這樣解決了：

先卸載 devtool 和相關的 package：

npm uninstall -g devtool electron-prebuilt electron-packager

再安裝 devtool：

npm i -g devtool

—— Update 2016-07-12——

發現 cnpm ( npm.taobao.org/mirrors，也就是俗稱的淘寶鏡像）已經收錄了 electron 的二進制文件，這樣就可以直接設置下載源即可，不用再去 GitHub 下載了（原理：electron-download/index.js at master · electron-userland/electron-download · GitHub）

方法1，環境變量：

ELECTRON_MIRROR= http：//r.yuzhua.com

方法2，在 ~/.npmrc 里添加一行（如果是用的 cnpm ，要在 ~/.cnpmrc 裡面添加）：

ELECTRON_MIRROR=

然後再 npm i devtool -g，推薦方法2，一次設置以後都不會再出現下載失敗的問題了

JS怎麼進行單步調試

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

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

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

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

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

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

注意事項

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

有哪些 JS 調試技巧？

其實當你經驗足夠的時候，有些錯誤不需要調試就能想明白。當然，新手而言，從調試做起。

主要的技巧取決於你使用的調試工具，這裡以我使用的chrome為例。首先跳出chrome的調試工具，右鍵選擇檢查。。

接着彈出開發者窗口，如圖

這個就是調試頁面了，然後單擊頂頭的source，找到你的js腳本，如圖：

圖片中那個藍色的小框框就是斷點了，設置方法就是單擊那裡。

可以見到，窗口下面紅色鮮紅的值就是錯誤了，單擊後面的錯誤位置就能定位了(語法錯誤能顯示定位，但是邏輯錯誤無法定位。內置api出錯定位會出錯，比如JSON.parse()出錯就定位到html文件去了)

左下角有一個藍色小箭頭，後面是能輸入的，輸入一下試試，

我輸入了cookie，就返回了cookie的值。其他的同理。

另外也可以在js腳本裡面使用console.log()，在console一欄會顯示的。更多的方法，嘗試才知道。