Support local overrides with in-editor debugging

[LoganTann]

Is your feature request related to a problem? Please describe.

I'm a front-end developer working on a live website, and don't have access to the back-end nor ability to work locally. To ease testing, I'm using chrome's local overrides feature. I would like to also use vscode in-editor debugging feature, so I don't have to switch windows to add a breakpoint or a logpoint.

Issue / Current behavior : When I add a breakpoint, the file open in the editor is a copied read-only file from the debugger, and not the local file.

Describe the feature you'd like

Ability to add local overrides from the extension. Adding a breakpoint in the local file adds it in the mocked remote resource. When the execution is paused, I would like to be able to edit the opened file.

I'm not expecting the changes to also hot-update the file. As long as I can add breakpoints, edit the file and save locally + reload live website, it's fine. But it could be a nice addition too.

Appendices

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug live on VsCode",
            "url": "https://live-website.example.com/",
            "webRoot": "${workspaceFolder}/live-website.example.com",
            "userDataDir": false
        }
    ]
}

Related question : https://stackoverflow.com/questions/62921375/can-i-use-chrome-debugger-with-a-live-website-and-local-overrides

[connor4312]

There is no "local overrides" feature in this debugger because this debugger inherently already works from a local file system and maps local files to files in the runtime by default. You will just need to set up your launch configuration such that paths are able to be mapped successfully.

When I add a breakpoint, the file open in the editor is a copied read-only file from the debugger, and not the local file.

You can set enableContentVerification: false to disable this behavior.

[LoganTann]

Hello, thanks for the quick reply !

the debugger maps local files to files in the runtime by default

webRoot parameter seems to be set-up correctly. Will it work if the remote file :

1. has a content slightly different from the local file, despite having the same file name ?
2. don't have a file extension
3. has special characters such as &query=params

I will do a second try tomorrow and keep you in touch.

[LoganTann]

I will do a second try tomorrow

I can add breakpoints from vscode and it applies it on the browser correctly, which means that the debugger could link the remote resource with the local one.

"enableContentValidation" parameter did not fix the issue for me. I also tried "enableContentVerification".

The remote file is still not overridden by the local file and when the execution is paused by a breakpoint, the file is opened as a new tab in vscode.

My updated launch.js with the folder tree is the following :

{
    /*
    workspace folder
    ├───.vscode
    │   └───**launch.json**
    ├───[other folders]
    └───example.com
        └───wilojs.axd%3Fpageid=dashboard_8acc5285ae1644a0baf9149254b05f0d&site=Development&localeid=16128a3f-8550-4241-bad1-2f928f594891&v=2024.1.73.7
    */
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug MHP on VsCode",
            "url": "https://example.com/dashboard.aspx?dashboardlayoutid=8acc5285-ae16-44a0-baf9-149254b05f0d&id=cd19b180-4be6-48fc-9196-8a3432fa8953&Site=Development",
            "webRoot": "${workspaceFolder}/myhealthpartner.be",
            "userDataDir": false,
            "smartStep": true,
            "enableContentValidation": false,
        },
    ]
}