資訊專欄INFORMATION COLUMN
摘要：試試年年初出的調(diào)試神器基于將和的功能融合在了一起。直接命令行下啟動(dòng)，替代命令和在下沒有交互的。解決方法在最下面。小技巧另外啟動(dòng)調(diào)試可以用這樣可以監(jiān)聽文件變化自動(dòng)，以及在文件開頭自動(dòng)以便打斷點(diǎn)調(diào)試。
轉(zhuǎn)自本人知乎回答
作者：mdluo
鏈接：https://www.zhihu.com/question/20260762/answer/89388634
來源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
貌似有些人不能理解這個(gè)和 Chrome 的開發(fā)者工具有什么區(qū)別：
這個(gè)工具不依賴 Chrome，占用資源更少，但是 Chrome 開發(fā)者工具的功能全都有，就是目前最高票回答的那樣。另外 devtool 可以直接在命令行下啟動(dòng)，和 node 命令類似，不需要開個(gè) HTTP 服務(wù)器或者把 js 文件嵌入到 html 中（來使用 Chrome 開發(fā)者工具）。
試試 16 年年初出的 node.js 調(diào)試神器 devtool：
基于 Electron 將 Node.js 和 Chromium 的功能融合在了一起。它的目的在于為調(diào)試、分析和開發(fā) Node.js 應(yīng)用程序提供一個(gè)簡(jiǎn)單的界面。
devtool 的詳細(xì)介紹請(qǐng)參考：在 Chrome 開發(fā)者工具中調(diào)試 node.js，譯者：sqrthree (根號(hào)三)
以下是我的使用體會(huì)：
雖然看起來和 Chrome 的 Developer Tools 沒什么兩樣，但是如果只是一些小的 js 腳本，就不需要去寫一個(gè) html 網(wǎng)頁再引用；
或者需要 node 環(huán)境運(yùn)行的 js 文件，也不需要 WebStorm 這個(gè)龐大的 IDE；
相比 node-inspector，devtool 提供的調(diào)試功能更多，包括 Elements、Timeline、Profiles、Resources、Audit 這些面板，以及最新的 Chrome 開發(fā)者工具里帶了的功能，比如 Workspace（分分鐘變 IDE）、移動(dòng)設(shè)備模擬、Promise inspector（Experiments），但是這些 node-inspector 都沒有。
直接命令行下啟動(dòng)，替代 node 命令和在 Terminal 下沒有交互的 console.log()。
安裝方法：
npm i -g devtool
安裝過程會(huì)從 GitHub 下載 electron-prebuilt，而國(guó)內(nèi)你懂的原因可能會(huì)下載失敗，或者如果沒耐心中斷下載，用 devtool 的時(shí)候會(huì)報(bào)錯(cuò)。解決方法在最下面。
小技巧
另外啟動(dòng)調(diào)試可以用：
devtool path/to/file.js -w --break
這樣可以監(jiān)聽文件變化自動(dòng) restart，以及在文件開頭自動(dòng) break 以便打斷點(diǎn)調(diào)試。
—— Update 2016-03-09——
為 devtool 添加一個(gè)別名
alias dt="devtool -w --break"
—— Update 2016-06-12——
錯(cuò)誤更新：
Error: ENOENT: no such file or directory, open "/usr/local/lib/node_modules/devtool/node_modules/electron-prebuilt/path.txt"
因?yàn)?npm 安裝 devtool 會(huì)自動(dòng)從 GitHub 下載，而如果安裝的時(shí)候中斷了，安裝程序不會(huì)識(shí)別到，哪怕重新安裝 devtool。這時(shí)候需要安裝 electron-prebuilt：
npm i -g electron-prebuilt
或者用瀏覽器從 GitHub 下載對(duì)應(yīng)版本（安裝 electron-prebuilt 的時(shí)候會(huì)顯示下載的 Electron 版本）：https://github.com/electron/electron/releases
PS：用瀏覽器下載一般會(huì)快很多。
然后在 /usr/local/lib/node_modules/devtool/node_modules/electron-prebuilt/ 下創(chuàng)建 path.txt （Mac系統(tǒng)為例，其他系統(tǒng)要根據(jù)報(bào)錯(cuò)的路徑來），內(nèi)容為：
./dist/Electron.app/Contents/MacOS/Electron
以及 dist 文件夾，把下載下來的解壓，Electron.app 放到 dist 里，就可以了。
—— Update 2016-06-21——
今天又遇到個(gè)問題 devtool 完全用不了了，這樣解決了：
先卸載 devtool 和相關(guān)的 package：
npm uninstall -g devtool electron-prebuilt electron-packager
再安裝 devtool：
npm i -g devtool
—— Update 2016-07-12——
發(fā)現(xiàn) cnpm（npm.taobao.org/mirrors，也就是俗稱的淘寶鏡像）已經(jīng)收錄了 electron 的二進(jìn)制文件，這樣就可以直接設(shè)置下載源即可，不用再去 GitHub 下載了（原理：electron-download/index.js at master · electron-userland/electron-download · GitHub）
方法1，環(huán)境變量：
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，一次設(shè)置以后都不會(huì)再出現(xiàn)下載失敗的問題了
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80007.html
摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對(duì)大家的開發(fā)調(diào)試有幫助。這有點(diǎn)類似前面說過的插件。類似的針對(duì)不同框架的調(diào)試工具還有最后介紹的不是的插件，而是主題?？偨Y(jié)好的，這次的插件就推薦了這幾個(gè)。 Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12改一下頁面元素的...
摘要：做移動(dòng)端開發(fā)的一大痛點(diǎn)就是，在真機(jī)運(yùn)行下無法查看日志和其他信息如網(wǎng)絡(luò)請(qǐng)求顯示本地存儲(chǔ)等信息。是一個(gè)專為手機(jī)網(wǎng)頁前端設(shè)計(jì)的調(diào)試面板，類似的迷你版，其主要功能包括捕獲日志檢查元素狀態(tài)顯示性能指標(biāo)捕獲請(qǐng)求顯示本地存儲(chǔ)和信息瀏覽器特性檢測(cè)等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移動(dòng)端Web開發(fā)的一大痛點(diǎn)就...
摘要：我打算把一些上使用的高級(jí)技巧寫成你不知道的這一系列的博文，希望大家一起學(xué)習(xí)學(xué)習(xí)。然而，這還不是最嚴(yán)重的，因?yàn)榈恼Z法比較寬松和隨意，所以同一功能多種寫法，各種奇葩都有?？偨Y(jié)前端在調(diào)試代碼的時(shí)候，知道開發(fā)工具上的小技巧，可以提高查找問題的效率。 Web前端開發(fā)過程中必然會(huì)用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔...
摘要：只在中有效你的文件在開發(fā)者工具中顯示為。參考鏈接清除日志如果你在使用時(shí)看過下面的調(diào)試日志你可以使用來關(guān)閉它參考鏈接總結(jié)以上就是總結(jié)的條關(guān)于的建議，這幾乎是所有項(xiàng)目都用得到的配置技巧吧 原文地址 本文是作者對(duì)自己所學(xué)的webpack技巧的總結(jié)，在沒有指定特殊情況下適用于webpack 3.0版本。 進(jìn)度匯報(bào) 使用webpack --progress --colors這樣可以讓編譯的輸出...
摘要：只在中有效你的文件在開發(fā)者工具中顯示為。參考鏈接清除日志如果你在使用時(shí)看過下面的調(diào)試日志你可以使用來關(guān)閉它參考鏈接總結(jié)以上就是總結(jié)的條關(guān)于的建議，這幾乎是所有項(xiàng)目都用得到的配置技巧吧 原文地址 本文是作者對(duì)自己所學(xué)的webpack技巧的總結(jié)，在沒有指定特殊情況下適用于webpack 3.0版本。 進(jìn)度匯報(bào) 使用webpack --progress --colors這樣可以讓編譯的輸出...
閱讀 689·2021-09-30 09:47
閱讀 2880·2021-09-04 16:40
閱讀 869·2019-08-30 13:18
閱讀 3461·2019-08-29 16:22
閱讀 1566·2019-08-29 12:36
閱讀 597·2019-08-29 11:11
閱讀 1486·2019-08-26 13:47
閱讀 1138·2019-08-26 13:32
