Simple Augmented Browsing for Website Development and Troubleshooting
Often times developers face the challenge of quickly making a few trivial changes to an existing website just to see how a change of an image or a css style would look. We can make these changes in a development environment, no problem there. But what if you have to do it to a live website, and the changes cannot impact any other user except yourself?
Augmented browsing techniques can come to our rescue. You might have used GreaseMonkey, a popular add-on that lets you change the look and feel of any website. In short, it installs scripts that read the DOM of the loaded html and alter its html/css etc. But creating and running the scripts might be overkill or cumbersome to work with, especially if you need to test with many different browsers.
Let’s take an alternative approach. How about intercepting the incoming resource file requested by the webpage and loading a different resource file that is stored in your local drive? aha!
For this I use my favorite tool, Fiddler. It is a debugging proxy that sits between your browser and the server and intercepts calls between them. The tool has many features that make a developer’s life easier, and we are going to use the feature “AutoResponder”.
Here are the steps to follow to intercept an image file and point to your own image.
a. Download, install & run Fiddler
b. Select the AutoResponder tab, check ‘Enable automatic responses’, and check ‘Unmatched requests pass-through’. This says that if no rule matches the incoming resource then do not intercept and use the file served from the web server.
c. Get the url of the image on the page you want to change. You can probably find it by viewing the page’s source code.
d. Have your replacement image in your local drive ready.
e. Click Add Rule button (or you can import the rule, if you previously exported it).
f. In the bottom of the window, type in the relative URL of the source image in the first dropdown.
g. For the second one, type in the local file path of the image file to be used in place of the original one.
i. Refresh the webpage, voila! new image in place of the original!
j. You may turn on/off the interception by check/uncheck the checkbox in front of each of the rules you specify
To alter a .css or .js file, first download the file from the web server and store it in your local drive, add the interception rule, do modifications to that local file and refresh the page to see the change.