[wp-trac] [WordPress Trac] #63887: Add sourceURL to inline scripts and styles

[WordPress Trac]

#63887: Add sourceURL to inline scripts and styles
-----------------------------+-----------------------------
 Reporter:  jonsurrell       |      Owner:  (none)
     Type:  enhancement      |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Script Loader    |    Version:
 Severity:  normal           |   Keywords:
  Focuses:  javascript, css  |
-----------------------------+-----------------------------
 Script and style tags can add a `sourceURL` comment to name them for
 developer tools. This is similar to `sourceMappingURL` that are often used
 with JavaScript compilers. [https://sourcemaps.info/spec.html They are
 described in this specification.]

 Messages and styles that come from inline scripts and styles are often
 difficult to understand and debug because they typically point to part of
 the current URL, like `(index):1530` or `?p=1535:1530`. These point to a
 line number in the page HTML and are confusing and inconsistent across
 pages.

 Inline scripts and styles can provide a `sourceURL` to provide a
 consistent name and simplify debugging, for example `//# sourceURL
 =example-js-after`. It seems to be supported in Chrome, Firefox, and Edge
 at this time. Safari does not appear to support it.



 Some examples from developer tools in Chrome:

 **Inline styles before**

 {{{
 body { (index):475
     background: red !important;
 }
 }}}

 **After**

 {{{
 body { example-inline-css:2
     background: red !important;
 }
 }}}

 -----

 **Inline scripts before**

 {{{
 Uncaught Error: Oh no!
     at (index):1401:7
 }}}

 **After**

 {{{
 example-js-after:2 Uncaught Error: Oh no!
     at example-js-after:2:7
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63887>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform