《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.7 测试,再测试,进行更多的测试

简介:

本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第1章,第1.7节,作者:【英】Peter Gasston,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.7 测试,再测试,进行更多的测试

对于目前网络设备的现状,测试是确保所创建网站是否能跨多个设备运行的唯一方法。测试一直贯穿着整个项目,从开始到结束,都要抓住任何机会进行测试。如果规划的是一个多设备项目,那么,在整个项目中,多达40%至50%的时间将会用来测试。这是个很严肃的问题。

如果找不到实际设备的代替品来做测试,则可以着手建立一个库,并放入尽可能多的设备。如果单位附近有其他机构,还可以考虑集中资源,以获得范围更广的设备。许多城市都在组建设备实验室,其中有各种设备可供任何人使用,这些设备均由当地开发人员和公司捐赠。你还可以在线搜索最近的实验室,或者,考虑在公司或工作的地方参与组建一个实验室。

不要只对手机和平板电脑进行测试。如果网站的目标对象是年轻爱好者(研究表明,大约四分之一的美国青少年使用游戏机浏览器上网),则应该考虑测试游戏机浏览器;或者,如果网站瞄准的是休闲市场,则应该对电视设备进行测试。

如果无法使用实际设备,则可以使用一些专用的工具,大多数(也可能是全部)操作系统创建者和/或设备制造商都有可供免费下载的、设备模拟器的软件开发工具包(SDK)。在手机和平板电脑领域,安卓、Windows Phone和黑莓都有软件开发工具包,毫无疑问,除了它们之外,还有更多其他的品牌。在苹果的App商店里可以找到苹果公司的Xcode,它有iOS模拟器功能,在测试中,可以在设备和操作系统版本之间进行切换。

一旦设置好,许多这样的软件开发工具包还允许USB连接物理设备,通过配对的浏览器来做调试。但是,还有个更简单易行的方法—使用Opera的手机仿真器,一旦将其打开并连接到Opera的桌面版本,就可以使用在桌面上的开发人员工具来调试移动设备上的页面。如果需要使用WebKit—它主导着多设备引擎,为什么不用呢?—名为weinre的软件可以把台式机上的Chrome或Safari连接到安卓、iOS或黑莓模拟器上。

Adobe有一个叫做Edge Inspect的截图查看器,可以让任何使用Edge Inspect应用程序(眼下在iOS和安卓系统上可用)的设备与Chrome浏览器同步。这样,用户就能同时在许多不同的设备上预览网站,并用网络检查器进行远程调试。

相关文章
|
5天前
|
Web App开发 JavaScript 前端开发
《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
【5月更文挑战第3天】本文介绍了如何在Web自动化测试中使用JavaScript执行器(JavascriptExecutor)来完成Selenium API无法处理的任务。首先,需要将WebDriver转换为JavascriptExecutor对象,然后通过executeScript方法执行JavaScript代码。示例用法包括设置JS代码字符串并调用executeScript。文章提供了两个实战场景:一是当时间插件限制输入时,用JS去除元素的readonly属性;二是处理需滚动才能显示的元素,利用JS滚动页面。还给出了一个滚动到底部的代码示例,并提供了详细步骤和解释。
28 10
|
11天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
4天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
15 0
HTML5/CSS3粒子效果进度条代码
|
4天前
|
JavaScript 前端开发 Java
《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)
【5月更文挑战第4天】本文介绍了如何使用JavaScriptExecutor在自动化测试中实现元素高亮显示。通过创建并执行JS代码,可以改变元素的样式,例如设置背景色和边框,以突出显示被操作的元素。文中提供了一个Java示例,展示了如何在Selenium中使用此方法,并附有代码截图和运行效果展示。该技术有助于跟踪和理解测试过程中的元素交互。
8 0
|
7天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
13天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
13天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
13天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
13天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
13天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。