Debug Vercel Serverless Functions Locally

This note is about how I managed to debug Vercel Serverless Functions locally.

VLog

If you prefer to watch the video instead of reading article,

its available at https://youtu.be/giEL-ZLE6C4

Length: 05:22 mins

debug.js

As the vercel functions are exporting a function which takes (req, res),

I imported this function in another file and called it by passing fake/empty (req, res).

For this, created a file src/debug.js with following content:

const api = require("../api/hello"); console.log("Debug started"); api({}, {}); console.log("Debug ended"); 

Debug config

Then added a file .vscode/launch.json, with following content:

{ "version": "0.2.0", "configurations": [ { "type": "pwa-node", "request": "launch", "name": "Launch Program", "skipFiles": ["<node_internals>/**"], "program": "${workspaceFolder}\\src\\debug.js" } ] } 

With the above file, I have now got a debug configuration in VS Code's Run and Debug (CTRL+SHIFT+D) side window.

Now I can click(play button) and start the debugging.

Do not forget to add the breakpoint(s) in your Vercel Function script file.

Fake more

At this point, I was able to debug and fix my code, but the API function didn't run till end as I was using res.json() method to return the response, which clearly was missing in our fake res object passed initially.

Debugging output:

So to make it work, I passed fake json() method as part of res object, which just prints to the console.

Now the debug.js file looks like this

const api = require("../api/hello"); console.log("Debug started"); api({}, { json: (response) => console.log("RESPONSE", response) }); console.log("Debug ended"); 

Debugging now prints as below:

That's it about this note.

HIH

~ @raevilman 🐦