How to debug webworker written in Typescript in Chrome devtools

Question

I'm working on an Angular 9 app, and we use web workers for heavier computation. The whole application is written in Typescript, including the web workers. Unfortunately, I can't figure out the proper way to get the Angular build to create a sourcemap for the web worker code so that Chrome debugger can step line-by-line through code.

The preferable solution would be being able to step through my Typescript worker code, same as I can step through Typescript for the main thread. However, given that I have no ability to debug the Typescript workers at all, even the ability to step through the transpiled Javascript would be a win.

Here's what I see happening:

I have a file within my Angular project editor.worker.ts which describes the web worker. This worker gets instantiated elsewhere as:

const worker = new Worker('./editor.worker', { name: 'Editor', type: 'module' });

After building the application and loading in Chrome, when I enter devtools Sources tab and search for the worker, I find 2 files:

• editor.worker.ts contains just one line:

  module.exports = __webpack_public_path__ + "Editor.worker.js"
  

• Editor.worker.js contains the transpiled Javascript.

As the app runs in Chrome, I can set breakpoints in the transpiled .js file, and the debugger will pause when it hits the line of code. However, the highlighted line in source is the single line in editor.worker.ts. When I browse back over to the Editor.worker.js source file, my breakpoint does not show up anymore, and the debugger doesn't recognize the specific line of code where execution is paused, and I have no ability to step through the code. (Hitting F8 does continue execution, as expected.)

It seems like I may be missing a webpack setting for workers, or a typescript directive to do something special with the sourcemap, or both. I appreciate any help to get me debugging my typescript workers. Thanks!

Answer 1

I ran into the same problem with Chrome Version 88.0.4324.190. I tried converting my web worker code from TS to JS but no luck, seems that it could be an issue with Chromium. Thankfully I was able to locate the web worker source in Firefox devtools and was able to debug as expected.