本文目录一览：
有哪些 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一栏会显示的。更多的方法，尝试才知道。
原创文章，作者：简单一点，如若转载，请注明出处：https://www.506064.com/n/129186.html
微信扫一扫 
支付宝扫一扫 