microsoft-website-test-tools-1

开发网站时最不想做的就是在不同浏览器、平台和分辨率测试网页显示效果,通常这会浮现许多问题,尤其浏览器版本就可能让显示成效完全不同,也只好尽力维持让每一种设备都能正常浏览网页。修改到完全没有问题必须投入不少时间,我习惯在计算机上安装不同版本的操作系统进行测试,但遇到 IE 就没辄了,除非你安装 XP 或更早的版本才能测试不同的 IE 。如果你觉得这么做很麻烦,现在只要输入网址就能建立在不同浏览器屏幕的截取画面。

以往我并没有介绍过太多类似的服务,因为大部分服务都不是免费的,即使免费,效果跟操作上也不是那么理想。直到最近微软终于推出了一款名为「Browser Screenshots」在线工具,能够为你快速建立一个网页在不同操作系统、浏览器甚至是设备上的画面截图,方便开发者在开发网站或服务时找出问题。

Browser Screenshots 用法非常简单,只要开启网站、输入网址,就能自动为你截取不同浏览器上呈现的网页效果。支持平台包括 Windows(IE、Chrome、Firefox、Opera)、OS X(Safari)以及 IE 6、IE 7、IE 8、IE 9 和 IE 10!还有在 Google Nexus、iPhone 及 iPad Air 测试效果。

Browser Screenshots

STEP 1

开启 Microsoft Edge Dev 的「浏览器屏幕快照」功能,在网页内输入要截取的页面网址,然后按下右边图示。

wr20160210 (1)

STEP 2

Browser Screenshots 速度不是很快,需要等待一段时间,每个平台的截图画面才会出现。如果你想检视大图,把光标移动到截图上点选放大,比较值得一提的是这项服务建立的截图是整个页面由上到下的完整范围,不是只有可视区域而已。

wr20160210 (1)

STEP 3

另外,Browser Screenshots 工具对于中文网站的处理能力很好,可以正常显示网页内的所有中文内容,不像一些测试平台可能遇到中文会无法显示,不得不说确实是个蛮棒的开发工具!如果你在开发网站或服务时,想知道在其他平台设备上的显示效果,可以试试看用它来测试。

wr20160210 (2)

值得一试的三个理由:

  1. 免安装软件,输入网址就能在线抓取网页截图画面
  2. 支持 Windows、Mac 多种常用浏览器,也能截取设备效果
  3. 可以一次抓取 IE 6 – IE 10 的所有显示画面,非常强大

【优设酷站22连发!】

  1. 免费图库+导航收集站:《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》
  2. 音乐站+字体搜索:《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》
  3. 渐变色+代码比较:《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》
  4. 配色+占位图:《酷站两连发!在线色彩搭配工具+快速生成占位图片器》
  5. LOGO下载+字体下载:《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》
  6. 压缩图片+在线配色:《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》
  7. CSS Hover动画+宠物小精灵配色:《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》
  8. 美女图片+游戏配色:《酷站两连发!游戏配色网站+免费美女素材特供网站》
  9. 在线配色+字体推荐:《酷站两连发!在线配色神器+英文字体推荐网站》
  10. 追波作品变代码+16进制颜色:《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》
  11. 无缝纹理+多边形背景:《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址:free.com.tw

uisdc-hao

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
相关推荐
评论 收藏