firebase-tools: Can't debug with firebase tools 6.10.0 in vs code due to unverified breakpoints

Version 7.11.0 is now released and introduces breakpoint debugging with the command:

firebase emulators:start --inspect-functions

Then you can attach the debugger to port 9229 (default)

So I’ve looked into this a bit and it seems like it’s going to be tricky. If we changed how the emulator works to solve #1353 it would also make this easier, so this is an argument in favor of changing that system.

A bit of documentation about this would be really helpful on the Firebase site tutorials. Trying to run with $ firebase serve did not run my npm script ‘serve’

Instead I needed to go into my functions folder, and run npm directly with: $ npm run-script serve

My functions/package.json script for serve looks like this now: "serve": "tsc -w | firebase emulators:start --inspect-functions", This allows watching for TypeScript changes, and starting up emulation with debugging. This is super helpful when actively developing code on your local machine! Life is so much better now.

@JerryGoyal 7.10.0 is the current release. This will be included in the next release, so 7.11.0 is the likely version number.

Hi @abeisgoat , sure i can, so:

1. Create a new firebase project with typescript
2. Write a simple index.ts and export your cloud function testFunction and set it in the firebase.json

import * as express from 'express';
import * as functions from 'firebase-functions';

const app = express();

app.head('/', (req, res) => res.sendStatus(204))

app.get('/timestamp', (req, res) => {
  res.send(`${Date.now()}`);
})

export const testFunction = functions.https.onRequest(app);

console.log('started')

1. add this to the launch.json (launch json is the debug settings file for VS code integrated debug tool usually the third icon on the side bar menu)

"version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}"
    }
  ]
}     

1. run tsc (typescript compiler) and the local emulator

tsc
firebase serve --only functions

1. now press F1 it will open the command menu and type: debug: Attach by Process ID usually is the first process. Now your bottom bar from blue should turn orange

2. at this point you will notice that if you put a breakpoint on:

res.send(`${Date.now()}`);

the breakpoint doesn’t turn red but grey and it will say “unverified breakpoint” thus calling timestamp endpoint in the browser it won’t stop on the line.

instead repeat the test with firebase-tools@6.3.0 (or at least prior to 6.9.0) and it will work!

@johngboutros that’s a good feature request and I could see a few ways of achieving it:

a) Disable timeouts entirely in debug mode b) Disable the timeout counter while a breakpoint is active c) Other??

Would you mind filing a new issue to discuss?

This has been implemented and will be included in the next release.

Fantastic, thanks for the thorough and quick response, I’ll take a look at this when I get some time and report back!

Thanks @vincy261. I think @abeisgoat knows more about this. The new emulator (in versions 6.9.0 and above) runs the functions in a separate process which probably needs to expose some more information to be debuggable.