Chrome 开发工具,异常行为,将变量显示为未定义但仍然访问成员

Chrome dev tools, unusual behavior, shows variables as undefined but still accesses the members

我可能需要一些帮助来更好地解释和定义这个问题,因为我只知道这发生在 chrome devtools 中,我正在查看的代码是用 parcel 编译的,而且我我在 4.4 之后使用某些版本的打字稿。

我在此处的 500 行之后走了几行,并且 const parsed 在我悬停时和在范围 window 中时都显示为未定义。如果它确实未定义,parsed.type 应该抛出,以及我所在的行 - 506 它访问 .value

然而,再走几步之后,我到达了 507 (!),现在我可以看到 parsed 中确实有一些东西,而且在步进之前一定有一些东西(范围 window 显示解析为 {type: 'ok', value: 'custom-plot'}.

我对 parcel 的经验非常有限,但我很肯定,在为 webpack 进行正确设置时,我能够获得更好的调试打字稿体验。我什至可以在哪里以及如何开始调试它?

至少,我想告诉调试器移动到 500 以上,并在赋值后真正看到该变量中的内容。

编辑

我已经升级了 parcel 并让它开箱即用,但我仍然很好奇工具链的哪一部分导致了这个。

可能是 parcel,或者 parcel 内部使用的工具(swc/babel/tsc,取决于您的设置)。 (虽然这是一个猜测 - 如果没有我可以调试的完整重现很难确定)。 Parcel 负责生成源映射,源映射中的错误很容易导致您看到的各种问题 - 调试器说停止的 .ts 代码行与实际出现的不匹配就变量、控制流等而言会发生

升级包裹导致问题消失的事实支持了这一理论。您还可以在 parcel changelog 中看到许多 source-map 相关的错误正在修复。如果您以后继续遇到此类问题,我建议您尝试创建一个简化的复制品并使用 parcel 提交错误。