JavaScript 调试器 (TypeScript) 在 src/* 上捕获断点，但不在 src/**/* 上 TLDR;详情

编程问答 2023-11-05

问题描述

我不知道为什么，但在 JavaScript 调试会话中设置断点后，来自 src/* 的任何文件都可以运行，但在 src/**/* 上不起作用。

IDE：WebStorm 2021.1.3

我使用 this 进行调试配置。

文件结构：

enter image description here

具体示例：Xarrow.tsx 上的断点有效，但在 /utils/paths.ts 上无效。我尝试将 paths.ts 移动到 src 然后它起作用了。 IDE 似乎不会在 src/**/ 文件夹上查找断点。

如何配置 WebStorm 以在嵌套文件夹中查找断点？

不确定是否相关，但请注意：

  • 我正在运行使用链接（纱线链接）包 (react-xarrows) 的示例项目 (create-react-app)。
  • 我试图调试的这个 src 文件夹是链接包的 src 文件夹。也许 WebStorm 没有查看链接包中的嵌套文件夹？

更新

TLDR;

typescript 在使用链接包时为源映射文件生成错误的路径（.js.map 文件中的 sources 属性）。想出了如何修复它，但每当其中一个源文件发生变化时，打字稿都会覆盖我的修复 - 所以我将一个问题转换为另一个问题。

详情

这让我很恼火，所以我进一步调查：

考虑下一个文件夹树：

enter image description here

变成=>

enter image description here

编译后的库包括源映射文件。

浏览器只知道如何运行javascript，所以最终加载的是：

enter image description here

但我们想调试源代码（打字稿）而不是编译后的javascript，所以我们添加源映射，当浏览器看到它时，浏览器中的静态文件树变成：

enter image description here

现在注意！问题来了，
从根文件夹的角度来看（D:\Eliav\projects\git projects\react-xarrows）：

  • ./lib/* => ./src/*（正确）
  • ./lib/Xarrow/* => ../src/Xarrow/*（不正确！）
    应该是 ./lib/Xarrow/* => ./src/Xarrow/*

如果我看一下 ./lib/Xarrow/Xarrow.js.map:

//./lib/Xarrow/Xarrow.js.map
{
  "sources": [
    "../../src/Xarrow/Xarrow.tsx" //wrong! should be "../src/Xarrow/Xarrow.tsx"
  ],}

让我们修复这个特定的地图并在浏览器中查看：

enter image description here

现在断点可以工作了！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

debuggingjavascriptjavascript-debuggertypescripttypescriptwebstorm