Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load separate sourcemap file in chrome dev tools

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

like image 358
Greg Avatar asked Dec 04 '15 11:12

Greg


People also ask

How do I use Sourcemap in Chrome?

To enable source maps in Google Chrome, go to Developer Tools, click the little cog icon, and then make sure that “Enable Javascript source maps” is checked. That's it.

How do I debug using Sourcemap?

Enter the Sourcemap A sourcemap is a mapping between the generated/transpiled/minified JavaScript file and one or more original source files. The main purpose of sourcemaps is to aid debugging. Basically, if there's an error in the generated code file, the map can tell you the original source file location. That's it.


1 Answers

I know question is old, but had it myself nevertheless. Here's how you do it in Chromium 63

Add source map

  1. Open Debugger
  2. Right-click in source code area
  3. Select "Add source map…"
  4. 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.

like image 66
Andrey Avatar answered Oct 10 '22 14:10

Andrey