2018.5.12更新最近在使用vscode1.23版本时，发现无法使用outDir。建议更改它。直接程序使用编译后的文件，然后打开sourceMaps，同时在babel中编译自己动手时--watch及时生成.map文件，供vscode索引；如果要编译其他语言，其实可以在package.json中添加脚本，通过tasks.json调试前编译。下面显示.vscode两个文件，这个是babel方法，其他类似.launch.json"configurations":[{"type":"node","request":"launch","name":"launcher","program":"${workspaceFolder}/lib/login.js","sourceMaps":true,"preLaunchTask":"build"//等于下面的`label`值}]tasks.json{"version":"2.0.0","command":"npm","tasks":[{"label":"build",//组合为`npmrunbuild`"type":"npm","script":"build"}]}package.json"scripts":{"build":"babelsrc--out-dirlib--source-maps"}，其实这样比较慢，建议加一个watchtobuild，然后直接不用preLaunchTask前言我习惯用浏览器调试代码，偶尔想调试node包里的代码，或者想写个node小插件，但我不知道如何调试。经过查找资料和请教老师，自己实践了这个过程1.vscode概述VisualStudioCode（以下简称vscode）是一个非常强大的编辑器，比较轻量级，因为平时比较喜欢webstorm，webstorm自动保存我喜欢错误提示和错误信息的特性，但是对于调试nodejs，vscode有它的优势。vscode支持windows、OSX和Linux三种环境，并且可以安装扩展插件，可以满足大部分人的需求。要求、安装和配置不是本文要描述的内容。请自行了解。本文重点介绍如何使用vscode更好地调试node代码。希望对大家有所帮助。2.vscode界面左上角是项目目录，搜索，版本管理git相关（左下角是当前分支），调试，其他扩展，其他都是中文标注，不解释，他们都是我们必须的，这几个如果没有提示调出这几个是调试必须的，可以到菜单栏里的view里面一一调出3.调试前提：launch。json配置点击图中左起第四个按钮是调试，然后点击图中红框打开launch.json"configurations":[{"type":"node","request":"launch","name":"启动程序","program":"${workspaceFolder}/src/extract-cli.js","args":["--output","output.pot","${workspaceFolder}/test/product_group.vm"],"outDir":"${workspaceFolder}/dist","sourceMaps":true}]type和request不用改，默认即可。当请求启动时，使用F5直接开始调试。按照官网的解释，请求是附加在已经运行的那个上面的。程序，不过这里可以忽略，我们只是使用vscode自带的调试器进行调试。参数program是指定要运行的js入口文件，其中${workspaceFolder}是当前打开的项目目录，.vscode目录会自动生成在这个目录下，launch.json也在这个目录下。args也比较重要。比如这个例子，我执行的是命令gettext-extract--outputoutput.potinput.vm，那么args的作用其实就是在命令后面传入参数，每个空格要分开，写成argssourceMaps的子元素，对于写es5的代码来说，这个参数没什么用，但是对于写es6，TypeScript等非常有必要，当这个参数的值为true时，编译生成的mapprocess会用来匹配源码和编译后的代码，这样在Breakthesourcecode的时候，我们就可以愉快的debug了。outDir用于标记编译代码的生成目录，帮助vscode查找。下面讨论一下编译前后的对应关系。我在这里使用babel。编译，经过尝试，如果程序参数直接指向编译后的文件，vscode可以奇迹般的自己找到源文件，这是我们调试最简单的方法。如果程序指向你写的文件，那么需要提供一个outDir参数，只要配置到编译生成目录即可。其他：目测不需要sourceMaps，可以编译成.js.map如果调试时遇到问题，请尝试将sourceMaps设置为true，让编译工具生成map文件4.调试代码，点击左侧你正在调试的代码的那一边，只要是红色的，说明这里的断点是可行的。如图，直接按F5开始调试，界面上会出现几个类似chrome的跳步，单步调试等，使用方法和chrome类似，只是快捷键略有不同，然后点击左侧的debug按钮，会看到运行到某一步的变量，以及调用栈，如图5所示。其他顺便介绍一下本文使用的babel和命令行入门相关知识打开package.json，你会发现一个bin配置，这样你在配置npminstall的时候，就会把这两条命令添加到node_modules/.bin中，然后你就可以把它当作命令行“bin”来使用了：{"gettext-compile":"./dist/compile-cli.js","gettext-extract":"./dist/extract-cli.js"}babel可以在执行命令的时候加上--source-mapstrue生成map文件，遇到我上面说的问题会用到这个，估计其他编译工具也会有；另外，我们修改源文件后，想马上重启调试验证，每次都自己执行命令，很麻烦，所以babel本身就支持--watch参数，可以监听文件变化，所以我们可以实现简单的自动化。babel或者其他命令行命令很长，不好记，所以我们可以把它们写在package.json中，下面是写在里面的babel编译，可以执行npmrunprepublish"scripts":{"prepublish":"babel--watch--presetses2015--pluginstransform-object-assign--source-mapstruesrc--out-dirdist/"}参考：官网提示文档【翻译】VisualStudioCode文档第4部分——调试babel使用easygettext源代码解释--helphelp
