资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/利用vscode调试nodejs代码实践总结

利用vscode调试nodejs代码实践总结

chenatu / 2500人阅读

摘要：支持，和三种环境，并且可以安装扩展插件，因而可以满足绝大多数人的要求，安装配置非本文所要讲述的内容，请自行查找，本文着重讨论如何用更好的调试代码，希望能对大家有所帮助。

2018.5.12更新

最近在用vscode 1.23版本的时候发现outDir不可以使用了，建议这么改吧，直接program采用编译后的文件，然后打开sourceMaps，同时在babel编译的时候自己搞--watch及时生成.map文件便于vscode索引;如果你要编译其他语言，其实可以在package.json当中添加scripts，通过tasks.json来在debug之前进行编译，下面展示出.vscode下的两个文件，此为babel方法，其他类似

.launch.json

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${workspaceFolder}/lib/login.js",
      "sourceMaps": true,
      "preLaunchTask": "build" // 等于下面`label`值
    }
  ]

tasks.json

{
  "version": "2.0.0",
  "command": "npm",
  "tasks": [
    {
      "label": "build",
      // 合起来就是`npm run build`
      "type": "npm",
      "script": "build"
    }
  ]
}

package.json

"scripts": {
    "build": "babel src --out-dir lib --source-maps"
  },

实际上这样较慢，建议多带带在build加watch，然后直接不用preLaunchTask

前言

之前一直习惯了用浏览器来调试代码，偶尔想调试一下node包中的代码，或者自己想写一个小的node插件无从下手，不知道该怎么调试，经过查找资料和向导师请教实践了一下这个过程

1. vscode概述

Visual Studio Code(以下简称vscode)是一个很强大的编辑器，相对而言比较轻量，因为我通常喜欢webstorm，webstorm自动保存和错误提示的特性深受我喜爱，但是对于调试nodejs来说，vscode则更具有它的优势所在。vscode支持windows，OS X和Linux三种环境，并且可以安装扩展插件，因而可以满足绝大多数人的要求，安装配置非本文所要讲述的内容，请自行查找，本文着重讨论如何用vscode更好的调试node代码，希望能对大家有所帮助。

2. vscode界面


左上角依次是项目目录，搜索，版本管理git相关(左下角为当前分支)，调试，其他扩展插件 ，其他的均为中文标注，不解释，都是咱们必要的，这几个如果没有的建议调出来这都是调试很必要的几个东西，可以去到菜单栏的查看中逐一调出

3. 调试前置条件：launch.json配置

点击图中左数第四个按钮，也就是调试，然后点击图中红框即可打开launch.json

    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/extract-cli.js",
            "args": ["--output", "output.pot", "${workspaceFolder}/test/product_group.vm"],
            "outDir": "${workspaceFolder}/dist",
            "sourceMaps": true
        }
    ]

type和request不用改，默认就可以，request为launch时用F5直接可以启动调试，request为attach按照官网解释是关联到已经运行的一个程序，但是此处可以不管，我们就用vscode自带的调试器进行调试就好。

program这个参数是指定要运行的js入口文件，其中${workspaceFolder}为当前打开的项目目录，.vscode目录会自动生成在此目录下，launch.json也在此目录下

args也是个比较重要的，比如该例，我执行命令gettext-extract --output output.pot input.vm 那么args的作用其实就是传入命令后面的参数，每个空格之间要分开，写成args的某个子元素

sourceMaps对于编写es5代码来说这个参数没有什么卵用，但是对于写es6,TypeScript等就十分有必要了，这个参数的值为true时会利用编译过程生成的map来进行源码和编译后的代码进行对应，这样在源码打断点，就可以愉快的进行我们的调试了

outDir是用来标注编译后代码的生成目录的，帮助vscode进行查找

下面讨论下关于编译前后的对应关系这件事

我这边是用的babel来进行编译的，经过尝试，program参数如果直接指向编译后的文件，vscode奇迹般的可以自己去寻找到源码文件，这对于我们的调试是最简单的方式了

如果program指向你编写的文件，那么需要提供一个outDir参数,只要配置到编译生成目录就好了。

其他：目测不需要sourceMaps还有编译成成.js.map如果你调试遇到了问题请尝试将sourceMaps设置为true并让编译工具生成map文件

4. 调试代码

只要在你调试的代码左边点击一下，只要是红色的，说明此处断点可行，如图所示

直接按F5即可开始调试，会在界面上出现类似于chrome的那几个单步跳过，单步调试等等，使用方法类似chrome,只是快捷键稍有不同

然后点击左侧上面介绍的调试按钮，会看到运行到某一步的变量，还有调用堆栈情况，如图所示

5. 其他

捎带介绍一下本文使用的babel和命令行入口相关的知识

打开package.json，会发现有一个bin的配置,这么配置再npm install的时候就会将这两个命令加入到node_modules/.bin当中，然后就可以用做命令行了

  "bin": {
    "gettext-compile": "./dist/compile-cli.js",
    "gettext-extract": "./dist/extract-cli.js"
  }

babel执行命令时可以加--source-maps true来生成map文件，如果遇到我上面说到问题的才会用到这个，估计其他的编译工具也会有；另外，我们修改源文件之后，想立即重启调试来进行验证，每次都自己执行命令很麻烦，那么babel自身支持--watch参数，可以监控文件变化，这样我们就可以实现简单的自动化

babel或者其他的命令行命令写的很长，不容易记住，那么我们就可以将其写在package.json当中,如下就是讲babel编译写在其中，可以执行npm run prepublish即可

  "scripts": {
    "prepublish": "babel  --watch --presets es2015 --plugins transform-object-assign --source-maps true src --out-dir dist/"
  }

参考资料：

官网提示文档

[译]Visual Studio Code文档其4—调试

采用easygettext源码来进行讲解的

babel --help的帮助

GPU云服务器 云服务器 nodejs模块调试 java代码性能总结 jni代码调试 js代码 调试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89887.html

相关文章

  • ELSE 技术周刊(2017.10.23期)

    摘要：为目前使用范围最广的网络保护协议。身处攻击目标周边的恶意人士能够利用密钥重装攻击，利用此类安全漏洞。本文和大家一起探讨下如何在三年内快速成长为一名技术专家。 业界动态 Vue 2.5 released Vue 2.5 正式发布，作者对于该版本的优化总结：更好的TypeScript 集成，更好的错误处理，更好的单文件功能组件支持以及更好的与环境无关的SSR WiFi爆惊天漏洞！KRACK...

    galaxy_robot 评论0 收藏0

  • 精读《如何在 nodejs 使用环境变量》

    摘要：引言本期精读的文章是如何在使用环境变量。介绍了开发与生产环境如何管理环境变量。本地通过调试环境变量既方便又安全。更多讨论讨论地址是精读如何在使用环境变量如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1 引言 本期精读的文章是：如何在 nodejs 使用环境变量。 介绍了开发与生产环境如何管理环境变量。 这里环境变量指的是数据库密码等重要数据，而不是指普通变量传参。 ...

    aaron 评论0 收藏0

  • 使用typescript开发调试nodejs

    摘要：原文地址这两天在看也在入门中网上大部分教程都是前端配置开发调试这个也有很多相当成熟的实践教程这篇文章主要是的配置说起来也是相当简单的不涉及任何的语法与概念同时也可以根据本文配置的开发环境主要是模块部分的使用说起大家应该都挺熟悉了是一个 原文地址 https://github.com/xiadd/blog/issues/8 这两天在看ts,也在入门中, 网上大部分教程都是前端配置ts开发...

    张春雷 评论0 收藏0

  • vscode调试node.js c++扩展

    摘要：类似的，如果我们想要调试扩展，我们也需要扩展源文件的调试符号信息。配置安装插件这里我们将用来调试扩展。配置输入配置一个任务，该任务会执行，生成带调试信息的扩展文件。 Debugging NodeJS C++ addons using VS Code 之前笔者写了一篇 用NAN写一个nodejs的c++扩展, 实际开发过程中，肯定是有单步调试的需求。这里简单介绍用如何用vscode调试...

    王伟廷 评论0 收藏0

发表评论

登陆后可评论

0条评论

chenatu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<