15

Is Local file mapping dev tools alternative to Charles proxy in firefox? I am trying to map a remote server resource to a local file, but it doesn't seem to be working. The console statements and changes in the JS file doesn't seem to be applied when I reload the page.

I can see the local folder and file listed in the sources folder. Also, see that the sources doesn't show the original JS file. But I see this message in the sources tab for the local file.

Workspace mapping mismatch

Rest of the warning states that the file in local folder is different from the remote loaded file. Why is that a problem, wouldn't that be always the case, since you want to edit the file locally?

What am I missing? Any pointers to fixing this? Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?

I tested this again with a simple html page with a single js file having a simple console log statement - "loading remote file ...". This file is mapped to a local js with a different log statement "loading local file.." However, I still see the log message from the remote file.

Added snapshot from dev tools sources tab for more context. Sources tab shows the local folder and file correctly, but shows the mapping warning. Also notice that sources doesn't have the remote.js file anymore. Snapshot from dev tools sources tab

3coins
  • 1,322
  • 3
  • 11
  • 30

2 Answers2

15

Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?

I don't think this is accurate. When you map a file on a server to your local workingspace, Chrome acts as a sort of editor for your local files. You can edit the files through Chrome and Command+S to save your local files. But nothing has changed on the server. It doesn't update the files on the server, and it doesn't tell Chrome to "Use my local files instead of what's on the server".

What many people do is automate the deployment process so that when a local file is updated (either through Chrome + Workspace Mapping or just simply by editing in your editor), your working copy gets deployed. That way, next time you reload the browser, you'll see your edits.

Edit: From the workspace documentation:

And you can map resources served from a local web server to files on disk, so when you change and save those files, you can view them as if they were being served.

I think the key here is local web server. I did a bit more digging and found this dev tools docs issues, with a comment effectively saying that what you're trying to do isn't supported:

The DevTools currently does not do resource substitution. It can simply map the remote files to your local copy so if things are kept in sync (like using a local server on-system) then when refreshing your modifications can persist.

Looks like you'll need a way to deploy after making changes or have your devtools workspace point to the server docroot.

dontGoPlastic
  • 1,772
  • 14
  • 22
  • 3
    Thanks for pointing to the correct resource. Seems like what I want is not supported. – 3coins Oct 22 '14 at 22:40
  • 5
    I wanted to do asset substitution to avoid excessive commits of script files when working in SharePoint and was disappointed to learn Chrome doesn't have this feature. I ended up using Charles Web (http://www.charlesproxy.com/documentation/tools/map-local/) which works great. – Jared Nov 19 '14 at 21:52
  • Does anyone know of an extension or other way to do resource substitution? – Breck Apr 15 '15 at 18:35
  • 3
    Fiddler's AutoResponder feature is a great free alternative to Charles Proxy, as well. http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder – Jared May 17 '16 at 21:00
  • 1
    @Jared thank you for this great alternative; it works great using both together chrome workspace + fiddlers autoresponder! – eeezyy Mar 30 '17 at 13:28
  • https://dutzi.github.io/tamper/ is potentially a good open-source alternative, but last I checked it had a bug or two that needed to be fixed – Ben Creasy May 10 '17 at 21:10
  • check out https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii?hl=en – Bernhard Riegler Sep 06 '17 at 15:27
  • A question on using Fiddler for exactly this: https://stackoverflow.com/q/17033990/10245 – Tim Abell Sep 08 '17 at 16:32
3

The Charles Proxy "map local" feature was requested of the Chromium team in this issue and the team declined to pursue it.

Ben Creasy
  • 3,825
  • 4
  • 40
  • 50