chrome前端插件推薦

用了這麼久的Chrome，感受越用越順手了。之前總以爲firefox的插件給力，如今Chrome的插件也跟上步伐了，愈來愈給力了。今天推薦幾個Web前端相關的插件，來武裝你的Chrome，讓它給你的工做帶來更大的便利。

如下插件排名不分前後（都比較給力）

（一）調試類插件

1.firebug:大名鼎鼎的firebug,雖然Chrome自帶的審查元素就很牛叉，不過有的地方仍是firebug用得要順手些。審查元素+firebug,雙劍出鞘，威力驚人啊。

2.WebDeveloper:這個也是名氣很大的插件，不錯值得推薦使用。

3.code cola :一款在線修改css的插件，使用很傻瓜化，能夠徹底不用神馬css代碼，拖動滑塊，選擇屬性是類的操做幫你很迅速的修改css。至關帥氣（國人開發的喲，絕對要支持），對於css不是很熟的童鞋，此插件吐血推薦啊！

4.Editor Lite:一個在線編輯html代碼的插件，能夠當成一個簡潔版的Dw編輯器，一些少點的代碼能夠在此插件內，很快的編寫，還加入了w3c認證功能，灰常不錯。

（二）檢測優化類：

1.Yslow：這個沒必要多說，yahoo出品的檢測web前端性能和提供優化建議的神器。

2.PageSpeed:以前《雙陳記》就推薦過的谷歌出的東東，和Yslow一塊兒，堪稱業界的乾淨莫邪啊！

3.Monster:這個插件能夠檢測你網站的代碼錯誤和警告，給出改進建議，還有總體評分。不錯的東東。

4.瀏覽器兼容測試工具：測試網站的兼容性插件。

5.Resolution Test:一個測試各個顯示分辨率下的顯示狀況的插件

（三）輔助類

1.EyeDropper:一個取色插件，功能不錯，取色很方便快捷。

2.Awesome Screenshot:Capture& Annotate:一個不錯的截圖插件，在貼圖上還能夠進行標註，添加文字等。

3.IE tab：這個東東，應該不少童鞋用過，用蛋疼的ie模式瀏覽（彷佛有點必備的意思）。

（四）SEO類：

1.SEO for Chrome:一個綜合的SEO查詢插件。

2.Woorank:這個以彈出新頁面的方式對網站進行SEO相關查詢（洋文）。

3.百度Seo工具：查詢各大搜索引擎的收錄數很外鏈數，百度首頁位置的查詢。

4.PageRank StatusR查詢，Alexa排名，網站地址查詢等

到此推薦完畢。以上全部插件均可以去Chrome的應用商品免費下載使用，須要的童鞋趕快嘗試吧！

Chrome的應用商品地址：https://chrome.google.com/webstore?hl=zh-CN

 

=================

 

愈來愈多的前端開發人員喜歡在Chrome裏開發調試代碼，Chrome有許多優秀的插件能夠幫助前端開發人員極大的提升工做效率。尤爲Chrome自己是能夠登陸的，登陸後你全部的插件都會自動同步到每個登陸後的Chrome的，很是方便啊。

Postman - REST Client

Postman是Ajax開發的神器，對於Restful開發方式特別有幫助，能夠用來模擬各類請求來測試API的正確性，好比用來模擬Ajax請求。它還支持認證，好比簡單的用戶名/密碼，或者Oauth1.0。Rest Console也是一個不錯的選擇。

Edit This Cookie

這是一個強大的cookie管理器。你能夠添加、刪除、編輯、搜索、保護和阻止cookies。Cookies也是一個很是強大的Cookie工具。

Web Developer

安裝Web Developer擴展後，會在瀏覽器的工具欄中添加一個按鈕，點擊該按鈕，會彈出各類Web開發工具。此擴展工具的做者同時也是很是流行的Firefox擴展Web Developer extension for Firefox的做者。。

JSON Lint

一個在線驗證和格式化JSON文件的應用。

網頁截圖

截取網頁爲圖片，支持窗口截圖，區域截圖和整個網頁截圖三種方式。支持水平和垂直翻頁截取超大網頁，新版引進自動截圖保存功能。截圖後，能夠利用圖片編輯工具編輯圖片，而後將編輯後的圖片保存爲PNG格式的圖片文件，而且提供了高亮工具，塗改工具和文字添加工具。

YSlow

YSlow能夠分析網頁，併爲改善網頁性能提出修改建議，這些功能基於高性能網頁的規則集。YSlow能夠根據預約義的三個規則集或用戶自定義規則集來對網頁進行分級。，PageSpeed Insights是谷歌開發的相似功能的插件。

ColorZilla

能夠從頁面上任何一點獲取顏色，維護獲取歷史等。

Measure It!

MeasureIt！ 給你測量一個網站中的任何元素的尺寸（像素寬度和高度）。 Page Ruler也是一個不錯的選擇。

JavaScript Errors Notifier

安裝該擴展後，會在Chrome地址欄中以圖標形式提示JavaScript錯誤，由於Chrome默認只有打開console纔會顯示錯誤。

Window Resizer

此擴展能夠調整瀏覽器窗口的大小，以適應各類屏幕分辨率。這對於Web設計師和開發者很是有用，能夠幫助他們在不一樣的屏幕分辨率下測試網站佈局。

Firebug Lite

Firebug的精簡版容許您檢查的HTML，CSS和JavaScript代碼，生活在任何頁面。 你也能夠編輯代碼，當即測試新的變化。 這是一個開發者最喜歡的Firefox擴展Firebug的精簡版。

JQuery 擴展

jQuery擴展讓你在當前網頁中運行JavaScript和jQuery命令。

Pretty Beautiful Javascript

該擴展可使Javascript文件更容易閱讀。其整合了Beautifier和Prettify的功能，能夠爲代碼添加語法高亮。用法是在新窗口裏輸入js文件的URL或者在查看HMTL源代碼時點擊js文件的連接。若是是在Chrome的控制檯裏的資源選項裏查看代碼則推薦使用Chrome自帶的"pretty print"功能，也就是點擊"{ }"圖標。

IE Tab

在Chrome中打開IE瀏覽器標籤頁，你能夠打開一個標籤來運行Internet Explorer，讓你看到的網頁在IE瀏覽器看起來如何。

參考文獻

10個針對Web開發者的優秀Chrome插件