Debugging Serverless Applications with Visual Studio Code

Debugging doesn’t have to be a headache, especially when you’re tinkering with serverless applications. Imagine having a toolkit that not only simplifies the process but also adds a dash of excitement to your debugging adventures. That’s where Visual Studio Code swoops in to save the day!

In this guide, we’ll walk through the steps to configure your project for debugging, call the endpoint for debugging, and set breakpoints to inspect your code.

Prerequisites:

• Node.js installed on your machine.
• Serverless Framework installed globally (npm install -g serverless)
• Visual Studio Code installed on your machine.

Step 1: Power Up Your package.json

First, let’s modify your project’s package.json file to add some special debugging scripts.

• Open your project’s package.json file.
• Add the following scripts section if it doesn’t exist:

"scripts": {
    "start": "./node_modules/.bin/serverless offline -s dev",
    "debug": "SET SLS_DEBUG=* && node --inspect ./node_modules/serverless/bin/serverless offline -s dev"
},

For the Unix/Mac adventurers, replace "debug" script with:

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

Let’s decode these scripts:

• start: This script is your regular soldier, launching the serverless application locally in development mode.
• debug: This is your secret weapon, enabling debug mode with all the intel you need (verbose logging). Here’s what the cryptic parts mean:
  • SET SLS_DEBUG=* (Windows) or export SLS_DEBUG=* (Unix/Mac): Unleashes a torrent of detailed messages from the Serverless Framework and its plugins.
  • node --inspect: Puts Node.js in debug mode, ready for your inspection.
  • ./node_modules/serverless/bin/serverless offline -s dev: Executes the Serverless Framework’s offline plugin to simulate a serverless environment locally, with the dev stage selected.

Step 2: Configuring VS Code Debug Environment

In VS Code, head over to the Debug menu on the left sidebar. Select the “Create a launch.json file” option. This creates the battle plan for your debugging mission.

Paste the following configuration into your launch.json file:

{
    "version": "0.2.0",
    "configurations": [
       {
            "name": "Debug sls offline",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "debug"
           ],
        }
    ]
}

Understanding the Battle Plan:

• "name": The name of your debugging configuration – keep it descriptive (e.g., “Debug Lambda Function”).
• "type": The type of debugger you’re using. In this case, it’s set to “node”.
• "request": The type of debug request, which is “launch” here (starting the application).
• "cwd": The current working directory where your project resides.
• "runtimeExecutable": The program that kicks off the debugging process – here, it’s “npm”.
• "runtimeArgs": Arguments passed to the runtimeExecutable. This runs the debug script defined in your package.json file.

Step 3: Launch the Debugging (Attack)

Now, unleash the debugging power! Here are two ways to launch the serverless application in debug mode:

• Terminal Warfare: In your terminal, type npm run debug and press Enter.
• VS Code Onslaught: Press F5 on your keyboard, or go to Debug > Debug sls offline.

Step 4: Set Traps for Bugs (Breakpoints)

With your application running in debug mode,

• Open the Lambda function file you want to inspect.
• Click on the line number where you suspect a bug might be lurking.
• A red dot will appear, marking your trap – a breakpoint.

Step 4: The Debugging Showdown

Once you’ve called the endpoint you want to debug and a breakpoint is hit, the debugger will pause the execution of your code. Now, you have various tools at your disposal to interrogate your code and identify the culprit:

• Step-by-Step Infiltration: Use the debugger buttons to navigate your code line by line. You can play, step over (skip current line), or step into (enter functions) to meticulously examine how your code unfolds.
• Variable Interrogation: The debugger’s variable pane acts like your truth serum. Inspect the values of variables at different points in your code to pinpoint where things might be going astray. Have you accidentally assigned the wrong value? Is a variable unexpectedly empty? The variables will reveal all!
• Break on Errors: Want to target specific errors? Configure your debugger to pause only when certain errors occur. This allows you to focus on the most critical issues.

By combining these techniques, you can become a debugging detective, piecing together the puzzle of why your code is misbehaving. Fix the errors you uncover, and your serverless application will be back in top form!

Bonus Tip: Leverage Logging

While debugging is a powerful tool, sometimes adding well-placed console logs can provide valuable insights without the full debugging environment. Scatter console.log statements throughout your code to print variable values or messages at key points. This can help you narrow down where issues might be arising.

Remember, debugging is an iterative process. Don’t get discouraged if you don’t find the bug right away. Keep at it, and with the help of VS Code and the tips in this guide, you’ll conquer those serverless bugs in no time!