Debugging over a remote port occasionally fails

[avi12]

Is this a feature request or a bug?

A bug report.

What is the current behavior?

1. I run the following command:

   web-ext run --no-config-discovery --start-url https://www.youtube.com/watch?v=dQw4w9WgXcQ --arg="--remote-debugging-port=9229" --source-dir dist --verbose --target chromium

2. Google Chrome Canary opens up.
3. After a moment, web-ext throws an error and exits (Chrome stays open):

   [util/temp-dir.js][debug] Created temporary directory: C:\Users\avi12\AppData\Local\Temp\tmp-web-ext--44972-KUYVp0oywGfD
   [program.js][error]
   Error: connect ECONNREFUSED 127.0.0.1:3570
       at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1148:16)
   
   [program.js][error] Error code: ECONNREFUSED
   
   [program.js][debug] Command executed: run
   ERROR  Command failed with exit code 1
   

What is the expected or desired behavior?

Being able to launch Chrome such that it's listening to debugging, without web-ext crashing.

Version information (for bug reports)

• Google Chrome version: Canary 94.0.4589.2
• Your OS and version: Windows 10 x64 21H1
• Paste the output of these commands:

  node -v; npm -v; pnpm -v; web-ext --version

  v14.17.3
  7.15.0
  6.10.3
  6.2.0
  

  ↑ I added PNPM because that's the package manager I'm using.

Note

web-ext doesn't always crash. It's more like a 50:50.

[Rob--W]

Does the issue happen if you omit --remote-debugging-port?
Why are you setting the flag?

A potential cause for this issue is that the underlying chrome-launcher library generates a new port (and expects a listener at that port), but the --remote-debugging-port flag that you've set conflicts with the one set by the library: https://github.com/GoogleChrome/chrome-launcher/blob/b00fa22f94371f6d38d2d23e6e0b32fc7af470f0/src/chrome-launcher.ts#L252

[avi12]

Does the issue happen if you omit --remote-debugging-port?

If I launch without --remote-debugging-port, it launches as usual.

Why are you setting the flag?

Because I wish to debug using my IDE's debugging tools.
I'm not aware of a default debugging port that Chrome is listening on.

[matanox]

@avi12 Would you have any insights for #2294? I am not sure how to get the extension's service worker console. Do you really get it in your IDE when launching without web-ext? How does onw accomplish that?

[avi12]

I don't know how to debug a service worker, but assume the process is the same as debugging an MV2 extension, you launch Chrome with --remote-debugging-port=NUM, and then you configure your IDE to listen on localhost:PORT, whether it's VSCode or WebStorm (like me)

[Rob--W]

Does the issue happen if you omit --remote-debugging-port?

If I launch without --remote-debugging-port, it launches as usual.

Why are you setting the flag?

Because I wish to debug using my IDE's debugging tools.
I'm not aware of a default debugging port that Chrome is listening on.

chrome-launcher uses the remote debugging protocol to interface with Chrome. I'm not sure if that library is designed to support an unexpected second client connection to the remote debugging server. You could try to see if it works by visiting chrome://version and looking at the --remote-debugging-port flag that's output in the command line arguments, and use that with your IDE.

So instead of specifying the port upfront you'd use the port that chrome-launcher has chosen at random.
Does this result in the desired behavior?

[avi12]

You could try to see if it works by visiting chrome://version and looking at the --remote-debugging-port flag that's output in the command line arguments, and use that with your IDE.

Surprisingly, it does seem to work
I wish the process would be automatic though

[sbahir]

hey @avi12 I am in a similar situation trying to connect VScode debugging tools with Chrome extension

but everytime I re-run the web-ext run command, a new chrome window starts with a different --remote-debugging-port so the connection is lost everytime

Did you run into the same issue? if so, how did you manage to overcome it ?

Thank you for your help!

[avi12]

@sbahir I didn't overcome it
I often debug my extensions not using web-ext but instead by loading them into the browser I use daily, in my case, Edge beta

[ben-xD]

To make it slightly easier, you could try my hackaround:

• install python
• install psutil: python -m pip install psutil
• Whenever the browser is created, run this script which ChatGPT 3.5 made. run python scripts/get_debugging_port.py
• [Optional]: I use webstorm, but for VScode you could consider mutating your debug configuration file to use the new port.

# scripts/get_debugging_port.py
import psutil
import re

def find_chrome_processes():
    processes = []
    for proc in psutil.process_iter(['pid', 'name', 'cmdline']):
        if proc.info['name'] == 'chrome.exe' or proc.info['name'] == 'Google Chrome':
            for cmd_arg in proc.info['cmdline']:
                match = re.search(r'--remote-debugging-port=(\d+)', cmd_arg)
                if match:
                    port = match.group(1)
                    processes.append({'pid': proc.info['pid'], 'port': port})
    return processes

chrome_processes = find_chrome_processes()
if chrome_processes:
    print("Chrome processes with remote debugging ports:")
    for process in chrome_processes:
        print(f"PID: {process['pid']}, Port: {process['port']}")
else:
    print("No Chrome processes with remote debugging ports found.")

Output

Chrome processes with remote debugging ports:
PID: 48384, Port: 55701