"Fossies" - the Fresh Open Source Software Archive

Member "incubator-pagespeed-mod-1.14.36.1/html/doc/filter-source-maps-include.html" (28 Feb 2020, 5711 Bytes) of package /linux/www/apache_httpd_modules/incubator-pagespeed-mod-1.14.36.1.tar.gz:


Caution: In this restricted "Fossies" environment the current HTML page may not be correctly presentated and may have some non-functional links. You can here alternatively try to browse the pure source code or just view or download the uninterpreted raw source code. If the rendering is insufficient you may try to find and view the page on the incubator-pagespeed-mod-1.14.36.1.tar.gz project site itself.

Include JavaScript Source Maps

Configuration

The 'Include JavaScript Source Maps' filter is enabled by specifying:

Apache:
ModPagespeedEnableFilters include_js_source_maps
Nginx:
pagespeed EnableFilters include_js_source_maps;

in the configuration file. If you are using a version before 1.10.33.0, you must also enable the new JavaScript minifier:

Apache
ModPagespeedUseExperimentalJsMinifier on
Nginx
pagespeed UseExperimentalJsMinifier on;

Description

Source maps are files that tell browsers how to map between a minified JavaScript file and the original, readable version so that you can see the readable version while debugging minified production code. For more information on source maps in general, see Ryan Seddon's Introduction to JavaScript Source Maps or the specification proposal.

This filter constructs a source map from the minified JavaScript to your original JavaScript files and adds a comment specifying the URL for this source map.

Example

For example, if the original JavaScript file looks like this:

console.log('External script start');

// Browser/window data to report
var data = { 'User-Agent': navigator.userAgent,
             'Platform': navigator.platform,
             'Date': window.Date,
             'Dimensions': window.outerHeight + 'x' + window.outerWidth
           };

// Construct HTML list for data.
var dl = document.createElement('dl');
for (key in data) {
  var dt = document.createElement('dt');
  dt.innerText = key;

  var dd = document.createElement('dd');
  dd.innerText = data[key];

  dl.appendChild(dt);
  dl.appendChild(dd);
}

// Add list to page.
var content = document.getElementById('content');
content.appendChild(dl);

console.log('External script finish');

then the rewritten JavaScript would look like this:

console.log('External script start');var data={'User-Agent':navigator.userAgent,'Platform':navigator.platform,'Date':window.Date,'Dimensions':window.outerHeight+'x'+window.outerWidth};var dl=document.createElement('dl');for(key in data){var dt=document.createElement('dt');dt.innerText=key;var dd=document.createElement('dd');dd.innerText=data[key];dl.appendChild(dt);dl.appendChild(dd);}var content=document.getElementById('content');content.appendChild(dl);console.log('External script finish');
//# sourceMappingURL=http://example.com/script.js.pagespeed.sm.0JT2VEfKJs.map

and the source map would look like this:

)]}'
{"mappings":"AAAA,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAGpC,GAAG,CAAC,IAAK,CAAE,CAAE,YAAY,CAAE,SAAS,CAAC,SAAS,CACjC,UAAU,CAAE,SAAS,CAAC,QAAQ,CAC9B,MAAM,CAAE,MAAM,CAAC,IAAI,CACnB,YAAY,CAAE,MAAM,CAAC,WAAY,CAAE,GAAI,CAAE,MAAM,CAAC,UAClD,CAAC,CAGZ,GAAG,CAAC,EAAG,CAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CACrC,GAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAE,CAChB,GAAG,CAAC,EAAG,CAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CACrC,EAAE,CAAC,SAAU,CAAE,GAAG,CAElB,GAAG,CAAC,EAAG,CAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CACrC,EAAE,CAAC,SAAU,CAAE,IAAI,CAAC,GAAG,CAAC,CAExB,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAClB,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CACpB,CAGA,GAAG,CAAC,OAAQ,CAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAChD,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAEvB,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC","names":[],"sources":["http://example.com/script.js?PageSpeed=off"],"version":3}

Limitations

Risks

This filter should not have any effect for visitors to your site. For developers, the biggest risk is that source maps are incorrect or out of date, in which case the browser will show you a completely incorrect location when debugging JavaScript. Clearing the cache or turning off source maps should fix this problem.