Three Powerful Tools in my Web Development Swiss Army Knife
I’ve been doing this for a long time so here are some tools you may not have seen before.
These tools are not ones I use everyday but they have got me out some really sticky situations. I hope you find them useful too.
Ngrok gives you http tunnels to your local machine. Letting you test your local environment on devices not connected to your local network. This is incredibly useful for when you cannot attach the device to your local network.
Example, My dev machine is running a http server at localhost:8080.
ngrok http 8080 to get a new URL for that port. Ngrok gives me http://98b644cadcbe.ngrok.io
I open it in a web browser on my testing device. All the requests go back to my local dev machine, letting me make tweaks to the local code without needing to do a lengthy deploy.
ngrok - secure introspectable tunnels to localhost
ngrok secure introspectable tunnels to localhost webhook development tool and debugging tool
Weinre is a really old-school tool back from before remote debugging was available in web browsers. Which surprisingly still comes in useful when a device is unable to connect to remote debugging.
I often have this when trying to debug iOS devices from windows or Linux and I can’t get the ios-webkit-debug-proxy to work.
You can install it using npm like so:
npm install weinre and then start it from the command line like so:
weinre --httpPort 8080 ensure the chosen port is not same one you are running any local http servers from.
Find out your machine’s ip address using ipconfig or ifconfig on windows or Linux respectively then open. http://[your ip address]:8080 in the browser.
This will give you a script tag you can add to pages you want to debug:
and a link you can open to debug those pages when they are opened:
If you want to inspect a device which is not on your network, or the port you are hosting it on can’t be reached by the device you can use it with ngrok to expose the weinre port as a URL. Then instead of using your device’s IP address you can use the ngrok URL instead.
NB: REMEMBER TO REMOVE THE SCRIPT TAG BEFORE YOU COMMIT YOUR CHANGES
Charles is a passive utility I will often have running all the time. Charles runs as a proxy, I tell my computer to use it and it intercepts all HTTP requests and logs the contents. It can be used with HTTPS as well with a bit of set up if you want to debug live sites which these days are likely to use encryption.
When testing a large and complex site sometimes something goes weird unexpectedly. By running charles I can look back through the log and see what the responses were to generate that weird result.
You can see what responses are large or what kind of unexpected requests 3rd party content providers, such as ads, are making.
If you care deeply about your privacy it can be a useful tool to run it to inspect all of your web activity see what kind of tracking networks are following you around the web.
For discussion on the latest changes to Charles, please see Karl's blog. Show more news...
I hope you find these tools as useful as I have over the time who knows when it can help you out of a sticky situation too.