Using Charles to test locally hosted sites on your mobile device

Another post about Charles, yay!

This post will succinctly explain how to locally host a webserver using node, and how to get that locally hosted server onto your phone - so that you can test what you are building on a real device - as opposed to going through continuous redeploys, or using emulation in Chrome or something.

What to do.

  1. Ensure you have node installed, then run:

    npm install -g local-web-server

    If all goes well this should install the node simple webserver.

  2. Run ws from the project root.

    cd into/project/root sudo ws --port 80

    Now we start ws on port 80, you should see a standard node server start saying something like "serving at http://localhost:80.

  3. Test in a browser on your machine.

    Now simply enter http://localhost:80 into a browser on your machine. If your project looks as it should all is well.

  4. Fire up Charles.

    Open up Charles, head to tools>rewrite. Then add a new rule.

    In locations click add. Now add a host, e.g. your TLD or any other domain you want to use for testing, this can literally be anything.

    In rules, click add. On type click host then at the bottom, in replace, add localhost.

  5. Connect your phone to the proxy.

    Find out the current IP address of your machine and write it down, it can be down via terminal or via network settings on a mac.

    On your phone (I'm assuming iOS but it works in Android too :D) go to wifi, then click the 'i' for the information. Go to http proxy. Add the IP address of your machine in and for port put 8888 (this is Charles' listening port).

  6. Test!

    This should be it. Now hit the URL you entered for rewriting into a browser, and you should see your locally hosted site appear. Charles is rewriting that request to localhost.

Phil Hudson

Read more posts by this author.