angular - 如何在 Chrome devtools 中调试用 Typescript 编写的 webworker

Question

我正在开发一个 Angular 9 应用程序，我们使用网络 worker 进行更重的计算。整个应用程序都是用 Typescript 编写的，包括 Web Worker。不幸的是，我无法找到让 Angular 构建为 Web Worker 代码创建源映射的正确方法，以便 Chrome 调试器可以逐行执行代码。
更好的解决方案是能够单步执行我的 Typescript 工作代码，就像我可以单步执行主线程的 Typescript 一样。但是，鉴于我根本没有能力调试 Typescript 工作人员，即使能够逐步完成转译的 Javascript 也是一种胜利。
这是我看到的情况:
我的 Angular 项目中有一个文件 editor.worker.ts它描述了网络 worker 。这个 worker 在其他地方被实例化为:

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

在 Chrome 中构建应用程序并加载后，当我输入 devtools 来源 选项卡并搜索 worker ，我找到了 2 个文件:

editor.worker.ts 只包含一行:

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

Editor.worker.js 包含转译的 Javascript。

当应用在 Chrome 中运行时，我可以在转译的 .js 文件中设置断点，并且调试器会在遇到代码行时暂停。但是，源代码中突出显示的行是 editor.worker.ts 中的单行.当我浏览回 Editor.worker.js 源文件时，我的断点不再出现，并且调试器无法识别暂停执行的特定代码行，并且我无法单步执行代码. (按 F8 确实会继续执行，正如预期的那样。)
似乎我可能缺少工作人员的 webpack 设置，或者缺少对源映射执行特殊操作的 typescript 指令，或两者兼而有之。我感谢任何帮助我调试 typescript 工作人员的帮助。谢谢!

Answer 1

我在 Chrome 版本 88.0.4324.190 上遇到了同样的问题。我尝试将我的 Web Worker 代码从 TS 转换为 JS，但没有成功，这似乎是 Chromium 的问题。幸运的是，我能够在 Firefox devtools 中找到 Web Worker 源代码，并且能够按预期进行调试。