42

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

Greg
  • 1,851
  • 2
  • 19
  • 21

2 Answers2

54

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.

Andrey
  • 10,088
  • 1
  • 16
  • 10
  • 33
    I'm not seeing this option in Chrome 71 - has it been removed? – skeggse Feb 20 '19 at 18:03
  • Maybe you could add a bullet list of steps, because it is not obvious what it going on. It is also not clear whether this is also just for sites running locally. – JoeTidee Apr 17 '19 at 09:27
  • 4
    This also works with file based path, e.g. file:///C:/path/to/js.map. – whoasked Dec 17 '20 at 19:40
  • @skeggse It only shows in non-formatted source code. You probably already have the :formatted version open. – Daniël van den Berg Jan 26 '21 at 14:32
  • 3
    @skeggse Had the same issue, fixed it by going into the dev tools Settings > Preferences > Sources and enabling Enable JavaScript source maps, then the Add source map... menu item appeared. – Enchiridion Feb 04 '21 at 18:58
  • 3
    Same for me, it does nothing. Tried loading relative URL, absolute URL, and even local path to the location of my code. None of them do anything, none of them added any of my very valid files. – DiggyJohn Mar 11 '21 at 14:57
  • 4
    @skeggse I am on Chrome 101 and I found it. 1) You have to have "source maps" enabled in the settings. 2) You should right click on the code itself and find "Add source map". For me it's in the middle of the 7 options, not the first one! – Aidin May 20 '22 at 03:26
  • 1
    Can't find it in Chrome 103. Source map enabled in settings. When I right-click on the file I don't see that option. – Megas Jul 06 '22 at 10:59
  • You have to have the option set AND select the file on which you want to load the map for. – Uriel Aug 18 '22 at 20:05
  • 1
    Thank you @Aidin, I think that can be a separate answer – Christian Vincenzo Traina Aug 22 '22 at 13:39
8

August 2022, Chrome 104:

  1. Open Chrome Dev Tools
  2. Go to "Sources" tab
  3. Find the .js file you are looking for. Click on it.
  4. Right click somewhere ON THE SOURCE.
  5. Find "Add source map..." option there.

enter image description here

(I first wrote this as a comment to the other answer, but @christian-vincenzo-traina suggested having it as a separate answer.)

Aidin
  • 25,146
  • 8
  • 76
  • 67