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

gaomysion 發布于2019-08-19 18:47 / 779人閱讀

摘要：試試年年初出的調試神器基于將和的功能融合在了一起。直接命令行下啟動，替代命令和在下沒有交互的。解決方法在最下面。小技巧另外啟動調試可以用這樣可以監聽文件變化自動，以及在文件開頭自動以便打斷點調試。

轉自本人知乎回答

作者：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，一次設置以后都不會再出現下載失敗的問題了

GPU云服務器云服務器 ecs常見的問題都有哪些 cdn加速能解決哪些問題云服務器ecs解決了哪些問題安全問題有哪些

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80007.html

你不知道的Chrome DevTools（4）：推薦幾款DevTools插件

摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發調試有幫助。這有點類似前面說過的插件。類似的針對不同框架的調試工具還有最后介紹的不是的插件，而是主題?？偨Y好的，這次的插件就推薦了這幾個。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的...

svtter 2019-08-21 12:17 評論0 收藏0
小技巧|移動端網頁調試神器Eruda使用技巧

摘要：做移動端開發的一大痛點就是，在真機運行下無法查看日志和其他信息如網絡請求顯示本地存儲等信息。是一個專為手機網頁前端設計的調試面板，類似的迷你版，其主要功能包括捕獲日志檢查元素狀態顯示性能指標捕獲請求顯示本地存儲和信息瀏覽器特性檢測等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移動端Web開發的一大痛點就...

xzavier 2019-08-21 17:19 評論0 收藏0
你不知道的Chrome DevTools（2）：那些debug的技巧

摘要：我打算把一些上使用的高級技巧寫成你不知道的這一系列的博文，希望大家一起學習學習。然而，這還不是最嚴重的，因為的語法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有。總結前端在調試代碼的時候，知道開發工具上的小技巧，可以提高查找問題的效率。 Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔...

warnerwu 2019-08-19 14:38 評論0 收藏0
大多數項目中會用到的webpack小技巧

摘要：只在中有效你的文件在開發者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調試日志你可以使用來關閉它參考鏈接總結以上就是總結的條關于的建議，這幾乎是所有項目都用得到的配置技巧吧原文地址本文是作者對自己所學的webpack技巧的總結，在沒有指定特殊情況下適用于webpack 3.0版本。進度匯報使用webpack --progress --colors這樣可以讓編譯的輸出...

Nekron 2019-08-02 15:58 評論0 收藏0
大多數項目中會用到的webpack小技巧

摘要：只在中有效你的文件在開發者工具中顯示為。參考鏈接清除日志如果你在使用時看過下面的調試日志你可以使用來關閉它參考鏈接總結以上就是總結的條關于的建議，這幾乎是所有項目都用得到的配置技巧吧原文地址本文是作者對自己所學的webpack技巧的總結，在沒有指定特殊情況下適用于webpack 3.0版本。進度匯報使用webpack --progress --colors這樣可以讓編譯的輸出...

番茄西紅柿 2019-08-29 13:55 評論0 收藏0