[Feature] debugging client script

[Meir017]

I have a case where I'm executing a script in the browser using page.evaluate and I'm trying to debug that script;
I tried installing https://github.com/microsoft/vscode-chrome-debug and configuring playwright to connect locally using websocket and port 9222.

with the configuration

{
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Chrome",
    "port": 9222,
    "webRoot": "${workspaceFolder}"
}

for example:

var result = await page.evaluate(() => {
    var a = { b: 6 };
    debugger;
    return a;
});
expect(result.b).toBe(6);

I set a breakpoint right before the page.evaluate execution and then started the chrome debugger

vscode was able to list the opened pages but when I selected one I got the following error:
Could not load source '__playwright_evaluation_script__': No debug adapter found. Can not send 'source'..

is this something that could work? or should work?

[Meir017]

hmm. this only happens when running with jest.
otherwise it works for me.

is there an easy way to attach the chrome debugger without having a breakpoint in the code and then manually running the attach chrome configuration and continuing execution?

[pavelfeldman]

If you'd like to step over the injected (evaluated) code, there is nothing better than VSCode or Chrome DevTools. What did you have in mind? It is technically feasible for us to implement a story where you would step into that evaluate while debugging the top-level script. Not something we would do for v1, but something that we might consider doing as a part of the tooling story for Playwright. Is that something you were looking for?

[Meir017]

my issue here is the tooling.
right now I have a launch.json with the following configured

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}",
            "cwd": "${workspaceFolder}",
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

in order to debug the client script I need to attach the chrome debugger while the playwright script is running, my goal is to attach automatically

and I'm hoping that there's a way to have a single configuration that will run and then attach.
I was thinking that maybe having a task (preLaunchTask) that would trigger the chrome attachment but I have no idea how to do that and if it's even possible.

[dgozman]

With PLAYWRIGHT_CHROMIUM_DEBUG_PORT environment variable, the following should be possible. Please comment here if that does not work.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}",
            "cwd": "${workspaceFolder}",
            "env": {
                // Use remote debugging port.
                "PLAYWRIGHT_CHROMIUM_DEBUG_PORT": "9222",
                // Run Playwright in debug mode.
                "PWDEBUG": "true"
             },
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

[dgozman]

Closing for now. Please reopen if something does not work.