javascript - Google Chrome 到底是怎么知道我的来源是什么/在哪里以及如何解释它们的？

Question

我目前正在使用 Haxe 创建一个简单的小型 Web 框架。除了前端框架(Yahoo Pure)之外的所有内容都是使用 Haxe/HTML/CSS 组合从头开始编写的。我正在 FlashDevelop 中使用 USBWebServer 编写它，以及几个自定义构建/部署脚本，用于将输出 JS 复制到 UsbWebserver 主机目录，并启动 Google Chrome 并将其指向 http://localhost/myserver/whatever .

无论出于何种目的，我的开发环境都是一堆不同目录中的脚本和文件杂乱无章。服务器上的输出目录绝对有零 Haxe 代码，只有 Haxe 编译器生成的 javascript 和 PHP 文件。

然而，不知何故，通过某种黑魔法，Google Chrome 开发者工具(使用 F12 打开)有一个“源”选项卡，其中

• 正确指向写入目录中的 Haxe 源文件

• 通过简单的语法突出显示显示源代码

• 允许我在 haxe 代码本身中添加断点

• AND 让我可以在到达断点时用鼠标突出显示变量(包含的对象)的值(就像您在 Visual Studio 或其他精美 IDE 中看到的那样)

那么 Google Chrome 到底是怎么做到这一点的呢？我的“启动脚本”就是这样:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" "http://localhost:8080/mysite"

这可能解释了它如何找到我的源目录，因为该脚本是从那里运行的。这并不能解释 Google Chrome 如何理解 Haxe，或者知道如何将生成的 javascript 代码与源 Haxe 代码逐行匹配。

我没有安装任何 Haxe 插件。我拥有的唯一与开发相关的插件是高级 REST 客户端和 Javascript 错误通知程序(仅在出现 javascript 错误时添加一点视觉指示器)

这一切看起来就像(非常有用的)黑魔法。

Answer 1

我从未使用过 Haxe，但我假设它只是吐出常规源映射(将源变量/行映射到编译)，所有主要浏览器都可以解释它们。要了解更多信息，我建议阅读这篇文章:html5rocks.com/en/tutorials/developertools/sourcemaps