Chrome's map to file system resource not working after update

Question

I can add a folder to the workspace (which doesn\'t seem to do anything, as far as I can tell), but the \"map to file system resource\" option seems to have been removed, and I

Answer 1

Thanks to others in this thread saying chrome is checking the modified date.

Adding this to .htaccess solved it for me

IndexOptions SuppressLastModified

Of course you would not want this to get into your production code as it could stop browser caching working.

Answer 2

I cleared the cache and it works now.

Previously, I opened my CSS file from my FTP client, then I dragged the containing folder into the Sources tab > Filesystem tab (without caring about any folder names nor structure, I just dragged the FTP clients containing folder into it).

The persistent mapping worked straight away, edits from the Chrome Dev Tools were saving on the server. After 30 minutes of fiddling and playing around, it just stopped working and the CSS resource got greyed out. The file icon with the green dot was not appearing anymore.

It didn't matter what I'd do, it would not work, but when I cleared my cache, it started to work again.

Answer 3

File mapping started working reliably for me once I turned on a devtools setting -- click the upper-right gear icon and check Preferences > Network > "Disable cache (while DevTools is open)"

Answer 4

I'm also using Chrome 63.0.3239.132 (Official Build) (64-bit) and as I wanted to use the DevTools Live-edit to edit some js files I saw that the option "Map to file system resource" is missing.

After some research I have found out that the Live-edit is perfectly working in Version 63, you just have to:

1. go to Sources and then FileSystem
2. add the folder with your code to the workspace

After that, a small little green point will be displayed near your files (it means the synchronization is ready) and the changes via DevTools can be persisted locally:

Answer 5

Chrome removed manually mapping to filesystem resources because of the new Workspaces 2.0 (See: https://developers.google.com/web/updates/2017/10/devtools-release-notes).

You should be able to drag and drop your folder into the sources tab and it'll link the files automagically.

However automatic mapping doesn't work in many situations and there is a Chrome bug to re-add manual mapping

Answer 6

As of today, with Chrome Version 63.0.3239.108 (Official Build) (64-bit):

The feature appears to be still broken, not working 'automagically' nor consistently with the previous behavior.

However, adding a folder that reflects the resource's URL as seen in the Network tab, make it work again. So if for instance, in the Network Navigator tab you have:

http://mylocal.site/wp-content/themes/mytheme/assets/sass/partials/_header.scss

You will just need to add the whole wp-content/ folder to the Filesystem tab to get the feature work again as expected.