10年网站建设优化实战经验
18217721733

10个工具技巧,教你如何快速验收网站

上海知九信息 网站验收 网站测试 响应式网站 浏览器兼容 前端性能 网站性能 2020-07-06

银行的“现金当面点清,离柜概不负责”标语大家都有所耳闻,网站建设行业也有许多“结清尾款上线,故障概不负责”的公司。作为支付尾款网站发布上线前的最后一个环节,整站验收对企业来说是很重要的工作。验收通过,支付了项目全部剩余款项后,再发现网站有错误、异常、故障等问题,如果建站公司不负责任,就再也没有其他方法或手段让其负责免费处理了。

与以前介绍过网站验收的一般过程和项目《网站验收该如何验收,有哪些注意事项?》不同,本文将重点向您介绍一些工具和技巧,以帮助您更好地快速完成网站验收的部分工作。

一、验收多尺寸屏幕设备下显示有无异常——网站多屏幕响应

1、responsivepx

responsivepx支持自定义屏幕宽高,最大支持3000px,只支持单窗口预览,可以快速查看响应式网站在特定尺寸屏幕上显示效果。

responsivepx官网截图

2、mattkersley

Matt Kersley内置了240px、320px、480px、768px、1024px共5种固定宽度尺寸,主要用来查看网站在平板电脑、手机等移动设备上的响应布局。预览界面中有滚动条,可以借此来浏览其中内容,但是其中的内容不可点击。

Matt Kersley官网截图

3、Am I Responsive

Am I Responsive 能快速测试网页在智能手机、平板电脑、笔记本电脑和桌面端设备上的显示效果,且会生成对应设备的外观,和页面的尺寸比例进行匹配。最大的缺点就是显示像素“太感人”了。

Am I Responsive官网截图

4、responsinator

Responsinator 中内置了最常用的移动端设备尺寸,比如iPhone、iPad、Nexus 系列,包含横屏和竖屏的预览,Responsinator 还支持 http 链接和 https 之间的切换,应用会根据你输入的链接自动识别和适配,并且会避免SSL错误。

Responsinator官网截图

5、Responsive Design Checker

Responsive Design Checker能够非常便捷地帮你自定义屏幕尺寸和分辨率,也可以在边栏中,找到预定义的设备的屏幕尺寸/分辨率,比如Nexus 平板电脑,Kindle 或者 Google Pixel 手机。同样可以对大屏尺寸进行测试,即使是在小屏幕上运行这一工具也同样可以达到效果。目前Responsive Design Checker 支持最大 24 英寸的屏幕。但有个缺点就是只支持https协议的站点测试,http站点不支持。

Responsive Design Checker官网截图

以上工具使用时可以结合百度统计发布的最新分辨率分布数据(点这里:百度统计流量研究院)去测试,如下图

百度统计流量研究院分辨率数据

二、验收跨浏览器的兼容性

1、Browser Stack

Browser Stack是一个提供网站浏览器兼容性测试的在线云端应用,支持9大操作系统上的100多款浏览器,即时连接所有桌面或移动端浏览器,可实时查看网站在各浏览器版本中的兼容情况。

重点注意:Browser Stack需要一个邮箱来注册(QQ邮箱不行),免费版每个系统下每种浏览器的每个版本仅能测试一次,算上各系统的下浏览器版本的重叠,所以每个浏览器版本号您有2-5次测试机会,且每次只能持续一分钟,所以建议各位挑重要的、结构不重复的网页(比如两个栏目下,文章页面结构一样,只是文字不一样,就算是结构重复,挑其一测试即可)测试,动作要快哦!您愿意的话,多注册几个账号也是可以的。土豪请随意,单用户大约29刀/月,包它一个月慢慢测。

鉴于网站全英文,且操作提示不是那么显而易见的,简要介绍下使用方法。

进入到主页,点任意按钮会跳转到注册页面,填写英文全名、邮箱(非QQ邮箱)、密码即可注册,注册完成后邮箱收到一封验证邮件,点击跳转回网站。点击顶部导航“Products”下的“Live”,如下图

Browser Stack交互式跨浏览器测试

之后进入到跨浏览器兼容测试页面,如下图。最左侧一列是系统和系统版本选择,点击选中右侧会切换到对应的浏览器版本,双击版本号即可进入到测试页面(免费版1分钟后会自动关闭),进入之后抓紧时间在模拟的浏览器地址栏输入要测试的网页。

BrowserStack跨浏览器兼容选择系统和浏览器版本

2、browserling

browserling也是一个在线的浏览器兼容测试工具,相比Browser Stack而言系统版本选择项会比较少一点。同样也是限免的平台,免费用户支持3分钟查询,且Internet Explorer 11 only、Windows 7 only、1024x768 resolution only,好吧,这免费版要你何用?做一个付费的备选项吧,19刀/月。

browserling各版本费用

常规验收的话,以上的工具就够用了,其他的内容(文字、图片等)正确性,功能可用性还是需要您自己去点一点,看一看。下面介绍的是几个辅助工具,对网站的分析会更深入,但对您不一定有太大帮助,感兴趣可以继续往下看。

三、网站验收辅助工具

死链检测:云端在线处理的有https://tools.aizhan.com/bl/http://tool.chinaz.com/Links/,桌面端常用Xenu,可以快速检测全站死链,在网站后续的运营优化过程中也偶尔会需要进行死链检测;

网站多点测速:https://www.17ce.com/http://tool.chinaz.com/speedtest.aspx

前端性能检测和优化建议:https://gtmetrix.com/,采用的是谷歌pagespeed和雅虎YSlow测试。