Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Debuggers (Webstorm/VSCode) not attaching to emulators on versions >10.2.0 #4166

Closed
cybex-dev opened this issue Feb 15, 2022 · 6 comments
Closed
Assignees

Comments

@cybex-dev
Copy link

cybex-dev commented Feb 15, 2022

I'm filling this bug report more as an issue rather than a bug. The reason for it being a bug report is I've attempted debugging on multiple OS's on my PC (Windows, Ubuntu) and a Mac, none of which allow the debugger to attach. I thus resolved to start from scratch and work my way up to finding the problem. This isn't working out as even the simplest firebase project can't be debugged. This is after following these steps to remove Node from my Windows install to the letter, but no success.

Environment info

node: v16.13.2
npm: 8.1.2

IDE: Webstorm 2021.1.1
alt IDE: VSCode 1.64.2 (latest atm)

firebase-tools: 10.2.0

Platform: Windows 10 x64

Test case

Source can be found here. This is (at the time of writing) the simplest firebase project that can be created (see steps to reproduce).

There are 4 core files:

/ functions
    / index.js
    / package.json
.firebaserc
.firebase.json

File: package.json

"engines": {
  "node": "16"
},
"dependencies": {
  "firebase-admin": "^9.8.0",
  "firebase-functions": "^3.14.1"
},
"devDependencies": {
  "firebase-functions-test": "^0.2.0"
},

the important firebase.json:

"functions": {
  "source": "functions"
},
"emulators": {
  "functions": {
    "port": 5001
  },
  "ui": {
    "enabled": true
  }
}

Steps to reproduce

  1. Create folder i.e. test-project-emulator

  2. Create new firebase project (assume logged into firebase), specify javascript & functions feature (minimalist example) & install dependencies
    i.e. firebase init

  3. Install functions emulator, leave all as default and install emulator (see console output*)
    i.e. firebase init emulators

  4. Launch functions emulator
    i.e. firebase emulators:start

  5. launch IDE and attempt to attach

IDE Debugging:

  1. WebStorm (use Attach to Node.JS/Chrome with localhost:9229 as described here)
  2. VSCode with launch script:
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Debug",
            "port": 9229
        }
    ]
}

Expected behavior

Allow Webstorm/VSCode to attach to localhost:9229 and start debugging (e.g. Webstorm active debug session image)

Actual behavior

Cannot connect to debugger

Additional Information

  • I can navigate to localhost:4000 and see the functions emulator running: image

  • Listening ports: netstat -ab | grep -e "9229" -e "4000" -e "4400" -e "8080"

  TCP    127.0.0.1:4000         Windows-Desktop:0      LISTENING
  TCP    127.0.0.1:4400         Windows-Desktop:0      LISTENING
  TCP    127.0.0.1:55852        Windows-Desktop:4400   TIME_WAIT
  TCP    127.0.0.1:55875        Windows-Desktop:4000   TIME_WAIT

TCP/9229 isn't listening, however emulator is running.

  • I was receiving this issue Error: TIMEOUT: Port 8080 on localhost was not active within 60000ms while using Node 17.5 (I downgraded to 16.13.2 using nvm-windows for sake of the Firebase 12/14/16 node requirements). This issue seemed to have gone away after removing node, cleared cache and downgraded to 16.*. Further, as suggested the trick to run the emulator directly resolved the hanging problem (not sure if this is related or a symptom)

  • Manually specifying hosts (network adapter IP or source address 0.0.0.0) had no effect on allowing the debugger to connect:
    "functions": {
    "port": 5001,
    "host": "0.0.0.0"
    },

Complete log output of all actions

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Try the new cross-platform PowerShell https://aka.ms/pscore6

PS C:\Users\CybeX> cd .\WebstormProjects\
PS C:\Users\CybeX\WebstormProjects> cd .\test-project-emulator\
PS C:\Users\CybeX\WebstormProjects\test-project-emulator> firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\CybeX\WebstormProjects\test-project-emulator

? Are you ready to proceed? Yes
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Functions: Configure a Cloud Functions directory and its files

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Create a new project
i  If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 my-test-project-abc123
? What would you like to call your project? (defaults to your project ID)
√ Creating Google Cloud Platform project
√ Adding Firebase resources to Google Cloud Platform project

=== Your Firebase project is ready! ===

Project information:
   - Project ID: my-test-project-abc123
   - Project Name: my-test-project-abc123

Firebase console is available at
https://console.firebase.google.com/project/my-test-project-abc123/overview
i  Using project my-test-project-abc123 (my-test-project-abc123)

=== Functions Setup

A functions directory will be created in your project with sample code
pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
+  Wrote functions/package.json
+  Wrote functions/index.js
+  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

added 233 packages, and audited 234 packages in 28s

11 packages are looking for funding
  run `npm fund` for details

2 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!
PS C:\Users\CybeX\WebstormProjects\test-project-emulator> firebase init emulators

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\CybeX\WebstormProjects\test-project-emulator

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory

? Are you ready to proceed? Yes

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project my-test-project-abc123 (my-test-project-abc123)

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. Functions Emulator
? Which port do you want to use for the functions emulator? 5001
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)?
? Would you like to download the emulators now? Yes

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!
PS C:\Users\CybeX\WebstormProjects\test-project-emulator> rmdir /S C:\Users\CybeX\.cache\firebase\emulators
Remove-Item : A positional parameter cannot be found that accepts argument 'C:\Users\CybeX\.cache\firebase\emulators'.
At line:1 char:1
+ rmdir /S C:\Users\CybeX\.cache\firebase\emulators
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidArgument: (:) [Remove-Item], ParameterBindingException
    + FullyQualifiedErrorId : PositionalParameterNotFound,Microsoft.PowerShell.Commands.RemoveItemCommand

PS C:\Users\CybeX\WebstormProjects\test-project-emulator> firebase init emulators

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\CybeX\WebstormProjects\test-project-emulator

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory

? Are you ready to proceed? Yes

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

i  Using project my-test-project-abc123 (my-test-project-abc123)

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. Functions Emulator
? Which port do you want to use for the functions emulator? 5001
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)?
? Would you like to download the emulators now? Yes
i  ui: downloading ui-v1.6.4.zip...

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!
PS C:\Users\CybeX\WebstormProjects\test-project-emulator> firebase emulators:start --inspect-functions --only functions --debug
[2022-02-15T15:20:18.192Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
[2022-02-15T15:20:18.193Z] > authorizing via signed-in user (charles@awesomeapp.io)
i  emulators: Starting emulators: functions {"metadata":{"emulator":{"name":"hub"},"message":"Starting emulators: functions"}}
[2022-02-15T15:20:18.215Z] [hub] writing locator at C:\Users\CybeX\AppData\Local\Temp\hub-my-test-project-abc123.json
!  functions: You are running the functions emulator in debug mode (port=9229). This means that functions will execute in sequence rather than in parallel. {"metadata":{"emulator":{"name":"functions"},"message":"You are running the functions emulator in debug mode (port=9229). This means that functions will execute in sequence rather than in parallel."}}
!  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, firestore, database, hosting, pubsub, storage {"metadata":{"emulator":{"name":"functions"},"message":"The following emulators are not running, calls to these services from the Functions emulator will affect production: \u001b[1mauth, firestore, database, hosting, pubsub, storage\u001b[22m"}}
+  functions: Using node@16 from host. {"metadata":{"emulator":{"name":"functions"},"message":"Using node@16 from host."}}
[2022-02-15T15:20:18.259Z] defaultcredentials: writing to file C:\Users\CybeX\AppData\Roaming\firebase\charles_awesomeapp_io_application_default_credentials.json
[2022-02-15T15:20:18.260Z] Setting GAC to C:\Users\CybeX\AppData\Roaming\firebase\charles_awesomeapp_io_application_default_credentials.json {"metadata":{"emulator":{"name":"functions"},"message":"Setting GAC to C:\\Users\\CybeX\\AppData\\Roaming\\firebase\\charles_awesomeapp_io_application_default_credentials.json"}}
[2022-02-15T15:20:18.263Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/my-test-project-abc123/adminSdkConfig [none]
[2022-02-15T15:20:19.036Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/my-test-project-abc123/adminSdkConfig 200
[2022-02-15T15:20:19.036Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/my-test-project-abc123/adminSdkConfig {"projectId":"my-test-project-abc123","storageBucket":"my-test-project-abc123.appspot.com"}
[2022-02-15T15:20:19.051Z] Ignoring unsupported arg: auto_download {"metadata":{"emulator":{"name":"ui"},"message":"Ignoring unsupported arg: auto_download"}}
[2022-02-15T15:20:19.051Z] Ignoring unsupported arg: port {"metadata":{"emulator":{"name":"ui"},"message":"Ignoring unsupported arg: port"}}
[2022-02-15T15:20:19.052Z] Starting Emulator UI with command {"binary":"node","args":["C:\\Users\\CybeX\\.cache\\firebase\\emulators\\ui-v1.6.4\\server.bundle.js"],"optionalArgs":[],"joinArgs":false} {"metadata":{"emulator":{"name":"ui"},"message":"Starting Emulator UI with command {\"binary\":\"node\",\"args\":[\"C:\\\\Users\\\\CybeX\\\\.cache\\\\firebase\\\\emulators\\\\ui-v1.6.4\\\\server.bundle.js\"],\"optionalArgs\":[],\"joinArgs\":false}"}}
i  ui: Emulator UI logging to ui-debug.log {"metadata":{"emulator":{"name":"ui"},"message":"Emulator UI logging to \u001b[1mui-debug.log\u001b[22m"}}
[2022-02-15T15:20:19.141Z] Web / API server started at localhost:4000
 {"metadata":{"emulator":{"name":"ui"},"message":"Web / API server started at localhost:4000\n"}}
i  functions: Watching "C:\Users\CybeX\WebstormProjects\test-project-emulator\functions" for Cloud Functions... {"metadata":{"emulator":{"name":"functions"},"message":"Watching \"C:\\Users\\CybeX\\WebstormProjects\\test-project-emulator\\functions\" for Cloud Functions..."}}
[2022-02-15T15:20:19.318Z] Validating nodejs source
[2022-02-15T15:20:21.642Z] > [functions] package.json contents: {
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "16"
  },
  "main": "index.js",
  "dependencies": {
    "firebase-admin": "^9.8.0",
    "firebase-functions": "^3.14.1"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}
[2022-02-15T15:20:21.643Z] Building nodejs source
[2022-02-15T15:20:21.647Z] Analyzing nodejs backend spec

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
@cybex-dev cybex-dev added the bug label Feb 15, 2022
@cybex-dev
Copy link
Author

I performed the exact same steps on my Mac (Big Sur 11.4) with the exact same results. Same "blank" project, running emulators with --inspect-functions on 9229 and connecting to localhost but Webstorm (2021.3) debugger could not connect.

firebase-tools: 10.2.0
node: v14.19.0
npm: 6.14.16

@cybex-dev cybex-dev changed the title Unable to attach Webstorm/VSCode debugger to firebase emulator with basic firebase functions project Debuggers (Webstorm/VSCode) not attaching to emulators on versions >10.2.0 Feb 15, 2022
@cybex-dev
Copy link
Author

cybex-dev commented Feb 15, 2022

After some experimenting, the issue has been found that firebase-tools: "^10.2.0" have issues while debugging as described above. Last working is ^10.1.5.

Temporary Solution

Revert to "firebase-tools": "^10.1.5", as ^10.2.0 doesn't allow connecting to debuggers

Don't forget to do a global uninstall:

npm uninstall -g firebase-tools

then install previous version with:

npm i -g firebase-tools@10.1.5

You should be all set!

@isegal
Copy link

isegal commented Feb 15, 2022

Having the same issue. Confirmed that the issue goes away after downgrading from 10.2 to 10.1.5

We also see a message when debugging is working:

>  Debugger listening on ws://localhost:9229/0871405d-e764-4973-8708-a2fcad29eaa6
>  Debugger listening on ws://localhost:9229/0871405d-e764-4973-8708-a2fcad29eaa6
>  For help, see: https://nodejs.org/en/docs/inspector

But in the newer version we do not.

@guyjoseph
Copy link

I have also had the same thing after upgrading to 10.2.0. Couldn't get VS Code Debugger to attach, the VS Code log stated

Could not connect to debug target at http://localhost:9229: Could not find any debuggable target

Did a global uninstall of firebase-tools, the reinstalled 10.1.5.

Thanks for the help with this, took me a while to find the solution, but hopefully a fix will be applied soon.

@Albertbol
Copy link

Exactly the same issue + this ticket #4189 is a related issue. I was trying to understand the problem for 3 days, glad I found that its not my setup :D

taeold added a commit that referenced this issue Mar 2, 2022
…th --inspect-functions flag (#4232)

In #4149, we made large refactor of the Functions Runtime. Namely:

1) We no longer relied on Functions Runtime to parse triggers. Instead, we use [`RuntimeDelegate`](https://github.com/firebase/firebase-tools/blob/2a56d9520241ab9897a59aac22c9fd016251a7cd/src/deploy/functions/runtimes/index.ts#L114), the same procedure used to parse trigger in `firebase deploy` command.

2) Each process running the Functions Runtime was bound to a specific trigger.

Unfortunately, this change broke support for `--inspect-function` where users can attach Node Debugger to step through their function when triggered.

The debugging experience supported w/ `--inspect-function` relies on the fact that a single process executes all function triggers. This is drastically different to how functions run in Production environment, but it is a very useful feature that makes it easy to step through all functions in a single debug session.

I wasn't aware of the debugging capabilities when making the refactor. Unfortunately, the debug feature cuts across a strong assumption I've made for the future of Functions Emulator. This is a rather hasty rollback - I'm going to have to think more deeply about how we want the evolve this feature.

Fixes #4189, #4166
@taeold
Copy link
Contributor

taeold commented Mar 3, 2022

Hi folks. The patch for this issue was released today in firebase-tools v10.2.2. Please give it a spin and let us know if things are working expected.

@taeold taeold closed this as completed Mar 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants