Artificial Intelligence

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.


Filed under:

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> .

Ok, now you have a simulated mobile device, then with iWebInspector you can track down css bugs inside the iOS simulator. iWebInspector doesn't provide a JavaScript console, which is where I've been spending a good portion of my time, so I like jsConsole or Weinre for in-simulator JavaScript debugging. (There is a JavaScript error feature that you can turn on in mobile Safari, but it doesn't provide any useful information beside the fact that an error occurred.)

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.

Similar posts

Get notified on new marketing insights

Be the first to know about new B2B SaaS Marketing insights to build or refine your marketing function with the tools and knowledge of today’s industry.