我目前正在使用 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 错误时添加一点视觉指示器)
这一切看起来就像(非常有用的)黑魔法。
最佳答案
我从未使用过 Haxe,但我假设它只是吐出常规源映射(将源变量/行映射到编译),所有主要浏览器都可以解释它们。要了解更多信息,我建议阅读这篇文章:html5rocks.com/en/tutorials/developertools/sourcemaps
关于javascript - Google Chrome 到底是怎么知道我的来源是什么/在哪里以及如何解释它们的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38400645/