Using Dev Helper Chrome extension for local development

A while ago I decided to spent some time building developing extension for Google chrome that would combine most of the features developer needs, and I ended up building the dev helper Chrome extension.

 

I added some cool features like site profiling which draws charts showing asset load time sorted by domain, so you could immediately see which resource is taking the most time to load.

But at this point I didn’t yet realize that the extension could be used in quite interesting way, till the time when I had to work on a website that literally took a minute to compile and load in local environment.

I was exploring options to speed up my development at least for JavaScript and CSS, and it came to my mind that I could work directly in production (which is fast) and use my extension to set up rewrite rules, and load all assets (JavaScript, CSS, images) from my local server. By doing this, I could modify and add code without even deploying anything. Basically active development right in the production website, without pushing even a single file and without risking of breaking production environment.

How this works:

  1. Install the extension from chrome app store.
  2. Open page’s source code, and find the script tag, that you want to re-write.
  3. Copy the code, and host it locally
  4. Set up rewrite rule to load this file from your local web host

In the example above the extension will match any url that has ‘global.js’ and will replace the contents with the local copy located at ‘localhost/global.js’.
Since Matching URL accepts regular expressions, you could use ‘$’ in the Replacement URL to preserve all query string parameters. For example if you have url like this: http://global.js?version=2 the replacement url will look like this: http://localhost/global.js?version=2
Now I have development setup without deploying.

Another useful application of this extension is to debug third party JavaScript or CSS issues. As you could imagine, you could set up rewrite rule and replace the third party content with locally hosted one, and modify it for debugging purposes, or you could block any content that might cause an issues. Very useful for debugging production issues.

And since the extension could block any content, it is actually very good ad blocker.  Simply add .*doubleclick.com.* to the matching url and redirect it to :http://127.0.0.2 (from where nothing will be loaded) and all ads will silently disappear.

The extension could also be used as a proxy, with different proxy rules for different urls.

A complete video tutorial could be found in YouTube

Leave a Reply