摘要：试试年年初出的调试神器基于将和的功能融合在了一起。直接命令行下启动，替代命令和在下没有交互的。解决方法在最下面。小技巧另外启动调试可以用这样可以监听文件变化自动，以及在文件开头自动以便打断点调试。
转自本人知乎回答
作者：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，一次设置以后都不会再出现下载失败的问题了
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80007.html
摘要：下面推荐几款插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。这有点类似前面说过的插件。类似的针对不同框架的调试工具还有最后介绍的不是的插件，而是主题。总结好的，这次的插件就推荐了这几个。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的...
摘要：做移动端开发的一大痛点就是，在真机运行下无法查看日志和其他信息如网络请求显示本地存储等信息。是一个专为手机网页前端设计的调试面板，类似的迷你版，其主要功能包括捕获日志检查元素状态显示性能指标捕获请求显示本地存储和信息浏览器特性检测等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移动端Web开发的一大痛点就...
摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。然而，这还不是最严重的，因为的语法比较宽松和随意，所以同一功能多种写法，各种奇葩都有。总结前端在调试代码的时候，知道开发工具上的小技巧，可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔...
摘要：只在中有效你的文件在开发者工具中显示为。参考链接清除日志如果你在使用时看过下面的调试日志你可以使用来关闭它参考链接总结以上就是总结的条关于的建议，这几乎是所有项目都用得到的配置技巧吧 原文地址 本文是作者对自己所学的webpack技巧的总结，在没有指定特殊情况下适用于webpack 3.0版本。 进度汇报 使用webpack --progress --colors这样可以让编译的输出...
摘要：只在中有效你的文件在开发者工具中显示为。参考链接清除日志如果你在使用时看过下面的调试日志你可以使用来关闭它参考链接总结以上就是总结的条关于的建议，这几乎是所有项目都用得到的配置技巧吧 原文地址 本文是作者对自己所学的webpack技巧的总结，在没有指定特殊情况下适用于webpack 3.0版本。 进度汇报 使用webpack --progress --colors这样可以让编译的输出...
阅读 462·2021-09-30 09:47
阅读 2736·2021-09-04 16:40
阅读 685·2019-08-30 13:18
阅读 3353·2019-08-29 16:22
阅读 1421·2019-08-29 12:36
阅读 493·2019-08-29 11:11
阅读 1330·2019-08-26 13:47
阅读 894·2019-08-26 13:32
