VSCode debugger can not connect to puppeteer instance run by Karma - google-chrome

Question

I have Angular frontend tests run with Karma and Jasmine that I want to debug with Visual Studio Code. The tests are run in a puppeteer instance.
When the debugger tries to connect, it times out, and tells me the socket hung up.
When I visit http://localhost:9333/ where my puppeteer instance is listening I get an ERR_EMPTY_RESPONSE.
Connecting the debugger to a headless Chrome instance started with chrome --headless --remote-debugging-port=9333 works fine.
My karma.conf.js:
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-spec-reporter'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
mime: {
'text/x-typescript': ['ts', 'tsx'],
},
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
},
angularCli: {
environment: 'dev',
},
reporters:
config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
debug: true,
flags: ['--no-sandbox', '--remote-debugging-port=9333'],
},
},
browserNoActivityTimeout: 120000,
singleRun: false,
});
};
The relevant part of my launch.json:
{
"type": "chrome",
"request": "attach",
"name": "Debug Frontend Tests",
"address": "localhost",
"port": 9333,
"sourceMaps": true,
"webRoot": "${workspaceFolder}/client/web",
}

Answer 1

TL,DR: Add the flag '--remote-debugging-address=0.0.0.0' to your customLaunchers' flags array.
It turns out that adding the '--remote-debugging-port=9333' flag opens the port only for clients on the local machine. Since puppeteer runs in a Docker container, it views VSCode as a remote client and denies connection.
Running lsof -i -P -n | grep LISTEN inside the container reveals that Chrome opens the port 9333 only for local clients:
root#b6ff203497dc:~# lsof -i -P -n | grep LISTEN
node 247 root 21u IPv4 224919 0t0 TCP *:9876 (LISTEN)
chrome 260 root 137u IPv4 229390 0t0 TCP 127.0.0.1:9333 (LISTEN)
Additionally adding the flag '--remote-debugging-address=0.0.0.0' makes Chrome open the port for all IP addresses.
root#b6ff203497dc:~# lsof -i -P -n | grep LISTEN
node 247 root 21u IPv4 224919 0t0 TCP *:9876 (LISTEN)
chrome 260 root 137u IPv4 229390 0t0 TCP *:9333 (LISTEN)
Now VSCode can connect.
The crucial hints were given by:
Chrome remote debugging from another machine
https://github.com/puppeteer/puppeteer/issues/5063#issuecomment-561595885