How to get Chrome to reload source maps?

Question

I am on Chrome Dev 27, and in the Dev Tools settings checked Disable cache. When I reload a page, Chrome properly reloads all the resources used by map page, including the .js files. However, it doesn't automatically reload the corresponding source maps .map. Monitoring the HTTP traffic between Chrome my app, on subsequent page load, I don't see any request from Chrome for the .map files. How can I get Chrome to also reload the source maps?

The issue with Chrome not reloading the .map file is that it also won't reload the file from which the .js was generated, which in my case happens to be a CoffeeScript file (.coffee), which means that when debugging, in the Sources tab I am looking at an old version of the .coffee file, even if the new code (from the .js) is running.

Cohesive

Answer 1

I had this same issue just today. The wait to solve it for me was to close the coffee file's tab under sources, go to the network tab, right click, and select "Clear Browser Cache"

This fixed it for me.

That said, the mapped files don't always get "stuck" in cache for me... Only sometimes, and when they do, the clear cache trick fixes it.

Shill

Works as well when TypeScript files (*.ts) are not refreshing in Chrome. Thanks for this. – Desmond

Yea.. it seems to get stuck sometimes... 2 years later same problem with TypeScript and VisualStudio.... This should be the answer as it helps solve the stuck cache problem – Caroche

Worked for a SASS project where the CSS was refreshing, but it refused to reload the source-map, even after restarting the browser. They need to fix this. – Sayres

Answer 2

Just had the same issue and found some additional solutions:

According to this commit and this bug report for chromium, the problem is solved and should not affect one of the next builds.

A little bit simpler solution for this problem than clearing the whole Browser Cache:

Open the source map in a browser tab and do a hard reload (depending on OS, try CTRL+F5). This refreshes the file and keeps the browser cache.

An alternate way and perhaps a good practise is to hack the source map generation by adding a parameter like ?build=12345. Refer to your build tool on how to manipulte the filename of the source map.

If you have access to the server config or a .htaccess, you could set the header Cache-Control: no-cache for the source map extension like '.js.map'.

Aryanize

FWIW, I experienced stale source maps in a recent Chromium. A force reload didn’t help, however, removing the latest hour of browser cache did. I haven’t yet tried your trick, though. But according to the bug report you linked to, the mechanics between script and source map have changed. – Dalesman

Answer 3

I resolved the issue by deleting the .map file and performing a hard reload (CTRL-F5).

I didn't want to lose all my history!

Clarification based on @jdbertron comment: my issue occurred when developing and debugging a React app. IIRC I deleted the .map file from the local dev environment (not in my browser history), then it was regenerated. That resolved my issue.

Puberulent

It would help if you told us where that file is. – Hahnemann

Answer 4

Go to settings -> Show advanced settings -> Clear Browsing Data -> Check only "cached images and files" -> Click "clear browsing data"

This will clear the source maps you have cached in the browser without deleting all the cookies.

Lining

Hate to lose all my history! – Puberulent

How is the above losing your history, @madannes? – Bondmaid

Sorry.. should have been more clear. I mean to say, I like this answer better because I hate to lose all my history as would happen w/ "Clear Browser Cache". Too bad I can't see how to edit my previous comment =) – Puberulent

You dont loose your history, only the cache. Thats why i said 'Check only...' – Lining

@Puberulent You can't edit it, but you can delete it. – Sorn