Debugging remote CRA applications not working (Remote: Linux/Local:MacOSX)

[coquizen]

When debugging a remote (Linux) create-react-app project, vscode successfully launches a local (OSX) instance of Firefox (two windows actually: one opening up to http://localhost:3000 and another window opened to a blank page but this is likely due to the yarn: start task defaulting to launching a browser of its own?). However, any interactive feature/breakpoints that this plugin enables in vscode does not work.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "firefoxExecutable": "developer",
            "firefoxArgs": [
                "--start-debugger-server",
            ],
            "profile": "dev-edition-default",
            "preLaunchTask": "yarn: start",
            "name": "Launch localhost",
            "enableCRAWorkaround": true,
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "log": {
                "fileName": "${workspaceFolder}/vscode-firefox-debug.log",
                "fileLevel": {
                    "default": "Debug"
                },
                "consoleLevel": {
                    "default": "Warn"
                }
            }
        },
        {
            "name": "Attach",
            "type": "firefox",
            "request": "attach",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "enableCRAWorkaround": true
        },
    ]
}

Note: The log parameter does not work as it gives me the following error: The debug adapter can't write a log file in a remote workspace. Should I file a separate issue for this?

The settings on the local (OSX) instance of firefox as gleaned from about:config devtools.debugger.remote-enabled: true devtools.chrome.enabled: true devtools.debugger.prompt-connection: false devtools.debugger.force-local: false <--- I have attempted both false and true

Am I missing something?

[coquizen]

bump this remains a recurring issue even after a complete reset on both ends with vscode (clean install with only the firefox and remote package installed. The launch.json has been cleaned up to:

{
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Launch firefox",
            "url": "http://localhost:3000",
            "firefoxExecutable": "developer",
            "webRoot": "${workspaceFolder}/src",
            "enableCRAWorkaround": true,
        },
        {
            "type": "firefox",
            "request": "attach",
            "name": "Attach firefox",
            "enableCRAWorkaround": true,
        }]
}

Additionally vscode continues to prompt a variation of the following:

Unable to open 'Tab.js': Unable to read file 'vscode-remote://ssh-remote+kronos/home/caninodev/Developments/Software/Professional/gastro/client/admin-cra/src/components/Tab/Tab.js' (Error: Unable to resolve non-existing file 'vscode-remote://ssh-remote+kronos/home/caninodev/Developments/Software/Professional/gastro/client/admin-cra/src/components/Tab/Tab.js').

Potentially related to #215 (except enabling enableCRAWorkaround doesn't make a difference).

[hbenl]

I finally found the time to figure this out: CRA creates sourcemaps that aren't standards-compliant and don't work out-of-the-box with remote workspaces. We need to create a workaround by adding a pathMapping to the launch configuration. You can try this:

{
    "type": "firefox",
    "request": "launch",
    "reAttach": true,
    "name": "Launch firefox",
    "url": "http://localhost:3000",
    "firefoxExecutable": "developer",
    "webRoot": "${workspaceFolder}",
    "enableCRAWorkaround": true,
    "pathMappings": [{
        "url": "file:///home/caninodev/Developments/Software/Professional/gastro/client/admin-cra",
        "path": "${workspaceFolder}"
    }],
}

but I'm not 100% sure I got the pathMapping right. If this doesn't work, you should have a look at the "Loaded Scripts" panel: it appears at the bottom of the debug sidebar when the debugger is active and lets you see how URLs that Firefox sees are mapped to files in your VSCode workspace. You should see an entry starting with file:/// there and most of your app's files are under that. You can also create a pathMapping from there: open the context menu for the entry starting with file:/// and choose "Map to local directory", then choose your workspaceFolder by pressing Enter. By the way, enableCRAWorkaround is a workaround for another CRA bug, so you should keep this.

Note: The log parameter does not work as it gives me the following error: The debug adapter can't write a log file in a remote workspace. Should I file a separate issue for this?

No, that is expected: fileName needs to point to a local file and since you're using a remote workspace, you can't have fileName start with ${workspaceFolder}. Try something like "fileName": "/tmp/vscode-firefox-debug.log" instead.