sourceMappingURL and sourceURL syntax changed

If you use either source maps or sourceURL (both covered in this primer on source maps), then you may see a warning in Chrome console like "/*@ sourceMappingURL=" source mapping URL declaration is deprecated, "/*# sourceMappingURL=" declaration should be used instead.

Sourcemapping Devtools screenshot

Here's what that's about:

Impetus

//@ sourceMappingURL was found to have a conflict with IE whenever it was found in the page after //@cc_on was interpreted to turn on conditional compilation in the IE JScript engine. A legacy version of the HTML5 Shiv is one particular offender here.

Spec Change

The //@ sourceMappingURL syntax is defined in the Sourcemap V3 spec It was changed there to use //# syntax instead.

sourceURL

//@ sourceURL is also defined in the spec and was made to match the //# syntax for consistency. Follow through, for details on what sourceURL does. It's used by Ember's minispade, Google's concatenate.js, and others. In Chrome, sourceURL is supported for inline scripts and inline styles, in addition to evaluated JS.

Implementation in Browser DevTools = done!

  • Safari Inspector now supports //# for sourceMappingURL and sourceURL
  • Firebug's change has landed for sourceURL.
  • Firefox landed the change for sourceMappingURL. The sourceURL ticket is here.
  • Chrome DevTools landed the change for sourceMappingURL and sourceURL. It will also warn about use of the deprecated //@ syntax.

While these changes make their way to stable release, you can use both syntaxes simultaneously for full tool support or migrate immediately to the # syntax, depending on your needs.