Chrome browser Debug Typescript

In the configuration item for the Chrome developer tool, there is a sourcemap option to configure the JavaScript source and generate code relationships.

If you can debug the typescript code directly in the browser, we can really appreciate the joy of typescript development.

First open the Chrome developer tools configuration item, and then look at the Enable Source maps option under Sources,

If it is already selected, please cancel first, then refresh the page, select it, and then refresh the page.

At this point we can see the TS file in the sources option of developing this tool.

If you are developing a typescript program using Visual Studio, the default project is to generate the map file automatically.

Under each JS file there will be a comment description of the map file.

If you do not generate a map file, you can configure typescript in the configuration item under Tools.

Now we can set breakpoints in the developer tool.

Chrome browser Debug Typescript