phonydev.com

Safari for iPhone debugging console

• posted on: February 1, 2009
• filed under: debugging

• In a way developing web pages and apps for the iPhone is going back 5 years ago or so when we didn’t have much insight into the browser to speak of. Other than View Source we were on our own. These were dark ages, before Firebug I mean.

  It’s somewhat similar to be web-developing for the iPhone, but Safari for iPhone does come with a developer-friendly feature - the debug console.

  Setup the debug toolbar

  To activate it, go Settings » Safari » Developer (way down, the last setting). Then turn ON the debug console.

  Now if you open Safari, you’ll see an extra toolbar, like this:

  

  OK, so what is this debug console good for?

  (because it sure takes up valuable screen real estate)?

  Well, it gives you warnings and tips about the page. You can easily spot markup errors (mismatched or unclosed tags and such). You also have the console object, like in Firebug… and now all major desktop browsers actually.

  So using JavaScript you can log messages from your page and they will appear in the toolbar. Useful for debugging and friendlier than alert().

  For example if you do in your page something like:

  <script type="text/javascript">
  console.log(‘Consider it logged‘);
  console.info(‘purely informational‘);
  console.error(‘aaaargh! ppl are dying!‘);
  </script>
  </p>testing the console with a
  messed up paragraph tag

  The result will be a 4 message notification in the debug console…

  

  …and when you click (pardon, tap) you get the gory details:

  

  » try it yourself

  Enjoy!

  Thanks for reading, happy debugging and may the overloards of web programming be with you to protect you from browser quirks

3 Comments

1. Pingback by phonydev.com » Hiding the toolbars — Feb 1, 2009

   [...] Screen is small, etc. You may have noticed that when you scroll, the toolbar (address bar and the debug console) [...]

2. Pingback by phonydev.com » Screen dimensions — Feb 1, 2009

   [...] here are the dimensions measured before and after the toolbar hiding trick and with/without the debug console toolbar. Also portrait and [...]

3. Pingback by phonydev.com » hello iPhone world — Feb 1, 2009

   [...] stay positive and talk about some more entertaining topics. Like LOLcats for example Or Safari’s debugging console, or, and I’m just throwing this on the table, the dimensions of that tiny [...]

Leave a comment