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

• Source maps cannot be developed for inline JavaScript (because there is no URL for the original JavaScript).
• If your resources already have source maps, we ignore them and the source map we add goes back to the URL you specify in HTML. (Issue 930)

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.