對Web設計和開發人員有用的15個Chrome擴充套件

發表於2011-02-18

最近我才把谷歌瀏覽器設為預設瀏覽器,而與此同時我開始將它用於我的兼職Web設計和開發專案中。由於我所依賴Firebug的擴充套件,在Chrome瀏覽器並沒有完全的對應擴充套件,所以我還是時不時要用Firefox瀏覽器,但我對谷歌瀏覽器的速度、螢幕空間的利用及很多方面都很滿意。在這篇文章裡,我和大家分享我在設計和開發網站時發現的一些最好的谷歌瀏覽器擴充套件,按字母順序列出如下。

1. Aviary Screen Capture 螢幕截圖

Aviary Screen Capture讓你能夠擷取網頁的螢幕快照。獲得螢幕快照後,用Aviary.com的應用程式在瀏覽器內編輯那幅快照。基本的影象編輯裝置讓你能夠標記(通過畫箭頭和長方形)、編輯(裁剪、旋轉和調整大小)和獲得精確的畫素色彩。

其特性包括:

  • 儲存在桌面、線上主機、或在其它的Aviary應用程式上編輯
  • 即時截圖
  • 能夠擷取所有網頁和影象的任何部分
  • 能夠擷取整張網頁
  • 能夠新增看得見的備註,比如箭頭、文字及在你擷取的圖片上標出醒目符號
  • 裁剪擷取的圖片
  • 調整截圖的大小、旋轉及翻轉截圖
  • 智慧選擇和去除截圖的元素
  • 從頁面上獲得色彩資訊
  • 快速啟動6個Aviary設計工具,包括影象、標記、向量、調色盤、效果和音訊編輯器。

2. Chrome SEO 搜尋引擎優化

Chrome SEO為搜尋引擎優化工具提供了方便的路徑。這些工具幫助你做每日搜尋引擎優化工作,比如競爭分析、關鍵詞分析、反向連結檢查及網頁排名檢查等。

3. Chrome Sniffer 嗅探器

Chrome Sniffer使Web開發人員能夠在網站上執行的檢查web框架∕CMS和JavaScript庫。這個擴充套件通過一個圖示,顯示已檢測到的框架。目前,這個擴充套件最多可檢測70個流行的CMS和JavaScript庫。

4. Eye Dropper 滴管

Eye Dropper讓你能夠從網頁或高階顏色選擇器上選擇顏色。

5. Firebug Lite for Google Chrome

Firebug Lite for Google Chrome 並不是Firebug的替代品(這很不幸),也不是瀏覽器開發人員的工具。想法,你應該和其它工具一起使用。Firebug Lite提供了大量的視覺效果,類似於Firebug的HTML元素、DOM元素及箱狀模式陰影。Firebug Lite還具備其他一些很酷的功能,比如用滑鼠檢測HTML元素,及實時編輯CSS的特性。

6. IE Tab

藉助IE Tab,可以在Chrome Tab上切換顯示網頁。這個擴充套件對想用IE渲染引擎跨瀏覽器測試的開發人員很有幫助。(這是Windows系統下的獨特擴充套件。)

7. Instant Image Editor 即時影象編輯器

當你按住alt鍵(Linux上的ctrl鍵)的時候,Instant Image Editor讓你在有背景影象的網頁上可以右鍵點選任何影象或元素。你可以用Pixlr在新標籤上即時編輯影象,Pixlr是在瀏覽器上執行速度快、使用方便的程式。當你右鍵點選的元素不是影象時,即時影象編輯器也會確定這個元素是否有可供編輯的背景影象。

8. Lorem Ipsum Generator

Lorem Ipsum 生成器用簡約和極具吸引力的設計隨機產生“Lorem Ipsum”文字。

9. MeasureIt!

MeasureIt! 用於測量網頁上任何元素的寬度和高度。

10. Pendule

Pendule 是Chrome 為Web開發人員提供的開發工具。這個內建的開發工具的擴充套件包括:檢視、重灌和禁用CSS,檢視JavaScript、表格編輯,檢視、隱藏及獲得影象的資訊,顏色選擇器、量尺、地形圖、標記驗證器等等!

11. PHP Console PHP控制檯

PHP Console 是Lagger的一個擴充套件,(Lagger:PHP處理錯誤/異常/除錯的輕量級靈活的開源PHP庫),它在谷歌瀏覽器控制檯及彈出視窗中顯示PHP錯誤/除錯的資訊。

12. Speed Tracer 速度追蹤器

Speed Tracer 速度追蹤器幫助你在網站應用程式中發現和修復效能問題。當應用程式執行時,這個擴充套件將瀏覽器內的低水平檢測點視覺化,並分析它們。

這個應用程式幫助你瞭解在你的應用程式裡時間都花在哪了。這包括由以下原因導致的問題:

  • Javascript的解析和執行
  • Layout 版面
  • CSS樣式重算和選擇器匹配
  • DOM事件處理
  • 網路資源載入
  • 定時器
  • XMLHttpRequest 回撥
  • 繪圖
  • 其它

13. Web Developer

Web Developer 在瀏覽器中增加了一個工具欄,其中有Web開發工具的按鈕。

14. Webpage Screenshot 網頁快照

Webpage Screenshot 是快速、簡單的擴充套件,它能擷取整個網頁。即使網頁很長,也能儲存在一份影象檔案裡。這個外掛讓你只點選一下,就能以PNG/JPG格式儲存任何網頁的影象。

  • 有繪圖工具:線條、橢圓、長方形、箭頭等
  • 在螢幕快照中新增文字
  • 按所需尺寸快速裁剪影象
  • 在準備好影象之前就能開始編輯
  • 可以上傳到Facebook、Twitter、Gmail、MySpace上共享
  • 列印:直接傳送影象到印表機
  • 儲存在硬碟裡:這個獨特的擴充套件讓你能夠將大的圖片儲存在硬碟裡
  • 能夠擷取本地檔案:能夠擷取“FILE://”
  • 附有顏色選擇器:能夠記住你最後使用的顏色
  • 也能夠擷取水平網站的網頁

15. Window Resizer 視窗大小調整器

Window Resizer 能夠重新調整瀏覽器視窗的大小以適合各種解析度。這個擴充套件對網站設計和開發人員特別有用,能夠幫助他們在解析度不同的瀏覽器上測試版面設計。解析度清單是完全能夠定製的(增加/刪除/重新排序)。

可以提供三種螢幕型別:

  • 臺式電腦(標準的;按具體的解析度情況重新調整整個視窗的大小)
  • 手提電腦(和臺式電腦一樣,但圖示不同;很容易掃描解析度清單)
  • 手機 Mobile(和前兩種螢幕不同;適合具體的檢視尺寸,不會佔滿整個視窗,因為手機的瀏覽器通常沒有邊界)

 

原文:Brian  編譯:伯樂線上  – 丘建紅

轉載請註明原文/譯文出處、譯文超連結和譯者等資訊,否則視為侵權,謝謝合作

相關文章