VSCode 源映射显然不起作用

Question

I was trying to debug a chrome extension on VSCode, and in that attempt I noticed that breakpoint is not working on the scripts (eg background.js); So I googled and I took a look some posts and tried some, and finally I have no idea to identify what's wrong.

The .vscode/launch.json on my chrome project

{
    "version": "0.2.0",
    "configurations": [
        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8291",
            "runtimeArgs": ["--load-extension=${workspaceFolder}"], 
            "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",

            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${webRoot}/*"
            }
        }
    ]
}

Initially I didn't have the webRoot, breakOnLoad, sourceMaps, sourceMapPathOverrides properties but after reading the doc and a post (below the link) I added these.

The post I referred: Solve “Breakpoint ignored” with Visual Studio code (vscode 1.19+) Chrome debugger | by Ananto Ghosh | Frontend Weekly | Medium

Also I noticed that I have the vscode-chrome-debug extension which is deprecated and recommended to be uninstalled, I did uninstall. (So made sure not to happen any further tricky issue)

The file tree on the project:

├── .vscode 
├── background.js
├── bookmarklet.js
├── content.js
├── dialog.html
├── dialog.js
└── manifest.json

Now type F5 key to run the project, chrome opened, opening dev tools and navigated to the source tab and checking if there is the project files showing correctly... no there is not any. (and so of course breakpoint does not work yet as I could expect)

In my mind (since the SO terms, this is not a question and you don't need to answer):

• What the hell is sourceMaps? Do I need to create that sourceMaps thing manually before F5 or such? If so where the heck is the doc?
• What is the URL localhost thing for? I'd like to ensure that just specify that with a port is enough, right? Or do I need to launch a server or something before the F5 run? What in the world is that server thing then.

So, what's wrong with the project/launch.json?

Answer 1

you asked *What the hell is sourceMaps? Do I need to create that sourceMaps thing manually before F5 or such? If so where the heck is the doc?

The answer to the first. Even though JavaScript does need to be compile it usually is. Compilation is the process of removing white space and using other code optimisation other trick to make your JavaScript faster and smaller but this make readability. A sourcemaps does what it sound it map the compiled code to the compiled source.

The answer to the 2nd.

Yes and no. You do need to make the source map if you are compiling the javascript your self but this is usually done with webpack,esbuild, or what ever compiler you are using. If the package is compiled for you might have to going look to where you got the script from the should have the compiled version somewhere.

The answer to your last the doc should be with the compiler you are using.