使用 VSCode 调试无服务器离线功能 - 源映射问题？答案

【问题标题】：Debugging servlerless offline function with VSCode - source map issue?使用 VSCode 调试无服务器离线功能 - 源映射问题？
【发布时间】：2020-10-12 23:12:38
【问题描述】：

我使用无服务器为 AWS Lambda 创建了一个简单的邮件函数。对于开发，我使用 serverless-offline 来复制 Lambda 的功能并使用 VSCode 作为我的 IDE。我也在使用 serverless-webpack 来生成我的结果代码。

当我在 VSCode 中的代码中设置断点时，它们被挖空并被标记为“未绑定”并且不会触发，但是当我插入 debugger; 语句时，执行会正常停止。（作为旁注，执行以debugger; 停止并将我放在我的源文件中 - 不是我的结果文件 - 不确定这是为什么 - webpack 魔术？我在这里没有设置源映射，这可能是这里问题的一部分，但真的不确定）

我的 VSCode 启动我的 serverless-offline 调试实例的 launch.json 配置是：

    {
        "name": "serverless",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}/serverless",
        "runtimeExecutable": "/home/me/.nvm/versions/node/v14.7.0/bin/npm",
        "runtimeArgs": [
            "run",
            "debug"
        ],
        "port": 9229
    }

触发的npm脚本是：

"debug": "export SLS_DEBUG=* && node --lazy ./node_modules/.bin/serverless offline -s dev"

serverless-webpack 使用的配置（纯粹是为了让我可以注入一些环境变量）是：

const slsw = require('serverless-webpack');
const Dotenv = require('dotenv-webpack');
const path = require('path');

const stage = slsw.lib.options.stage == 'prod' ? 'production' : 'development'

module.exports = {
    mode: stage,
    entry: slsw.lib.entries,
    target: 'node',
    plugins: [
        new Dotenv({
            path: path.resolve(__dirname, '../.env.'.concat(stage)),
            safe: false,
            allowEmptyValues: false,
            silent: false
        })
    ]
}

任何帮助表示赞赏！只是想知道如何使用常规断点进行正常调试，而不必依赖插入debugger; 来检查正在运行的代码。

【问题讨论】：

标签： webpack visual-studio-code aws-lambda serverless-offline serverless-webpack-plugin

【解决方案1】：

我的团队使用serverless-bundle 遇到了与此类似的问题，它基本上只是serverless-webpack 之上的一个抽象层。对我们的案例有帮助的是在我们的调试配置对象中添加如下内容：

"sourceMapPathOverrides": {
  "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
  "webpack://?:*/*": "${workspaceFolder}/.webpack/*"
}

请注意，来自${workspaceFolder} 的路径可能因您的项目结构而异。这不完全是我们的，因为我们在路径中使用输入变量，但是以 webpack: 开头的键是重要的部分，应该可以帮助您获得所需的内容

【讨论】：