cool tech graphics

A Short List of Handy Web/Mobile Debugging Tools

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

Date posted: March 27, 2012


I'm working on another remote JavaScript CSS and HTML debugging tool called farjs it might be handy for quick debugging on all device types.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?