When do browsers download the sourcemap for a minified file?
I am struggling to find documentation for any browser on if/when they download a minified file's sourcemap (an external file ending in a .map extension, like scriptname.min.js.map).
I am trying to decide how verbose a map file I want to create (which drastically affects the file size) but I don't see where the file is downloaded in Google Chrome (not showing in the network tab of Dev Tools) yet it is available when I debug in the source tab.
Source Maps are downloaded and attached to the browser when you open the developer tools. Until then the browser is not aware of the sourceMap.
There is a code reference to the Chrome's Dev tools
https://chromium.googlesource.com/chromium/src/+/refs/tags/75.0.3770.67/third_party/blink/renderer/devtools/front_end/sdk/DebuggerModel.js
this._sourceMapManager.setEnabled(Common.moduleSetting('jsSourceMapsEnabled').get());
Short Gist of what happens in the above code is
Once Devtools is attached the modal triggers and enables the sourceMapManager. The sourceMapManager manages the sourceMap in Chrome. Once the SourceMapManager is initialized it looks for the #sourceMapUrl downloads and attaches the map to the debugger.
Update Note: It's not a practice to add sourcemap's to a minified file, unless the sourcemap is served from a private network. This is for various reasons security, obfuscation etc. But this is just my opinion,it varies depending on your actual requirement. For Example: If you have any error tracking tools which needs the code to be attached, then you will have to attach the sourcemap.
Related
Currently I added sourcemap to production version of website in order to track errors/bugs from other tools (such as SEntry).
But I dont want everyone could get my website's structure on the internet. So how could I config sourcemap only visible for SEntry or some request URL?
Don't upload them to your web server.
Sentry supports uploading a source map to them directly. For Chrome Developer Tools, just right-click your minified file and click "Add Source Map".
My deployed JavaScript application raises an exception. The Javascript code is obfuscated. I would like to know, which line in original source code raises an exception. Source maps are not deployed, so Chrome Devtools can't connect them. I may have source maps on my localhost.
So basically I would like to add source maps from my machine to the browser in order to know the line number, where exceptions occurs.
I tried Add Folder to Workspace and Map to File System Resource. It does not help. An exception is visible in browser's console, but it still points into obfuscated javascript source and desired line number is not detectable.
I may do something wrong. Any help is appreciated (including additional extension or other browser usage).
As powerful as Workspaces are, there are some limitations you should be aware of.
Limitations
Only style changes in the Elements panel are persisted; changes to the DOM are not persisted.
Only styles defined in an external CSS file can be saved. Changes to element.style or to inline styles are not persisted. (If you have inline styles, they can be changed on the Sources panel.)
Style changes in the Elements panel are persisted immediately without an explicit save -- Ctrl + S or Cmd + S (Mac) -- if you have the CSS resource mapped to a local file.
If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces.
You must use the full path to a mapped file in the browser. Even your index files must include .html in the URL, in order to see the staged version.
https://developers.google.com/web/tools/setup/setup-workflow
I am having a Microsoft Edge specific JS error, which is in a callback that jQuery uses. The callback lives in a file that is pulled in remotely from a CDN. When I open Edge's debugger and try to open that file, it does not appear in the list, and neither do any other remote JS files, only files that are local to the website.
I can in fact find these remote files in the chrome debugger, is this an Edge bug or is there some kind of setting I do not know about that hides remote files?
Is it possible to load an external source-map file (JSON), not included in the minified JS file used on a website?
So far the only ways I know of to include a source-map for a particular js file is to either inline it, add a link in comments or set the path in HTTP header.
So I wonder - is it possible to load a source-map file that can't be accessed via HTTP? For instance - load it from my local drive, and point it to the js file it is supposed to be mapping?
Cheers
I know question is old, but had it myself nevertheless. Here's how you do it in Chromium 63
Open Debugger
Right-click in source code area
Select "Add source map…"
Enter URL to source map file
if browser is able to download it and process it then sources appear as entry in source tree.
PS built with hidden source (separate files, no source comment)
PPS does not matter where files are hosted, because it is URL. Must be accessible by browser.
August 2022, Chrome 104:
Open Chrome Dev Tools
Go to "Sources" tab
Find the .js file you are looking for. Click on it.
Right click somewhere ON THE SOURCE.
Find "Add source map..." option there.
(I first wrote this as a comment to the other answer, but #christian-vincenzo-traina suggested having it as a separate answer.)
I am debugging some 3rd party app and I would like to dynamically reload/replace some of the content of the tags, however by inspection properties like innerHTML are not set and I can't see anything from the javascript developer console that would suggest a property of method to get the javascript content.
The file is dynamic so re-downloading the file it not suitable in this case.
There are some other questions on SO which address this problem with no good answer for me, for example it is suggested to pull the content again using an XMLHttpRequest or some jQuery. However this is not suitable for my purpose.
How can I get the content of the file specified as the 'src' of a <script> tag?
However I can see that google chrome can inspect the loaded source content of the script tag in the developer console, here is a screenshot;
Any idea how it is done? I am happy to use the google chrome devtools, or some platform/browser specific extension as I am just using this for debugging.
I presume it is accessing some local cache of the downloaded src, but I would also expect that cache file or value is inspect-able from google chrome somehow...?
DevTools are deeply integrated into the browser and do that with help of C++ code in WebCore. In your case DevTools just be notified when browser makes a request, receive the response, receive the data etc.
Chrome DevTools AKA Safari Web Inspector has two parts.
Backend (~26kloc of C++ code) and Frontend (55kloc of js code).
You can see the API between WebCore and DevTools bakend at InspectorInstrumentation.h.
Also there is an API between Backend part of DevTools and Frontend part of DevTools.
It is described in Inspector.json. You can use this API and write your own Frontend or implement an extension which does something with help of DevTools backend.
The docs at the project's documentation page.
The latest video about the project at Google IO 2011.
#cwallenpoole tells how to get the js code.. simply open it in browser and if it is minified simply include (copy contents of js file) it in a script tag in html doc, go to chrome dev tools, open the scripts pane and navigate to the copy pasted script source and press the curly brackets at the bottom bar of dev tools and see the magic :)
You can get the source of any JavaScript file by simply going to that URL -- this is one from StackOverflow: http://cdn.sstatic.net/js/stub.js?v=845b73ac2eff
The problem, of course, is that it is minified when viewed that way, which leads to long, annoying headaches, but it is still accessible.