How to debug Serverless framework using typescript with VSCode

Debugging a Serverless Framework application written in TypeScript with Visual Studio Code (VSCode) involves setting up the necessary configurations for the debugger to attach to your Lambda functions. Here's a step-by-step guide on how to do this:

1. Install Required Dependencies:

Ensure you have the required dependencies installed in your project:

• serverless: Install the Serverless Framework globally using npm or yarn.
• serverless-webpack: This plugin helps with bundling TypeScript code.
• ts-node: Allows you to run TypeScript code directly.
• tsconfig-paths: Resolves TypeScript paths in your Lambda functions.

2. Configure TypeScript and Webpack:

Create a tsconfig.json file at the root of your project and configure TypeScript settings.

jsonCopy code
// tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

Create a webpack.config.js file to configure Webpack.

javascriptCopy code
// webpack.config.js
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
    plugins: [],
  },
};

3. Install VSCode Extensions:

Install the following VSCode extensions to enhance your TypeScript debugging experience:

• "Debugger for Chrome" by Microsoft: To debug Node.js applications using Chrome DevTools protocol.
• "ESLint" by Dirk Baeumer: If you use ESLint for linting your TypeScript code.

4. Configure Launch Configuration:

In your VSCode project, navigate to the ".vscode" folder (create one if it doesn't exist), and create a "launch.json" file.

jsonCopy code
// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Serverless",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "protocol": "inspector",
      "restart": true,
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/var/task"
    }
  ]
}

5. Start Serverless Offline:

Before starting the debugging session, ensure you have the Serverless Offline plugin installed to emulate the AWS Lambda environment locally.

bashCopy code
serverless plugin install --name serverless-offline

6. Start Debugging:

• Start the Serverless Offline plugin by running:

bashCopy code
serverless offline

• Place breakpoints in your TypeScript code in VSCode.

• Click on the "Run and Debug" icon in VSCode, and select "Attach to Serverless" from the drop-down.

• Click the green "Start Debugging" button, and VSCode will attach to the running Serverless Offline process.

Now, you can debug your Serverless application with TypeScript using breakpoints, inspect variables, and step through your code in the VSCode debugger.

Remember to ensure that your TypeScript code is properly built using Webpack before running the Serverless Framework to debug successfully.