IE11 F12 developer tool for source maps

[Andy Sterland]

Just thought I'd share that the latest update to IE included support* for source maps in the F12 developer tools (blog<http://blogs.msdn.com/b/ie/archive/2014/04/14/what-s-new-in-f12-with-windows-8-1-update.aspx>). Something that has been a long time coming :). The feature is at the moment just for debugging JavaScript and there isn't any source map magic for CSS.

Anyway I'm looking forward to posting more to this group as we're keen to improve on the experience debugging code that's been compiled/minified/transformed.

-Andy

*For full disclosure there is a few parts of the spec that we haven't yet implemented:

sourcesContent
Currently the F12 support for source maps doesn't include support for sources that are embedded in the map via sourcesContent. This is a feature we'd like to add at a later date though we have some reservations about how tools would discover the 'language' for embedded sources (which is a more general problem). Something that's worth a separate thread at a later date.

Index Maps
Currently the F12 support for source maps doesn't include any support for index maps. Alas this was something we noticed too late for us to add it in time, though there's also some reservations on that team on how multi-level mapping should work. Something that's worth a separate thread at a later date.

Relative path resolution for //# sourceURL
In cases where executed code has a //# sourceURL comment F12 doesn't resolve the map file relative to it. For example if some code is evaluated that ends with:
//# sourceURL=./path/to.js
//# sourceMappingURL=./path/to.js.map
The sourceMappingURL is resolved relative to the HTML document not the "./path/to.js" this is a bug that we'll fix in a future release.

[Brian Slesinsky]

Welcome!

Unfortunately I don't have an easy way to run IE11 but I've heard it's
working with a small GWT app.

Here are a couple of websites with source maps enabled to test against:

http://gwtproject.org/ (GWT 2.6)
http://pixelcycle.appspot.com/ (old version of Dart; I need to recompile.)

- Brian

On Tue, Apr 15, 2014 at 4:25 PM, Andy Sterland
<Andy.S...@microsoft.com>wrote:

> _______________________________________________
> dev-js-sourcemap mailing list
> dev-js-s...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-js-sourcemap
>

[Andy Sterland]

Thanks. I’ve briefly tried out those sites below, though I must admit we hadn’t tried GWT or Dart that extensively.

http://gwtproject.org/ - At a glance it seems like the page is creating an iframe and adding a script element to the iframe which contains the source mapped content then that iframe is removed. Unfortunately the F12 tools remove script documents from the file picker when they are removed from the page, so the documents are added and then removed almost right away.

http://pixelcycle.appspot.com – It seems to work but a few of the dart files seem to be missing. In F12 we disable sourcemaps for a generated JS file if we notice that any of the source files for it are missing, though we only check when you try to open a file.

Fwiw F12 doesn’t have a language service for Dart so the document would be colorized like plain ol’ JavaScript. But you should be able to debug just fine.

Also, if you ever do want to try IE11 (or any IE version) there are free VMs (for Windows, Linux and Mac host OS) over at:
http://modern.ie/en-us/virtualization-tools#downloads

From: Brian Slesinsky [mailto:skyb...@google.com]
Sent: Tuesday, April 15, 2014 7:13 PM
To: Andy Sterland
Cc: dev-js-s...@lists.mozilla.org; Adam Reineke
Subject: Re: IE11 F12 developer tool for source maps

Welcome!

Unfortunately I don't have an easy way to run IE11 but I've heard it's working with a small GWT app.

Here are a couple of websites with source maps enabled to test against:

http://gwtproject.org/ (GWT 2.6)
http://pixelcycle.appspot.com/ (old version of Dart; I need to recompile.)

- Brian

On Tue, Apr 15, 2014 at 4:25 PM, Andy Sterland <Andy.S...@microsoft.com<mailto:Andy.S...@microsoft.com>> wrote:
Just thought I'd share that the latest update to IE included support* for source maps in the F12 developer tools (blog<http://blogs.msdn.com/b/ie/archive/2014/04/14/what-s-new-in-f12-with-windows-8-1-update.aspx>). Something that has been a long time coming :). The feature is at the moment just for debugging JavaScript and there isn't any source map magic for CSS.

Anyway I'm looking forward to posting more to this group as we're keen to improve on the experience debugging code that's been compiled/minified/transformed.

-Andy

*For full disclosure there is a few parts of the spec that we haven't yet implemented:

sourcesContent
Currently the F12 support for source maps doesn't include support for sources that are embedded in the map via sourcesContent. This is a feature we'd like to add at a later date though we have some reservations about how tools would discover the 'language' for embedded sources (which is a more general problem). Something that's worth a separate thread at a later date.

Index Maps
Currently the F12 support for source maps doesn't include any support for index maps. Alas this was something we noticed too late for us to add it in time, though there's also some reservations on that team on how multi-level mapping should work. Something that's worth a separate thread at a later date.

Relative path resolution for //# sourceURL
In cases where executed code has a //# sourceURL comment F12 doesn't resolve the map file relative to it. For example if some code is evaluated that ends with:
//# sourceURL=./path/to.js
//# sourceMappingURL=./path/to.js.map
The sourceMappingURL is resolved relative to the HTML document not the "./path/to.js" this is a bug that we'll fix in a future release.
_______________________________________________
dev-js-sourcemap mailing list

dev-js-s...@lists.mozilla.org<mailto:dev-js-s...@lists.mozilla.org>
https://lists.mozilla.org/listinfo/dev-js-sourcemap

[Brian Slesinsky]

Thanks for looking.

The code path that GWT uses to install JavaScript is pretty convoluted, but
as far as i can tell, it doesn't actually delete the <script> tag on
gwtproject.org. (There is a removeScript() function that is empty in this
configuration.)

But anyway, I will change a setting to make JavaScript installation more
straightforward [1] and perhaps that will fix it (after it's deployed).

[1] https://gwt-review.googlesource.com/#/c/7160/


On Wed, Apr 16, 2014 at 3:26 PM, Andy Sterland
<Andy.S...@microsoft.com>wrote:

> Thanks. I’ve briefly tried out those sites below, though I must admit we
> hadn’t tried GWT or Dart that extensively.
>
>
>
> http://gwtproject.org/ - At a glance it seems like the page is creating
> an iframe and adding a script element to the iframe which contains the
> source mapped content then that iframe is removed. Unfortunately the F12
> tools remove script documents from the file picker when they are removed
> from the page, so the documents are added and then removed almost right
> away.
>
>
>
> http://pixelcycle.appspot.com – It seems to work but a few of the dart
> files seem to be missing. In F12 we disable sourcemaps for a generated JS
> file if we notice that any of the source files for it are missing, though
> we only check when you try to open a file.
>
>
>
> Fwiw F12 doesn’t have a language service for Dart so the document would be
> colorized like plain ol’ JavaScript. But you should be able to debug just
> fine.
>
>
>
> Also, if you ever do want to try IE11 (or any IE version) there are free
> VMs (for Windows, Linux and Mac host OS) over at:
>
> http://modern.ie/en-us/virtualization-tools#downloads
>
>
>
>
>
>
>

> *From:* Brian Slesinsky [mailto:skyb...@google.com]
> *Sent:* Tuesday, April 15, 2014 7:13 PM
> *To:* Andy Sterland
> *Cc:* dev-js-s...@lists.mozilla.org; Adam Reineke
> *Subject:* Re: IE11 F12 developer tool for source maps

>
>
>
> Welcome!
>
>
>
> Unfortunately I don't have an easy way to run IE11 but I've heard it's
> working with a small GWT app.
>
>
>
> Here are a couple of websites with source maps enabled to test against:
>
>
>
> http://gwtproject.org/ (GWT 2.6)
>
> http://pixelcycle.appspot.com/ (old version of Dart; I need to recompile.)
>
>
>
> - Brian
>
>
>
> On Tue, Apr 15, 2014 at 4:25 PM, Andy Sterland <

> https://lists.mozilla.org/listinfo/dev-js-sourcemap
>
>
>