有哪些 JS 調試技巧——devtool，以及安裝問題的解決

轉自本人知乎回答

做者：mdluo
連接：https://www.zhihu.com/question/20260762/answer/89388634
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

貌似有些人不能理解這個和 Chrome 的開發者工具備什麼區別：

這個工具不依賴 Chrome，佔用資源更少，可是 Chrome 開發者工具的功能全都有，就是目前最高票回答的那樣。另外 devtool 能夠直接在命令行下啓動，和 node 命令相似，不須要開個 HTTP 服務器或者把 js 文件嵌入到 html 中（來使用 Chrome 開發者工具）。

試試 16 年年初出的 node.js 調試神器 devtool：

基於 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 版本）：https://github.com/electron/electron/releases

PS：用瀏覽器下載通常會快不少。

而後在 /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=https://npm.taobao.org/mirrors/electron/ npm i devtool -g

方法2，在 ~/.npmrc 裏添加一行（若是是用的 cnpm ，要在 ~/.cnpmrc 裏面添加）：

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

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