如何优雅的对后端接口进行远程调试

最新推荐文章于 2025-09-11 05:53:19 发布

原创最新推荐文章于 2025-09-11 05:53:19 发布 · 294 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

如何优雅的对后端接口进行远程调试

1 本地搭建好环境

想调试，想必需要进入到编辑器中，然后再打断点查看，我们以vscode为例，安装必要的插件nodemon

yarn add nodemon

2 配置启动文件

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\index.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express App",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon",
      "restart": true,
      "console": "integratedTerminal"
    }
  ]
}

因为我们的 nodemon 非全局安装，所以指定目录
${workspaceFolder} 顾名思义，当前工作文件夹，
index.js 是我们的入口文件，如下：

const express = require('express');
const app = express();
const PORT = 60000;

// 中间件，用于解析 JSON 格式的请求体
app.use(express.json());

// 示例的数据，通常这里可以连接数据库或其他数据源
let todos = [
    { id: 1, text: 'Learn Node.js', done: false },
    { id: 2, text: 'Build a REST API', done: false }
];

// GET 请求，获取所有 todos
app.get('/api/todos', (req, res) => {
    res.json(todos);
});

// POST 请求，创建一个新的 todo
app.post('/api/todos', (req, res) => {
    const { text } = req.body;
    const newTodo = {
        id: todos.length + 1,
        text,
        done: false
    };
    todos.push(newTodo);
    res.status(201).json(newTodo);
});

// PUT 请求，更新一个 todo 的状态
app.put('/api/todos/:id', (req, res) => {
    const id = parseInt(req.params.id);
    const updatedTodo = todos.find(todo => todo.id === id);
    if (!updatedTodo) {
        return res.status(404).json({ message: 'Todo not found' });
    }
    updatedTodo.done = !updatedTodo.done;
    res.json(updatedTodo);
});

// DELETE 请求，删除一个 todo
app.delete('/api/todos/:id', (req, res) => {
    const id = parseInt(req.params.id);
    todos = todos.filter(todo => todo.id !== id);
    res.status(204).end();
});

// 启动服务
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

3 配置nginx，让指定的接口请求往想要服务地址请求，进而进入我们的程序

其他

如果是webpack 呢，该如何配置

{
            "type": "node",
            "request": "launch",
            "name": "Launch Webpack",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "debug-webpack"],
            "port": 9229,
            "program": "${workspaceFolder}/src/index.js",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }