Editing CSS and Javascript on Live Sites

Dec 20, 2011 Published by Tony Primerano

The Web Developer 1.0.2 Firefox plugin by Chris Pederick is great for messing with a sites CSS and dissecting a page but what if you need to test changes on IE or you want to change javascript without changing your production pages?
The developers I work with are all using the Charles Web Proxy
Charles has a ton of great features like http logging and bandwidth throttling. But it's the URL rewriting feature that we use to redirect requests for css and js files to our local host.

If you need to try changes out on your production system I suggest trying this out.

Pulling javascript from different site example

In charles goto tools -> rewrite

  • click add and name your new set
  • enter the hosts the rewrite rule applies to

Click add to add a rule to the set

Now your browser thinks it is getting site.js from tonycode.com but in reality Charles will return the copy from your localhost.

Changing a query parameter example

In charles goto tools -> rewrite click add and name your new set enter the hosts the rewrite rule applies to

Click add to add a rule to the set In Match select "Modify Query Param" In this case I want to change the host specified in a url parameter In Match

  • name=url
  • value=(.*?)mysite.com(.*)

In New

  • name=url
  • value=$1mybetasite.com$2

select "replace all"

Now when i request http://somesite.com/proxy?url=mysite.com... it will modify the url parameter to use mybetasite.com instead

 

Pulling all content for Site A from Site B example

Create a "hosts" rule In Match put site A and out site B in New.

Good way to flip pieces of a page to a beta environment.