发表于 & 归档在 HTML, Web.

你需要在桌面环境和iPhone OS设备都测试你的网页,如果你没有iPhone OS设备,你可以在 iPhone OS SDK 中的模拟器中测试,因为iPad屏幕较大,而Safari的行为方式也会有些微区别,所以你还需要在iPad上测试(使用模拟器或者iPad设备),你还可以通过修改桌面版Safari的user agent来模拟iPad。对于任何平台Safari中的测试,你都需要使用调试控制台调试你的网页内容。

iPhone OS 版本Safari提供了一个调试控制台,允许你在模拟器或者设备上调试你的网页内容和程序,这个控制台可以显示异常,警告,提示,并记录HTML, JavaScript和CSS信息,控制台也可以显示未拦截的JavaScript异常,本章介绍如何激活调试控制台,察看控制台上的消息以及打印你的消息。

更多Safari上的调试技巧,可以参阅: Safari User Guide for Web Developers. ,阅读章节 Safari User Guide for Web Developers  中的 “Changing the User Agent String”  学习如何在桌面版Safari中模拟iPad ── 在用户代理菜单中选择“其他 ”,然后输入iPad的 user agent string ,详见 “Using the Safari User Agent String.”

 

激活Safari控制台

iPhone OS中,你可以在开发设置中打开调试控制台,如下:

  1. 点击主屏上的设置.
  2. 点击Safari.
  3. 向下滚动,选择“开发”项,如下图11-1.
    Figure 11-1  Selecting Developer settings
    Selecting Developer settings
  4. Switch Debug Console to ON as shown in Figure 11-2.
    Figure 11-2  Enabling the Debug Console
    Enabling the debug console

察看控制台消息

When the Debug 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
Console displays banner on webpage

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 message, 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
Console displays messages

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
Filtering 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
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
JavaScript timeout message

使用JavaScript创建消息

你可以使用 window 对象的 console 属性向控制台中打印你的消息

如,下面的代码使用 log() 方法打印变量值:

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

你还可以使用 error() 和 warn() 方法创建异常和警告消息,如下代码片段:

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

这些代码会在控制台中显示如图11-8,info() 方法与 log() 相同,提供向后兼容

Figure 11-8  Console messages from your JavaScript code
Developer console messages

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


− 3 = 三

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>