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 個字
 
 
載入中....
評論 收藏