本网站只能被运行在支持JavaScript脚本的环境中

iOS模拟器及Android模拟器的安装及使用方法

本节概述

在开发智能手机或平板电脑用Web网站时,iOS模拟器、Android模拟器以及Web浏览器中的开发工具为必不可少的工具。如果灵活使用这些工具,可以快速开发高质量Web网站。本节介绍iOS模拟器及Android模拟器的安装及使用方法。

iOS模拟器及Android模拟器的安装及使用方法

在开发智能手机或平板电脑用Web网站时,各种模拟器为必不可少的工具。为了确认Web网站在各种设备中的运行结果,在开发网站时,需要不断地在各种模拟器中进行反复确认及修改。

在针对iPhone或iPad设备进行开发时,可以使用iOS模拟器。在Mac OS X操作系统中,需要使用Apple ID进行登录,然后即可免费使用iOS模拟器。在针对Android设备进行开发时,可以使用Android模拟器。由于Android模拟器是使用Java开发语言所开发的,所以无论什么操作系统,只要支持Java环境即可免费使用Android模拟器。

接下来介绍这两种模拟器的安装及使用方法。

iOS模拟器

iOS模拟器的运行环境如下所示。

项目 内容
操作系统 Mac OS X 10.8.2 (Moutain Lion)
Xcode 4.5.1

iOS模拟器需要通过App Store来进行安装。在App Store中搜索并安装Xcode,然后打开应用程序(/Applications/)目录,Xcode安装包中包含了iOS模拟器。鼠标右击Xcode,点击“显示包内容”即可显示安装包中的文件。


iOS模拟器

在Contents文件夹下的Applications子文件夹中,提供了iPhone Simulator.app选项。双击该选项即可启动iOS模拟器。

Android模拟器

Android模拟器的运行环境如下所示。

项目 内容
操作系统 Windows 7 Professional (32bit)
Xcode 4.2
Java Java SE JDK 7u11

在安装Android模拟器之前,首先需要安装Java JDK。可以在Java SE Downloads网页上下载最新的Java JDK。在下载安装最新的JAVA JDK之后,即可在Android SDK|Android Developers网页上下载最新的Android SDK。


在Java SE Downloads网页上下载Java JDK

同意使用条约后选择适当的操作系统下载二进制文件

下载Android SDK Manager

运行Android SDK Manager,即可下载安装Android SDK。此处选取“Tools”选项下的所有项目,“Android 4.2 (API 17)”选项下的所有项目以及“Extras”选项下的“Google USB Driver”项目后执行安装。


Android SDK Manager

Android SDK安装完毕

在安装了Android SDK之后,可以在开始菜单中启动AVD(Android Virtual Device) Manager。首次启动时并没用提供虚拟设备,需要创建Android虚拟设备。点击屏幕右上角的“New”按钮即可创建虚拟设备。


Android Virtual Device Manager

创建虚拟设备画面

在创建虚拟设备画面中的各项目意义如下所示。

项目 内容
Name 虚拟设备名称
Target Android虚拟设备的版本
Skin 设置Android虚拟设备的外观或屏幕尺寸
Hardware 设置硬件种类及各种值。选择Target后将会自动设定。可以通过点击“New”按钮添加功能。

在输入各种信息后,点击“Create AVD”按钮即可创建虚拟设备。选择被创建的虚拟设备,点击“Start”按钮即可启动Android模拟器。


成功创建虚拟设备

启动时的选项设置画面

成功启动的Android模拟器

使用Web浏览器中的开发工具

在现代Web浏览器中都提供了内置开发工具,可以使用这些开发工具来调试DOM树、CSS样式代码以及JavaScript代码。

在PC机用Google Chrome浏览器中,可以通过选择菜单中的“工具”选项下的“开发者工具”来启动开发者工具。


Google Chrome的开发者工具

此处介绍Google Chrome浏览器中内置的开发者工具中的常用功能。

在Google Chrome浏览器中内置的开发者工具中,提供如下所示的功能。

  • Elements
  • Resources
  • Network
  • Sources
  • Timeline
  • Profiles
  • Audits
  • Console

Elements

在开发者工具中,点击最左边的Elements标签之后,即可在标签下部显示DOM树。在右下角显示页面用CSS样式代码。


Elements

Network

点击Network标签之后,即可在下部画面中确认构成Web页面的HTML、JavaScript、CSS、图片等资源文件及其加载时间。


Network

画面中各项目含义如下所示。

项目 内容
Name/Path 请求的文件名与文件路径
Method 请求时所使用的HTTP方法
Status/Text HTTP请求状态码及内容
Type 资源文件的Mime类型
Initiator 资源文件从哪个文件中被读取
Size/Content 下载文件的尺寸。从本地缓存中读入时显示(from cache)。
Time/Latency 加载该资源文件所花时间。
Timeline 加载各资源文件时所花时间轴。可被用来确认加载时的性能瓶颈。

当加载的文件越多,尺寸越大时,用户需要等待的Web页面的完整显示时间也就越长。所以应该尽量将JavaScript脚本代码或CSS样式代码书写在一个文件中,采用代码压缩,使用CSS样式代码来取代图片文件等技巧以减少请求次数。

Sources

点击Sources标签之后,即可在下部画面中查看所有的HTML文件、JavaScript文件及CSS文件。


Sources

可以在该画面中实时编辑CSS样式文件或JavaScript脚本文件中的代码,这些修改将被即时体现在页面中,从而实现一遍预览页面一边微调样式代码,待页面显示结果达到满意程度后再修改实际样式文件的目的。

针对JavaScript代码来说,可以在其中添加断点。通过断点的添加,可以暂停正在运行的处理,然后对代码进行单步调试,查看变量值或对象内容等操作。

在调试JavaScript代码时,可以使用的参数如下所示。

项目 内容
Watch Expressions 监视及确认表达式的运行结果及变量值。
Call Stack 查看代码堆栈。选择函数后可查看函数内的作用范围。
Scope Variables 可以确认可访问变量的作用范围。可确认全局作用范围、本地作用范围及闭包作用范围。
Breakpoints 可以确认在脚本代码中添加的断点。
DOM Breakpoints 可以确认在Elements标签中对DOM添加的所有断点。
XHR Breakpoints 可以在使用XHR发送请求时设置断点。
Event Listener Breakpoints 可以在事件被触发时设置断点。
Workers 可以对Web Workers进行调试。

Console

点击Console标签之后,即可在下部画面中打开调试JavaScript脚本代码用控制台。可以在其中查看JavaScript脚本代码中输出的日志、变量或对象值、Web浏览器中输出的警告或错误信息。


Console

在控制台中提供对话型界面,可以在其中书写并运行各种JavaScript脚本代码。可以通过在脚本代码中使用console.log方法查看变量值或对象内容。

使用开源框架简化设计

可以通过使用各种开源框架来简化设计。在上一节中介绍的Sencha Touch、jQuery Mobile、Dojo Mobile、Kendo UI中都针对PC机或移动设备提供了各种丰富的组件及样式主题。


Sencha Touch

jQuery Mobile

通过灵活使用各种框架,可以快速开发智能手机及平板电脑用Web网站。

通过灵活使用各种框架及开发工具,可以缩短开发时间及测试、修改时间。在开发一个Web网站时,首先需要选用一组开发框架及开发工具。