A Short List of Handy Web/Mobile Debugging Tools
I recently helped a friend with a couple bugs they were fixing on a mobile site, and suddenly realized that there is a good basic list of tools that folks should have in their frontend dev kit. Robbie wrote a little while ago about some of the front end (CSS/CSS3) tools he uses, so I thought I'd add to the list, and lean a bit more toward debugging.
Of course my list should start with the browser inspectors, if you haven't used/aren't using them, start now. I prefer Chrome's suite of Developer Tools, but some folks I know lean towards Firefox's Firebug or Safari's Developer Tools.
I've been working on a good amount of iOS targeted responsive front end code recently, and my base tool for testing/debugging on iOS is the Apple provided iOS simulator. (It can be a little hard to find, the iOS simulator application is located on my Macbook at /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app) You can install multiple versions of iOS simulator/sdk by going into XCode's preferences/downloads and adding previous versions of iOS.
You can grab the Android device simulator and install versions of Android by running the Android SKD Manager executable in -android folder-/tools/android. From the SDK manager menu got to Tools/Manage AVDs then you can create a virtual Android device. Run your device from the command line inside the tools folder of the SDK like this
emulator -avd <the name you gave your virtual device> .
And at the end of my list: Dirty Markup. There's nothing worse that finding the cause of the bug, then realizing that you can barely read the code that you're trying to fix. Dirty markup helps.