使用 Monster 檢測錯誤,提昇網站效能、可用性及品質

Monster for Chrome 實際範例

Monster是由大陸的Alipay UED(支付寶用戶體驗部)所推出的網站原始碼分析、品質測試和評分的瀏覽器外掛,它能夠分析網站的HTML、CSS、JS內容並在網頁內展示出動態得分情形,讓使用者可以改善品質修正錯誤。它同時也是一個開放原始碼專案,目前提供Chrome瀏覽器的擴充功能外掛(Extensions),往後也會有Firefox使用的版本。

如何安裝?

首先,你必須使用Google ChromeChromium瀏覽器才能安裝此擴充功能。進入後點選”Install”安裝。

Monster Google Chrome Extensions

Chromium提示使用者是否安裝該擴充功能,點選”安裝”繼續。

Monster 安裝確認

安裝後右上角網址列旁邊就會出現Monster的圖示,並提示已經完成安裝。

安裝完成會出現在右上方

點擊圖示後,就會自動為你檢測該網頁,並提示你找到的錯誤、警告和資訊,右下角大大的數字是得分。

Monster 實際運作情形

Monster的主要檢測項目:

  1. 檢測是否有重複ID的標籤;
  2. 檢測是否有錯誤的嵌套標籤結構,例如a嵌套div;
  3. 檢測https協議網頁是否使用了http協議的圖片、JS、CSS等等;
  4. 檢測compatMode、doctype是否錯誤;
  5. 檢測是否使用了HTML5不再支援的標籤,例如font,s,u等等;
  6. 檢測標籤是否正確關閉;
  7. 檢測CSS、JS、background-image檔案是否發生404錯誤;
  8. 檢測CSS、JS檔案是否重複載入;
  9. 檢測是否使用了過多的外部JS、CSS檔案而影響載入速度;
  10. 檢測CSS、JS、HTML是否壓縮;
  11. 檢測CSS樣式表是否使用了CSS expression;
  12. 檢測Cookie是否超過30KB;
  13. 檢測是否有form標籤嵌套form標籤;
  14. 檢測是否直接在標籤裡定義JS事件,如<a href=”#” onclick=”…”>link</a>;
  15. 檢測<meta charset=”utf-8” />是否為<head>第一個子標籤;
  16. 檢測一個<form>標籤內部是否出現兩個input[type=submit]標籤;
  17. 檢測是否在<form>標籤中使用了 id=”submit” 的標籤;
  18. 檢測是否將<style>放置在</head>前面;
  19. 檢測是否將<script>放置在</body>前面;
  20. 檢測<img>標籤是否指定alt屬性;
  21. 檢測是否為imput[text][/text]指定label;
  22. 檢測網頁編碼是否為GBK或UTF-8;
  23. 檢測是否使用了@import來導入樣式表;
  24. 如果CSS、JS指定類似於”?t=20100511”的時間戳,則自動輸出最後修改時間,方便對比;
  25. 如果background-image超過6個,則提示所有背景圖片的大小,超過30KB會以紅色標示。

 

除此之外,還能顯示詳細的檢測結果及需要修正的位置。

Monster 能顯示詳細的檢測結果、需要修正的位置

不用擔心找不到錯誤,Monster會自動將該範圍以紅色虛線圈選,或是顯示綠色的提示對話框。

Monster 也會用對話框方式提示使用者錯誤位置

 

Monster是根據問題解決難易程度、性能提昇程度、可用性提昇程度以及維護性提昇程度來綜合評比,如果你想要知道Monster的詳細評分方式,官方也將它釋出:點此下載。Monster目前還在持續開發中,也努力的改進及新增功能,建議網站長們可以使用Monster for Chrome來檢測一下自己的網站,或許能夠找出不少問題。

 

延伸閱讀:

分享本文