18

I have a remote webpage that loads a remote JavaScript file called script.js. I don't have immediate access to the remote filesystem to make changes to test something.

So I copy script.js to my local drive, and in Chrome Dev Tools I add my local folder to the workspace. Then I right-click on my remote script.js file and pick Map to File System Resource.... I pick my local script.js.

So now I would expect my locale changes to script.js to override the remote script.js, right? This way I can make some changes to my local script.js and when I reload the page I can see the changes being reflected on my page.

However in the Sources tab, when selecting my local script.js I see the warning at the top:

Workspace mapping mismatch

The content of this file on the file system:

file:///Users/me/test/script.js

does not match the loaded script: 

http://someserver.com/js/script.js

Possible solutions are:
- Reload inspected page
- Check that your file and script are both loaded from the correct source and their contents match

So is this telling me that my local script.js needs to be exactly the same as the remote script.js? If so, then what is the point of the local resource?

Isn't it there so that you can make changes to it and see those changes reflected in the browser? If it has to match the remote file, then you must already have access to be able to edit the remote file, in which case you would be making your changes there and not on the local file. If that is the case, then what is the point of having the local resource mapped?

Am I missing something here? Is it not possible to make temporary local changes to a file in Chrome Dev Tools and have those changes be reflected when the page is reloaded? I thought that was the purpose of the Local File System Resources.

Jake Wilson
  • 88,616
  • 93
  • 252
  • 370
  • 1
    Thanx for posting. Having same issue with javascript files but no problem with css files. was about to post my own question about this. – GnrlBzik Mar 31 '15 at 14:27
  • At least it could just notify, and it seams like it is blocking execution of content. As none of my changes get to execute. – GnrlBzik Mar 31 '15 at 14:29
  • Same behavior in * Version 41.0.2272.104 (64-bit) * Version 43.0.2351.3 canary (64-bit) – GnrlBzik Mar 31 '15 at 14:30
  • Are you sure DevTools supports this? Pretty sure saving live edits only works with local files: http://stackoverflow.com/a/22624969/726378. How else would the browser be able to persist the changes across page loads? – rstackhouse Apr 02 '15 at 16:55
  • @rstackhouse If you map a remote file to a local file, then dev tools should be smart enough to load the local file instead of the remote file when you reload the page. At least that is what I was assuming this functionality is for. But maybe I'm wrong. – Jake Wilson Apr 02 '15 at 19:07
  • @Jakobud, unless I am mistaken, this functionality is for being able to modify code as you debug it. I get the need to debug production code, but I simply don't think the tool is that smart. – rstackhouse Apr 02 '15 at 21:12
  • @Jakobud, using [Save As](https://developer.chrome.com/devtools/docs/authoring-development-workflow#save-as) will definitely let you save out any changes you've made, but it won't reload them if you refresh the page. – rstackhouse Apr 03 '15 at 10:47
  • @Jakobud the [Caveats](https://developer.chrome.com/devtools/docs/workspaces#caveats) section in the docs (last bullet point) suggests what you seek is possible, but I can't get it to work without showing "Network mapping mismatch". ["Your changes still persist to disk and are reapplied if you continue editing in Workspaces."](https://developer.chrome.com/devtools/docs/workspaces#caveats) – rstackhouse Apr 03 '15 at 11:00
  • @Jakobud perhaps this would be instructive: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/LvULpPA9F9c – rstackhouse Apr 03 '15 at 11:03
  • Yeah probably. I thought I was doing something wrong but I think I am just misunderstanding the purpose of the functionality. – Jake Wilson Apr 03 '15 at 15:29
  • FYI, I had this same issue and some coworkers helped me figure it out. I respectfully do not agree with the below answer however I do not have the technical expertise to relay any solutions. I believe I am now currently doing what you describe however, editing a local file and seeing changes to it reflected on a running instance of a server. – joedragons Jun 26 '15 at 21:55

1 Answers1

13

Workspaces is built to map the same file that's in file and served over the network. (like serving ~/code/app to localhost:8000).

It will not work for serving a local file as a replacement. There are some Chrome extensions for this, I recommend Flip the Script.

Paul Irish
  • 47,354
  • 22
  • 98
  • 132
  • Paul Irish, I get this error if I am serving ~/code/app over localhost:8000. I have even gone so far as to use opendiff to see if there were any weird line ending differences or anything. Nothing. 0 differences. It is intermittent too. Sometimes it works (like when I have restarted my 2012 macbook and started chrome afresh), and sometimes it doesn't. – rstackhouse Apr 23 '15 at 16:50
  • 3
    The docs seem to say the opposite at: https://developer.chrome.com/devtools/docs/workspaces – Paul Legato May 19 '15 at 02:33
  • 1
    Yeah, the workspaces docs make it seem like this should work. So confuse. But, like Paul said, there are Chrome extensions. Switcheroo Redirector worked for me: https://chrome.google.com/webstore/detail/switcheroo-redirector/cnmciclhnghalnpfhhleggldniplelbg/related?hl=en – Dan Tello May 26 '15 at 22:50
  • @Paul Irish this is very confusing, sometimes I can make changes to a JS file that was loaded by the page and these changes persist and sometimes I can't. In other words, I have been able to map a locally saved version of an asset to a remotely served page but yeh... only sometimes. The behaviour does not seem to be consistent. It would be really nice to see some solid documentation about this. – Cool Blue Jul 18 '15 at 13:53
  • Really confusing for me, too. Official document should describe how to map remote JavaScript file to local JavaScript file with serving over localhost:8000. – kyanny Aug 28 '15 at 16:31
  • JFYI, Switcheroo Redirector does NOT work with local files (file:///) – Dmitry Gonchar Mar 30 '16 at 12:03
  • 1
    So what's the point of serving the exact same file that's already online? – wortwart Jul 06 '16 at 09:42