google-chrome - 为什么我的调试器在视觉上停在错误的行？

Question

我在用

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 。在这种情况下，很难调试...

Answer 1

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

源图

这不是您的浏览器的“故障”。它只是显示代码和项目中的源 map 所传递的位置。
app.js文件和源映射(app.js.map)由Meteor构建过程生成，并从.meteor/local/build/programs/web.browser/app目录提供。
.map文件负责告诉浏览器如何显示原始源，并将生成的app.js文件中的哪些段映射到原始源代码中的哪些段。

可以在here中找到有关源映射技术方面的很好的解释。

您可以在线查看源 map ，并使用this tool查看哪些 map (选择custom ...，然后拖放.js和.map文件。

可疑的错误

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

该错误当前为tracked on GitHub， meteor 们似乎正在寻找原因。

你能做什么？

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

您可以:

观察错误线程并等待其解决，并且暂时不使用源映射进行调试(最好是，如果该错误将很快得到修复)。

摆脱掉相关Meteor软件包的本地克隆(可以工作，我没有深入研究依赖性问题，也没有真正推荐它，但是here's a way of doing it)。

从git checkout以已知的良好状态运行Meteor，直到发布修复程序为止。

最后一个选项是@hwilson did，以便开始通过git bisect查明错误。

您可以引用Meteor developer document以获取有关从结帐运行 meteor 工具的方法的详细信息，但是要点如下:

首先，确保将包括.meteor/versions和.meteor/packages在内的代码 check out 到源代码管理中，因为您可能需要暂时将它们弄乱，并希望在错误修复后将其恢复。

git clone --recursive https://github.com/meteor/meteor.git到您选择的目录(例如/home/yourname/src/remote。

cd meteor。

git checkout 25a89b5获取最近一次的正确提交。

git submodule update --init --recursive以确保结帐后所有内容仍为金色。

./meteor --help使 checkout 的版本开始

在您的项目中，从.meteor/packages文件中删除版本信息，因为它们可能与您的结帐所提供的版本信息不兼容。

在项目目录中，运行/home/yourname/src/remote/meteor/meteor run。

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

我认为要在不久的将来解决此错误会付出很多努力，但我决定部分包含此信息以便用作将来与sourcemap相关的问题的文档。