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 can no longer live-edit css files.

Is this a bug, or has the process for mapping css files been changed?

This talk (https://developers.google.com/web/updates/2017/10/devtools-release-notes) says that the new version uses "magic" to map remote files to local ones, but I can't seem to get it to work at all.

For reference, I'm trying to map a reddit css file to one on my own computer. It worked fine on a previous version of Chrome (basically I add the folder, and map the css file inside it, which has been renamed to have the same name as the remote one) but not on the new one (Chrome 63)

Answer 1

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 2

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 3

For me, the problem turned out to be the presence of the copyright symbol © in the file headers (which affected just about every file). With this character in the files, devtool refused to map the files but with it removed, the files map fine.

Answer 4

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 5

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 6

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 7

I've just fiddled around with a problem, where only some files got mapped to my local workspace.

Turned out that Google Chrome also checks and compares the last modified date of your files.
If the file on the server has a more recent date than your local copy, this file won't be mapped.

I deleted the Bootstrap file on the server side and uploaded my local copy, which has an older last modified date. Google Chrome instantly mapped the file to my local workspace.
Out of curiosity I ran touch bootstrap.min.js on my server to set the last modified date to today. This broke my file mapping again.

Answer 8

Had the same problem, but when my source maps included sourcesContent, the file mappings were automatically made and I could live edit my scss. Apparently chrome uses the content to find the right file.

node-sass --source-map-contents

Answer 9

I had the same problem so I downgraded to Chrome 62 (preferences, history, extensions and so on are preserved).

1. Download Chrome 62 from
   https://www.slimjet.com/chrome/google-chrome-old-version.php .
2. On OS X trash /Applications/Google Chrome.
3. Switch off auto-update by setting "defaults write com.google.Keystone.Agent alwaysPromptForUpdates 1". Default is 0.
4. May be you have to set "defaults write com.google.Keystone.Agent checkInterval 0" too. Default is 18000.
5. Install Chrome 62 as usual.

After starting Chrome 62 open "About Google Chrome". Chrome is checking for updates, but will prompt you to confirm.

Answer 10

The "Map to File System Resource..." menu item is missing. There appears to be no way to map files. It is completely broken as far as I can tell.

Answer 11

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.