1.?Responsive Viewer
? ? ? ? 可以在同個窗口內,針對同一網站,添加多個不同設備屏幕顯示。
? ? ? ? 在前端開發,需要多端適配,尤其是移動端響應式適配的網站開發中,可以同時測試多個不同屏幕的適配效果。
2.?VisBug
? ? ? ? 提供工具欄,可以獲取當前網頁文檔內容信息,也支持直接像 UI 繪制那樣,直接操作網頁內容。
? ? ? ? 安裝插件后,在當前網頁,點擊擴展程序圖標,就會出現如下工具欄:
?
功能如下:
- 測量:獲取選中元素在窗口中的位置信息,如上下左右距離
- 檢查:獲取選中元素的 css 信息,如類名樹、樣式配置
- 可訪問性:檢查屬性并對比合規性
- 位置:抓取元素并將其放置在任意位置
- 外邊距:調整元素外邊距
- 內邊距:調整元素內邊距
- flex 布局:調整彈性盒布局功能
- 移動:更改元素位置
- ......
3.?SEO META in 1 CLICK
? ? ? ? 顯示網頁所有元數據和主要 SEO 信息,可以清晰直觀看到自己網頁缺失或者需要補充的元數據。
4.?Website SEO Checker
? ? ? ? UI 比上個相對友好一些,同時也提供網頁性能檢測。但部分功能需要注冊登錄才能使用。
5.?GoFullPage - Full Page Screen Capture
????????完整地截取當前頁面的截圖。
? ? ? ? 在頁面內,點擊擴展程序圖標(或按下 Alt+Shift+P 組合鍵),可見插件遍歷整個網頁截取頁面,最后跳轉到獨立頁面,展示網頁的完整截圖。