Debugging

Safari on iPhone OS provides a console that allows you to debug your web content and applications on Simulator and the device. The console displays errors, warnings, tips, and logs for HTML, JavaScript, and CSS. The console also shows uncaught JavaScript exceptions as errors. This chapter describes how to enable the console, view the console messages, and print your own messages to the console.

For more tips on debugging web content, read Safari User Guide for Web Developers.

Enabling the Safari Console

You turn on the console using the Developer Settings for Safari on iPhone OS as follows:

1. Click Settings on the main page.

2. Click Safari.

3. Scroll down and select Developer as shown in Figure 11-1.

   Figure 11-1  Selecting Developer settings

   

4. Switch Debug Console to ON as shown in Figure 11-2.

   Figure 11-2  Enabling the debug console

   

Viewing Console Messages

When the console is on, a banner appears above your webpage if there are messages in the console, as shown in Figure 11-3. Click the banner to view the messages.

Figure 11-3  The message banner

The console displays the messages in the order in which they occur, as shown in Figure 11-4. Each message description contains the type of messsage, the line number and filename of the document, and the text message. The types of messages are log, info, warning, and error. Click the Clear button to remove all messages from the console.

Figure 11-4  Messages in the console

You can also filter the list by HTML, JavaScript, and CSS messages by clicking the respective button at the bottom of the screen. Figure 11-5 shows the HTML messages filtered on the left and the JavaScript messages filtered on the right.

Figure 11-5  Filtered console messages

Tips appear in the console if you don’t follow certain guidelines. For example, if you set the viewport width to 320 instead of using the device-width constant, then an HTML tip appears in the console as shown in Figure 11-6. A similar tip appears if you set the viewport height to 480 instead of using the device-height constant.

Figure 11-6  Viewport width or height tip

For example, the following HTML fragment generates the first three HTML messages in the console shown on the left side in Figure 11-5. Syntax errors also generate messages.

<meta name = "viewport" content = "width = 320, height = 480, m = no">

The console catches JavaScript errors too. For example, the following JavaScript code causes a timeout—it contains an infinite loop—and generates the error message shown in Figure 11-7.

<script>

while (true) a = 9;

</script>

Figure 11-7  JavaScript timeout message

Creating Messages in JavaScript

You can print your own messages to the console using JavaScript. You do this by using the console attribute of the window object in JavaScript.

For example, the following code line prints the value of a variable to the console using the log() method:

console.log("x = " + x);

You can also create your own error and warning messages using the error() and warn() methods as in this code fragment:

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

This code fragment generates the console messages shown in Figure 11-8. The info() method is the same as log()—it’s provided for backward compatibility.

Figure 11-8  Console messages from your JavaScript code