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

标签 javascript php google-chrome haxe

我目前正在使用 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/

相关文章:

javascript - 开 Jest 导入语句 : 'TypeError: Cannot set property ' fillStyle' of null'

php - 我可以在 PHP 中混合使用 MySQL API 吗?

php - 使用动态 URL 进行 PayPal 重定向

java - 如何从 Java 桌面应用程序(如 Java Swing 应用程序)向 Chrome 扩展发送/传递消息

google-chrome - Karma/Testacular 打开没有扩展的浏览器

html - 更新后占位符 css 在 chrome 中不起作用

javascript - Angular 插入数组对象

javascript - 为什么在React中未定义此数组?

javascript - 使用 jQuery 在 div 中动态输入文本

php - Mysql - 获取月份和年份的数量