Closing compiler source map = empty (Chrome) or invalid (Firefox) code window
I have a bunch of JavaScript files in the 'src' folder compiled by Closure Compiler in a single cw-around.js file in 'src / comp' with the generated source maps cw-around.js.map also in 'src / comp.
"// # sourceMappingURL = xxx" is at the end of the compiled cw-around.js file. xxx is a full HTTP link (local web server) to cw-around.js.map and tested successfully in a browser. {"version": 3, "file": "cw-around.js" is the start of the cw-around.js.map file
In the Dev / sources mode file list, I can see the linked files in Chrome and Firefox (when I put in the wrong xxx, I can only see the compiled cw-around.js file).
There, when I double click on the relevant file (cw-demodata.js, one of the JavaScript file name that was included in the compiled file):
-
On Chrome 58 or 61 ("JavaScript source maps are enabled" + "source map detected"), a blank code window is displayed .
-
In Firefox 54 ("show original sources" + "devtools.source-map.locations.enabled; true"), the HTML of my calling webpage is displayed .
What happened? How to investigate to determine what is wrong?
source to share
I found solution to my problem: compile js files and generate source map in the same directory as js files. The corresponding js files now display correctly in both Chrome and Firefox.
Earlier, after successfully opening the compiled js file and the source map, it seems that the browser was unable to find and load the non-compiled js files. It would be great to have an error message in the console to quickly identify the problem ...
source to share
I had the same problem and it came out of the sourceMapLocationMappings
wrong one. The source map has (next to "version"
and "file"
) an entry "sources": []
that tells the browser where the actual source file should be found (not the source map).
Since I, like you, compiled assets from a subfolder, the subfolder path was inside that source array (i.e. instead "sources": ["foo.js"]
was "sources": ["src/comp/foo.js"]
). The browser tried to request src/comp/foo.js
from my webserver and it clearly wasn't there because it foo.js
was there directly.
The solution to this is setting the correct one sourceMapLocationMappings
. Using the cli compiler cli you do it with --source_map_location_mapping "\"src/comp/foo.js^|foo.js\""
. Using ant task you add sourceMapLocaionMapping="src/comp/foo.js|foo.js"
to the task invocation.
This allows it to be configured "sources"
directly on ["foo.js"]
, which is then served by your webserver and can be found using the dev tools.
Edit: added double quotes --source_map_location_mapping
in according to fooobar.com/questions/2162392 / ...
source to share