If you're doing mobile development, you probably know how frustrating it is and how difficult it could be for debugging.
This is of course true unless you have some great tools to help you on your development process.

Remote debugging via web inspector

This is one of those things that can completely change your development process and make it (almost) as easy as debugging a website on your desktop.

On Android:
Make sure you have the updated version of chrome on both your device and desktop ( otherwise it may result in a blank inspector window).
On your desktop go to about:inspect , connect your device via USB and that's it!
You should see every tab you have open on your device browser and you're now able to inspect them all.
One nice bonus is that you can also see the WebView (InAppBrowser also) windows, so you can debug your PhoneGap app as well!

See it in Action
WebInspector2 Mobile Screenshot

On iOS:
Using safari, it's pretty easy.
All you have to do to enable it on the device is go to Settings >  Safari > Advanced and enable web inspector.
Afterwards on the desktop  on safari go to Develop > iPhone / iPad and you should see the different tabs you have open.

Develop on a local website

If you have a local environment set up (http://site.dev and so on) and you want to access it via smartphone, Charles Proxy will help you out!
It's a very easy to use tool that allows you to instantly make a proxy out of your machine so that when you connect via Wi-Fi, your mobile can access your dev environment.

The trial version limits you to 30 minutes at a time (so you can restart the program forever), but a license costs 50$ , and less if you're a team of developers.
For such a good tool I think the price is pretty fair, especially since you can test it for as long as you want to.

To make this work on your Smartphone (I’ve got an Android as an example), go to Settings -> Wi-Fi, long press on your local wireless network and select Modify Network select Show advanced options and under proxy put your local ip (usually 192.168.0….), and the default Charles Proxy port is 8888, example:

That’s it!

Until next time