iPhone Safari debugging console (iPhone/iPad web app debugging)

iPhone HTML web app debugging - I'm trying to optimize my HTML/web application to look and feel like a native iPhone app; how can I debug my web app on an iPhone or iPad (presumably using Safari)?

I was going to write about how to debug an HTML iPhone web application, but Apple has this covered very well in their Safari debugging tip, so I'll generally just refer you to that tip.

For developers that like their information fast, here's the abridged version of that iPhone Safari debugging tip:

• On your iPhone, tap Settings, then Safari, scroll down and tap Developer.
• On the next screen, turn on the Developer Console.

After you've changed this setting, a banner will appear above your web pages in the iPhone Safari browser when messages are in the console. Just click the Message banner to see the message content.

iPhone Safari console debugging messages

You can place your own debug messages in the Safari debugging console with JavaScript code like this:

<script>
console.log("My log message goes here.");
console.warn("My warning message goes here.");
console.error("My error message goes here.");
console.info("My information message goes here.");
</script>

These Safari debugging message examples use the console attribute of the JavaScript window object.

Again, for detailed information and screenshots, please see that Apple documentation page.