C#C
C#•3y ago
Brady Kelly

❔ Chrome dev tools won't debug `.js` bundle files

Trying to debug an Angular 6 app using Chrome dev tools but whenever I try and set a breakpoint in one of the .js bundle files, dev tools immediately opens the .ts file that is mapped to that .js file and sets a breakpoint there, which doesn't get hit.

My TypeScript breakpoints in Rider aren't working and am just falling back to using Chrome dev tools to single step through the compiled Angular app.

I want to place a breakpoint in the main.js file produced by the ng serve command. This file is where all my Angular components are defined as JS classes. When I try and set a breakpoint in the following component ctor from main.js, dev tools ignores me and instead opens the AppComponent Typescript file and puts a breakpoint on the corresponding line there. The TypeScript breakpoint doesn't get hit.
let AppComponentForm = class AppComponentForm {
    constructor(router, _ngZone, utilitiesService, toast) {
        ...
        window.onpopstate = (event) => {
        ...
        };
        setTimeout(() => {
            this.showToast();
        }, 30000);
    }
Was this page helpful?