Modify local files while browsing external hosted version

[Luis A. Gomez]

Maybe I'm doing something wrong but it seems that it's not possible to map my local version of the application with the version hosted on an external server.

The idea would be to be able to modify your local files while making the changes through Chrome on let's say http://www.myawesomeapp.com instead of having to access it through a local server.

[Ryan Ackley]

This should work. Did you ever figure this out?

[_shawn_]

I'm also trying to do the same thing and running into problems. I think the issue is that I was expecting the extension to replace the reference to the remote stylesheet in the remote page with the contents of the local stylesheet that was mapped to it.

For example the first thing I did after installing the extension was try to edit site.css at http://tin.cr/. Obviously I don't have access to your web server, but I was expecting that mapping http://tin.cr/site.css to a local file (eg C:\tincr\site.css) and then editing that local file would modify the page. But that doesn't seem to work, I'm assuming because we're not actually modifying the site.css that the web page is referencing so the changes don't take effect.

If this is supported it would be great to get some clarification on what I might be doing wrong. If this isn't supported, it would be great to add support for replacing the references to remote resources (eg http://tin.cr/site.css) to the local files that are mapped (eg C:\tincr\site.css) so you can edit and preview changes to a remote site running on a remote server while only working with local files. It's sometimes the case that a designer doesn't have access to the remote server or that you don't want to have to set up a local server just to hand off a few CSS edits.

As an aside, one thing that is helpful about having the (now deprecated?) Configuration File mapping (or something like it that supports regex), is the ability to map a file with a cache-busting timestamp or hash to a local file. For example it is common for frameworks such as Rails to generate a reference to a css file that might look like "/styles/site.css?[hash]" or "/styles/site-[hash].css" and it can be nice to maintain mappings even when part of the file name changes.

Thanks for a great extension Ryan!

[fritzw]

Yep, this is exactly my use case as well. Modifying CSS files locally without actually setting up and hosting the whole website (a large forum) on my local machine. When you try this with the current version, Trincr will complain "Content for url [...] doesn't match local file [...]" on the console, which is true because obviously the file on the server doesn't change. However, I'd like to have the local version instead of the version returned by the server.

If you want a quick hack that always uses the local version of the file, it's just a single line to change. Have a look at this commit.

Now when trying to implement an option to turn this on and off (see this WIP commit) I ran into a problem: the projectManager running in background.html don't seem to have any way to access the projectState variable where such a setting would sensibly be stored. So I changed a few functions to pass an additional boolean parameter useLocalContent to the checkResourceContent in ProjectManager.js. Also, the additional value in the projectState variable was not loaded automatically, so I had to touch a few more sections of the code that would normally have nothing to do with the change. Currently I got it to save the value on change, but upon reopening the page that I Tincr'd with, the useLocalContent checkbox will always reset to checked, regardless of its previous state. Quite an ugly "nearly fix" is all I can say. There must be a way to do this more cleanly. Any ideas, Ryan?

Cheers, Fritz

[Ryan Ackley]

My only concern is there is a risk of contaminating your local files with outdated content from the remote server. Remember, it goes both ways.

Other than that, I still like this idea, I just don't have time to work on it. I haven't looked at the code in a long time. If the current data model doesn't work, then just refactor. Easier said than done but that is the best advice I can offer.

[fritzw]

I see your concern, however in my quick tests that didn't seem to be a problem. As soon as I pressed F12 to open the developer console, the Tincr dev-tools-page initialized itself and replaced all resources with the local version. In that state, no outdated remote version of these files should be in the browser anymore. I'm not sure however if there are other parts of the code that could also replace the resource content. I'll play around a bit more and watch out for any strange behaviour.

[fritzw]

Okay, I started a fresh attempt at issue6_2 and got it to save and load the state of the useLocalContent variable, using some refactoring of the loadProject routine. So at the moment it's in a "works for me" state. However, since I don't have an in-depth understanding of the code I'd rather not file a pull request before it has seen some more testing and/or review.