Buscar este blog

domingo, 8 de enero de 2017

Chrome DevTools persist changes on page reload

Chrome DevTools allow you, amongst much other things, to edit HTML and JS files and save them in a workspace.
When debugging, you can add a local folder as a workspace. Then you can map any JS file served by the server to a local file in this workspace. Any change you made in this file, by using chrome editor, is automatically saved in the workspace.
You can check the full explanation here.

There is a problem though, each time you reload the page, the browser request again de JS file and your changes are "lost". Indeed, the changes still are saved in the workspace, but you see again the file loaded from the server.


There is a solution for this. Just set the workspace as the server resources folder. In this way, you edit the same file the browser is loading.
But what happens when you does not have direct access to the server resources folder?


My solution is to combine chrome DevTools with Fiddler Autoresponder.

Fiddler is a proxy tool that captures all http traffic and allows you to inspect and change it. With the autoresponder option you can return a local response when the browser request some URL, based on a set of rules. In this way you can build your own responses or modify some previous ones, instead to request them to the server.
The problem is that the fiddler response file is not editable by chrome. The fiddler file has two parts: headers and body, being the body the JS file. So, you need two files, the fiddler response and the JS body.


You edit the JS file by using chrome editor, then copy the body to the fiddler response file, and when the page is reloaded fiddler will return the modified response.

Instead editing the fiddler response file manually, I created a python script wich inspects the chrome workspace folder looking for JS files. For each of them, the script creates a fiddler file response by appending a set of headers. These headers are also in other common file.

This script read recursively all files in a root folder, keeping only th JS files. For each one create the corresponding fiddler response file by appending a common response headers.

You can check the script here: https://github.com/evazquezma/python/blob/master/fiddlerResponse/generateResponses.py