How to debug a Middleware

Sometimes the code we write doesn't play nice and it can be hard to figure out why.

Debugging a Middleware can be especially tricky, follow this guide to learn how to debug a Middleware using VS code.

Prerequisites

First, clone the target repository using glue clone.

Make sure the tenant has the widget and middleware packages installed by checking the package.json file.

TIP

@marfeel/middlewares-types must be installed as a dev dependency.

Add the @marfeel/middlewares-test-utils as a dev dependency by running npm i --save-dev @marfeel/middlewares-test-utils.

WARNING

Due to a temporary issue with renovate, some package.json files might be outdated.

The following commands must be present in the package.json file to successfully debug, add them if they are missing.

"scripts":{
  ...,
  "middleware": "marfeel middleware",
  "create:fixtures": "marfeel create:fixtures"
}

Also, make sure the version of @marfeel/cli (opens new window) is the latest.

Once all packages are configured, run npm i followed by npm run build(don't forget the react option if needed!) to compile the tenant.

Finally, the Middleware implementation must have a test file and its fixtures.

Guide

Once the prerequisites are met, it's time to set up the debugger.

Create a Launch Configuration using VS Code.

TIP

Launch Configuration (opens new window) can be configured to debug any JS code using VS code.

Open the settings.json file in VS Code and add the following code in the configurations array located in the launch object.

TIP

launch.json (opens new window) is a Visual Studio Code configuration file for debugging.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Middleware Tests",
      "request": "launch",
      "runtimeArgs": [
        "run-script",
        "test",
        "${workspaceFolderBasename}"
      ],
      "runtimeExecutable": "npm",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "pwa-node"
    }
  ]
}

In the same Run tab, click the Middleware Tests button.

Now you can add breakpoints to your Middleware code and run the debugger. 🐛