为什么我的调试器会在错误的行视觉上停止?

Why does my debugger stop visually at the wrong line?

我正在使用

METEOR@1.4.4.2
WebStorm@2017.1.1 
Chrome@58.0.3029.110 (64-bit)
macOS Sierra 10.12.5
ecmascript@0.7.3
ecmascript-runtime@0.3.15

最近,调试器开始在错误的行停止,但只是在视觉上,大多数情况下它就像实际断点后面的 8-14 行。

例如

*橙色条表示 google chrome

中的断点

控制台输出:

此外,如您所见,有些行变黑了,这意味着我无法从浏览器那里设置断点。

WebStorm 内部调试器中的行为是相同的。所以我认为这不是Chrome的错。看起来源映射已损坏。我不知道是 WebStorm 还是 Meteor 的原因。在这种情况下很难调试...

这很难说。在粗略的 google 搜索中,您似乎不是唯一看到此内容的人。正如@MasterAM 所提到的,这可能是因为来自转译的源映射。我认为您对此无能为力,但您可以尝试清除浏览器和 IDE 缓存,这似乎对某些人有效。

Javascript Stops at a line without a breakpoint in remote debug mode

Clearing Webstorm's cache

很难确定,但您遇到的问题似乎与导致 Meteor 生成不正确的源映射的错误有关。

源地图

这不是您浏览器的 "fault"。它只是显示代码和项目中源映射传递给它的位置。

app.js 文件和源映射 (app.js.map) 由 Meteor 构建过程生成,并从 .meteor/local/build/programs/web.browser/app 目录提供。

.map文件负责告诉浏览器如何显示原始源代码,以及生成的app.js文件中的哪些段映射到原始源代码中的哪些段。

可以找到关于源地图技术方面的很好的解释 here

您可以在线可视化您的源地图并查看哪些地图使用 this tool(选择 自定义... 和 drag/drop .js.map 个文件。

疑似bug

作为构建过程的一部分,Meteor 使用 babel-compiler Meteor 包。在某些时候,一个错误导致在 babel 转换后生成无效地图。

该错误目前 tracked on GitHub,Meteor 人员似乎正在接近原因。

你能做什么?

目前,没有快速简便的修复方法。

您可以:

  • 观察错误线程并等待它被解决并在没有源映射的情况下进行调试(可能是最好的,如果错误很快就会被修复)。
  • 破解相关 Meteor 包的本地克隆(可以工作,我没有深入研究依赖性问题并且不推荐它,但是 )。
  • 运行 来自 git 结帐的流星处于已知良好状态,直到发布修复程序。

最后一个选项是 @hwilson did,以便通过 git bisect.

开始查明错误

关于运行从checkout中安装meteor工具的详细方法可以参考Meteor developer document,大致内容如下:

首先,确保您的代码(包括 .meteor/versions.meteor/packages 已检出到源代码管理中,因为您可能需要暂时将它们弄乱并希望恢复一次错误已修复。

  1. git clone --recursive https://github.com/meteor/meteor.git 到您选择的目录(例如,/home/yourname/src/remote.
  2. cd meteor.
  3. git checkout 25a89b5 获取最后一次已知的正确提交。
  4. git submodule update --init --recursive 以确保结帐后一切仍然是金色的。
  5. ./meteor --help 开始签出版本
  6. 在您的项目中,从 .meteor/packages 文件中删除版本信息,因为它们可能与您结账时提供的版本不兼容。
  7. 在您的项目目录中,运行 /home/yourname/src/remote/meteor/meteor run

这将 运行 签出的 Meteor 版本。您可能需要执行 meteor reset(警告:这会清除本地 mongo 数据库)或至少清理一些 .meteor/local(例如,源映射)才能正常工作,但是这可能是不必要的。

对于我认为会在不久的将来解决的错误,这是相当大的努力,但我决定部分包含此信息,以便用作将来与 sourcemap 相关的问题的文档。

不确定这种情况,但在使用 Eclipse 调试 java 时遇到过类似情况。当源代码和正在调试的 compiled/interpreted 代码不同时,就会发生这种情况。

尝试调试一个简单的 js 代码来验证 chrome 的 js 调试器本身是否有问题。如果有效,那么对非 'debug-enabled' 代码行的解释是它们都在同一行(直到记录“7”的语句)。这也可以抵消浏览器中的行号。

这是一种可能的解释。

我要补充一点,有时缩小后的 js 文件的 Pretty-print 在调试模式下会在代码中的实际行和移动行之间添加偏移量(对 Pretty-打印)。

所以避免在调试模式下使用漂亮打印,你会挂到正确的行。

晚了三年,但如果有人钢铁有这个问题。 问题在于 IDE 和生成 .map 文件的编译器对行分隔符的不同解释。 例如,在 WebStorm 和 Angular-Project 中的 windows - TypeScript 编译器忽略行分隔符,如果它们是 Unix 风格(仅 LF)。 在这种情况下,如果代码格式化程序将太长的行转换为几行较短的行,并将这些行仅按 LF 拆分,那么在 .map 文件中,最初的单行将被解释为单行,但是WebStorm 将 LF 分隔的行显示为不同的行。

解决方法-换行分隔符为CR+LF即可解决问题![​​=20=]

P.S。我认为这是 TypeScript 编译器中的一个错误