doujiu8145
2016-07-15 16:07 阅读 44

Google Chrome如何知道我的资源是什么/在哪里以及如何解释它们?

I'm currently playing around with Haxe to create a simple little web framework. Everything but the front-end framework (Yahoo Pure) is being written from scratch using a combination of Haxe/HTML/CSS. I'm writing it in FlashDevelop, using USBWebServer, and a couple of custom build/deploy scripts to copy the output JS to the UsbWebserver host directory, and to launch Google Chrome and point it at http://localhost/myserver/whatever.

For all intents and purposes, my development environment is a jumbled up mess of scripts and files in a bunch of different directories. The output directory on the server has absolutely zero Haxe code, just the generated javascript and PHP files that came out of the Haxe compiler.

Yet somehow, by some black magic, the Google Chrome developer tools (opened with F12) have a "Sources" tab which

  • Correctly points to my Haxe source files in the write directory

  • Displays the sources with simple syntax highlighting

  • Allows me to add breakpoints in the haxe code itself

  • AND lets me see the value of variables (included objects) by highlighting them with my mouse when a breakpoint is reached (like you'd see in Visual Studio or other fancy IDEs)

So how the hell can Google Chrome do this? My "launch script" is just this:

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

That might explain how it finds my source directory, because that script is run from there. That doesn't explain how Google Chrome understands Haxe, or knows how to match the generated javascript code with the source Haxe code on a line-by-line basis.

I don't have any Haxe plugins installed. The only development-related plugins I have are Advanced REST client, and Javascript Errors Notifier (which just adds a little visual indicator when there's a javascript error)

This all seems like (extremely useful) black magic.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    dozabt4329 dozabt4329 2016-07-15 16:47

    I've never used Haxe, but I would assume that it's just spitting out regular Source Maps (maps source variables/lines to compiled), which are interpreted by all major browsers. To learn more about it, I suggest this article: html5rocks.com/en/tutorials/developertools/sourcemaps

    点赞 评论 复制链接分享

相关推荐