SourceMapPathOverrides setting memo in VSCode Debugger for Chrome

The title is a little stray. I'm hoping that someone who is as addicted as I will come along.

Note

The following content is only working on the Angular project. I couldn't do it when I thought, "You can do it with React + Docker configuration with the same glue!"

(Uncertain information) It may be a condition that Webpack is installed by default like Angular2 + source-map can be displayed. .. (The React project I tried didn't show the source-map in Webpack) Official ("Sourcemaps" chapter "What if I didn't source-map with Webpack in the first place?" If you read it, I feel like you can't read it.)

If you arrived at this article in the environment of React or Vue + Docker, there was an article that uses Debugger for Chrome from the extension of Remote Development, so I will post it. The story of building a Vue.js development environment using Container of Visual Studio Code Remote

What I was addicted to

Debugging Angular code on VS Code because VS code has a handy extension called Debugger for Chrome I tried.

But ** the process doesn't stop at the breakpoint. ** **

environment

I was building a Docker environment by referring to the following article. Docker x Angular environment easy construction

Cause

Launch.json (configuration file) of Debugger for Chrome was not a proper description.

Solution (results only)

The final launch.json (config file) is:

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "for angular",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }
        }
    ]
}

If you copy and paste the above and it works, you're probably ** insanely lucky ** (^^;

If you can understand by looking at the following articles, you may not need to read further. Debug Angular started in Docker container with VS Code ["Remote debugging and logger tips that can be used in Imadoki's JavaScript development (2018 version-Part 2)"](https://seroku.jp/wp/%E3%80%8C%E3%82%A4%E3%83 % 9E% E3% 83% 89% E3% 82% AD% E3% 81% AE-javascript-% E9% 96% 8B% E7% 99% BA% E3% 81% A7% E4% BD% BF% E3% 81% 88% E3% 82% 8B% E3% 80% 81% E3% 83% AA% E3% 83% A2% E3% 83% BC% E3% 83% 88% E3% 83% 87% E3% 83% 90% E3% 83% 83 /) Debugging does not work in Visual Studio Code

Explanation

If you know what you are trying to do with sourceMapPathOverrides, you can set it correctly.

What you are trying to do with sourceMapPathOverrides

** "Associate the source map of the browser with the local source layout (implemented in VScode)" **.

• It is easier to understand than accuracy.

Another important thing here is what the webRoot is.

            "webRoot": "${workspaceFolder}",

$ {workspaceFolder} is the default description, ** Refers to the workspace root in VScode **.

How to guide the solution

• The source itself is an Angular tutorial.

About browser source placement

First of all, ** Placement of browser source **, as described in Debugging Angular started in Docker container with VS Code You can find out by opening the source section with the Chrome development tool and checking the path of the appropriate source file.

For example, the above hero.service.ts is located at webpack: ///./src/app/hero.service.ts as the browser source location.

The source you want to debug is everything in src, so The ** browser source layout ** that you want to link (including the src folder) is considered as webpack: ///./* this time.

About local source placement

This hierarchy

angular-traial ←※ webRoot=`${workspaceFolder}`Position of
├── .vscode
│   └── launch.js
├── docker
│   └── node
│       └── Dockerfile
├── docker-compose.yml
└── server
    └── angular-app
        ├── README.md
        ├── angular.json
        ├── e2e
        ├── karma.conf.js
        ├── node_modules
        ├── package-lock.json
        ├── package.json
        ├── src
        │   ├── app
        │   │   ├── app-routing.module.ts
        │   │   ├── app.component.html
        │   │   ├── app.component.sass
        │   │   ├── app.component.spec.ts
        │   │   ├── app.component.ts
        │   │   ├── app.component_bk.html
        │   │   ├── app.module.ts
        │   │   ├── dashboard
        │   │   ├── hero-detail
        │   │   ├── hero-search
        │   │   ├── hero.service.spec.ts
        │   │   ├── hero.service.ts
        ~Omitted below~

VS code edit screen

Where is webRoot = $ {workspaceFolder}? Literally, it's the root location of VScode's workspace, this time the location of the angular-traial folder (also mentioned in the hierarchy).

This depends on how you open each individual workspace, but when you try to create launch.js it should be $ {workspaceFolder} /. Vscode.

Align the source placement of the browser with the book tail of the local source placement.

Therefore, if you think of the browser source layout as webpack: ///./* including the src folder,

Local source placement is also included up to the src folder (Higher hierarchy) / angular-traial / server / angular-app / * =${workspaceFolder}/server/angular-app/* =${webRoot}/server/angular-app/* If so, it will be the correct setting.

            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }

Digression

Once you understand this, it's easy to "limit the debug target to only the src folder".

            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/server/angular-app/src/*"
                }

(Of course, I just added the / src / part to both) Where to base it may depend on the site and references.

If you know about sourceMapPathOverrides, you should be able to handle it. ..

the end

If you use Debugger for Chrome, you don't have to search for the source with the developer tools one by one. (I'm a little addicted to it, but Angular's study seems to be progressing)

that's all!