如何在 Chrome 开发者工具中调试用 Typescript 编写的 webworker

Question

我正在开发 Angular 9 应用程序，我们使用 Web Worker 进行更繁重的计算。整个应用程序都是用 Typescript 编写的，包括网络工作人员。不幸的是，我无法找出正确的方法来让 Angular 构建为 Web Worker 代码创建源映射，以便 Chrome 调试器可以逐行执行代码。

更好的解决方案是能够单步执行我的 Typescript 工作代码，就像我可以单步执行主线程的 Typescript 一样。然而，鉴于我根本没有能力调试 Typescript Worker，即使能够单步执行转译的 Javascript 也将是一个胜利。

这是我所看到的情况：

我的 Angular 项目中有一个editor.worker.ts描述 Web Worker 的文件。该工作人员在其他地方被实例化为：

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

构建应用程序并在 Chrome 中加载后，当我进入 devtools Sources选项卡并搜索 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 设置，或缺少对源映射执行特殊操作的打字稿指令，或两者兼而有之。我感谢任何帮助我调试打字稿工作人员的帮助。谢谢！

Answer 1

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