使用 Typescritp 和 Serverless Offline 时禁用 VSCode 断点(灰显)

问题描述 投票:0回答:1

我正在使用无服务器框架开发一些 Lambda 函数。无服务框架已在全球安装。

我正在使用 Typescript 和 serverless-webpack。

我也在使用 serverless-offline 进行本地测试。

一切工作正常,除非我尝试在 VSCode 中进行调试。问题是,一旦我从 VSCode 的调试工具启动 serverless-offline,所有断点都会变灰。

这是我的配置文件

package.json

{
  "name": "backend-serverless",
  "version": "1.0.0",
  "description": "serverless backend",
  "main": "handler.js",
  "scripts": {
    "test": "mocha -r ts-node/register transform/src/**/*.spec.ts src/**/**/*.spec.ts",
    "tsc": "tsc",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/aws-lambda": "0.0.34",
    "@types/chai": "^4.1.2",
    "@types/mocha": "^5.0.0",
    "@types/node": "^9.6.0",
    "chai": "^4.1.2",
    "mocha": "^5.0.5",
    "serverless-offline": "^3.18.0",
    "serverless-webpack": "^5.1.1",
    "ts-loader": "^4.1.0",
    "ts-node": "^5.0.1",
    "typescript": "^2.7.2",
    "webpack": "^4.3.0"
  }
}

webpack.config.ts

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

module.exports = {
  devtool: 'source-map',
  entry: slsw.lib.entries,
  resolve: {
    extensions: [
      '.js',
      '.json',
      '.ts',
      '.tsx'
    ]
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        use: [
          {
            loader: 'ts-loader'
          }
        ],
      }
    ]
  }
};

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "args": ["${relativeFile}"],
            "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug - Offline",
            "program": "/usr/local/bin/serverless",
            "args": [
              "offline",
              "start",
              "--lazy"
            ],
            "env": {
              "NODE_ENV": "development"
            },
            "outFiles": [
                "${cwd}/.webpack/**/*"
            ],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

tsconfig.json

{
    "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts", "*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2016",
    "dom"
  ]
}

顺便说一句,如果我尝试使用

Current TS File
启动配置调试用 Typescript 编写的任何正常函数,我的所有断点都可以完美运行。如果我使用
Debug - Offline
启动配置,那么所有断点都会变灰。

typescript webpack visual-studio-code serverless-framework serverless-framework-offline
1个回答
0
投票

我相信这是 VSCode 中的一个(最近引入的)错误。

证据

我已经使用

serverless-webpack
serverless-offline
与 Typescript lambda 函数几个月了。直到最近,使用与您非常相似的设置进行调试从来都不是问题。

您所描述的症状很容易通过创建的新项目来重现

serverless create --template aws-nodejs-typescript

(加上两个插件),使用最新的 VSCode (1.21.1)。

解决方法

我没有使用 React Native,但本期中描述的解决方法对我有用。调试器启动后,所有断点均灰显,添加新断点或删除并重新添加现有断点。任一操作似乎都会“唤醒”调试器,并且其他断点都绑定。

最近推出?

我将 VSCode 回滚到 1.18.1,问题就消失了。然后我逐步完成了一系列升级,并验证 1.19.3 和 1.20.1 似乎也可以正常工作。

版本 1.21.1 似乎是唯一存在此错误的版本。因此,如果该解决方法对您不起作用,或者您不想使用它,则回滚到 VSCode 1.20.1(或更早版本)可能会解决您的问题。

注释

我用于此设置的

launch.json

 配置非常小,通常如下所示:

{ "type": "node", "request": "launch", "name": "Debug API Gateway", "program": "${workspaceFolder}/node_modules/serverless/bin/serverless", "args": [ "offline", "start" ] }

这个配置一直对我有用;我从来不需要指定像

outFiles

sourceMaps
 这样的东西来使用打字稿、
serverless-offline
serverless-webpack
 进行调试。

© www.soinside.com 2019 - 2024. All rights reserved.