手把手教你VSCode配置JavaScript基于Node.js的调试环境

简介

Visual Studio Code（以下简称“VSCode”）是一款优秀的文本编辑器，因其强大的插件生态系统、良好的性能和简便的操作流程而受到广泛欢迎。本文将向你介绍如何在VSCode下配置JavaScript基于Node.js的调试环境。

环境准备

在开始配置调试环境之前，你需要确保你的电脑上有以下组件：

• VSCode（可以从官网https://code.visualstudio.com/下载）
• Node.js（可以从官网https://nodejs.org/下载）

配置步骤

步骤一：新建项目

打开VSCode，通过菜单栏的文件 > 新建文件夹 或者快捷键Ctrl+Shift+N创建一个新的项目文件夹，并进入该文件夹。

步骤二：初始化项目

在终端（Terminal）中输入以下命令，将当前工作目录初始化为一个Node.js项目：

npm init -y

步骤三：安装调试插件

在VSCode的插件市场中搜索并安装Debugger for Chrome插件。

步骤四：配置启动文件

在VSCode中，按F5键或者使用菜单栏的调试 > 添加配置，然后选择Node.js环境，会在.vscode目录下自动创建launch.json文件。修改该文件如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

步骤五：添加脚本

在项目根目录下新建一个名为index.js的文件，并添加以下内容：

const fn = (a, b) => {
  return a + b;
};
console.log(fn(1, 2));

步骤六：启动调试

在VSCode中，按F5键或者使用菜单栏的调试 > 启动调试，即可启动使用Chrome浏览器作为调试环境，并在控制台输出3。

示例说明

示例一

当我们需要调用第三方库时，为了方便调试，我们可以使用webpack对代码进行打包。具体步骤如下：

1. 在项目中安装webpack和webpack-cli：

sh
npm i webpack webpack-cli --save-dev

1. 在项目根目录下新建一个名为webpack.config.js的文件，并添加以下内容：

```js
const path = require('path');

module.exports = {
mode: 'development',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
```

1. 修改launch.json：

json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"skipFiles": [
"<node_internals>/**"
],
"runtimeArgs": [
"--inspect-brk=9229"
],
"program": "${workspaceFolder}/node_modules/webpack-cli/bin/cli.js",
"args": [
"serve"
]
}
]
}

1. 执行npm run build，即可在dist目录下生成bundle.js文件。

示例二

当我们需要调试网络请求时，可以使用axios模拟网络请求。具体步骤如下：

1. 在项目中安装axios：

sh
npm i axios --save-dev

1. 在index.js中新增以下代码：

```js
const axios = require('axios');

axios.get('https://api.github.com/users/octocat')
.then(response => console.log(response.data))
.catch(error => console.error(error));
```

1. 启动调试后，在控制台中查看网络请求的结果。

结束语

本文中，我们介绍了如何配置VSCode的JavaScript基于Node.js的调试环境，并提供了示例说明。希望本文能够对你有所帮助，让你在开发中更加高效。