歡迎移步我的博客閱讀：《對(duì)于 Web 設(shè)計(jì)師和開發(fā)者非常有用的 25 個(gè) Chrome 擴(kuò)展應(yīng)用》
盡管 Chrome 的開發(fā)者工具給你足夠多的實(shí)用工具來覆蓋你的設(shè)計(jì)和開發(fā)需求唐断，但也可以通過添加免費(fèi)的擴(kuò)展應(yīng)用去進(jìn)一步擴(kuò)展瀏覽器的功能俏脊。根據(jù)你的需要，并選擇完美的擴(kuò)展逊抡，你可以輕松地創(chuàng)建一個(gè)個(gè)性化的開發(fā)環(huán)境厨诸，這會(huì)大大提高你的開發(fā)效率飒赃。
要介紹的 25 個(gè) Chrome 擴(kuò)展應(yīng)該我們?yōu)槟氵x擇分為以下幾類：前端擴(kuò)展锭环，在線編輯聪全，驗(yàn)證器與性能相關(guān)，測(cè)量擴(kuò)展應(yīng)用辅辩，顏色工具难礼，字體測(cè)試工具和 很有用的實(shí)用性擴(kuò)展應(yīng)用。
前端擴(kuò)展
SnappySnippet
SnappySnippet 把 CSS 和 HTML 從 DOM 樹里提取出來汽久，然后發(fā)送到 CodePen鹤竭，jsFiddle 或 JS Bin 上。
MagiCSS
MagiCSS 一個(gè)擁有內(nèi)置編輯器的在線 CSS 編輯擴(kuò)展應(yīng)用景醇，具有美化和減小 CSS 的功能臀稚。同時(shí)還允許創(chuàng)建 Github Gist。
CSS Dig
CSS Dig 能夠在大多數(shù)的網(wǎng)站上找到和組織樣式表和樣式塊三痰，給你一個(gè)簡(jiǎn)單的方法來分析和計(jì)劃重構(gòu)的代碼吧寺。
CSSViewer
CSSViewer 能集成很多工具和擴(kuò)展程序去執(zhí)行一個(gè)簡(jiǎn)單的任務(wù)。這使得它們更好地發(fā)揮功能散劫。但沒有 Chrome 擴(kuò)展應(yīng)用集合能在不集成的情況下可以完成這種功能稚机。用法很簡(jiǎn)單，你只需點(diǎn)擊工具欄的圖標(biāo)获搏，然后將鼠標(biāo)移到你想審查的元素上就可以了赖条。
CSS-Shack
CSS-Shack 幫助你創(chuàng)建圖層樣式（就像你用如 PS 一樣），并能生成一個(gè) CSS 文件常熙。
CSS3 Generator
CSS3 Generator 如名纬乍，可以幫助你生成 CSS3 代碼。
CSS Shapes Editor
CSS Shapes Editor 在線編輯 CSS 形狀的值裸卫。
在線編輯
WordPress Style Editor
WordPress Style Editor 支持在線審查和編輯你的 WordPress 的樣式仿贬。
PageEdit
PageEdit 能把 Chrome 變成所見即所得的編輯器，你可以用它編輯任何網(wǎng)頁墓贿。
驗(yàn)證器與性能相關(guān)
Perfmap
Perfmap 它用 Resource Timing API 來創(chuàng)建一個(gè)網(wǎng)站的前端的性能的熱圖檢查的定時(shí)器茧泪，使得可以在瀏覽器中查看加載的資源。
Validity
Validity 幫助你驗(yàn)證任何一個(gè)網(wǎng)頁聋袋《游埃可以在 console 頁查看錯(cuò)誤的數(shù)量和詳情。
Web Developer Checklist
Web Developer Checklist 必備的擴(kuò)展應(yīng)用舱馅，可以查看任何一個(gè)網(wǎng)頁的報(bào)錯(cuò)和反常的問題缰泡。
Bootlint This Page
Bootlint This Page 在 Chrome 瀏覽器上顯示一個(gè)按鈕，幫助你查看任何一個(gè)基于 BootStrap 的網(wǎng)頁的報(bào)錯(cuò)〖可以在 console 頁查看缠借。
Check My Links
Check My Links 掃描網(wǎng)頁，并把鏈接以高亮顯示宜猜，有效為綠色泼返，無效為紅色。沒人會(huì)喜歡無效的鏈接姨拥！
測(cè)量擴(kuò)展應(yīng)用
Page Ruler
Page Ruler 能夠在任何網(wǎng)上形成一個(gè)畫尺绅喉，并顯示元素的 width，height 和 position叫乌。
Dimensions
Dimensions 簡(jiǎn)單且使用的工具柴罐，為你測(cè)量屏幕寬度和高度。
顏色工具
ColorZilla
ColorZilla 起源于 Firefox憨奸，但它為 Chrome 增加了多種顏色工具革屠，像吸管，顏色選擇器排宰，調(diào)色板查看器和梯度生成器似芝。
Color Tab
Color Tab 在你每次打開一個(gè)新標(biāo)簽時(shí)，會(huì)給你一個(gè)美麗的新配色方案板甘。
字體測(cè)試工具
Fontface Ninja
Fontface Ninja 可以識(shí)別任何網(wǎng)頁的字體党瓮，同時(shí)給出它的 size 和 line-spacing。幫助你測(cè)試和探索新的字體盐类。
Font Playground
Font Playground 在任何網(wǎng)頁上預(yù)覽 Google 成千上萬的字體寞奸。
TypeWonder
TypeWonder 允許你在任何網(wǎng)站測(cè)試 web 字體。輸入站點(diǎn) URL 就可以立馬預(yù)覽字體在跳。
很有用的實(shí)用性擴(kuò)展應(yīng)用
Responsive Web Design Tester
Responsive Web Design Tester 是一個(gè)簡(jiǎn)單的工具蝇闭，來幫助快速、輕松地測(cè)試網(wǎng)站在大多數(shù)流行的移動(dòng)設(shè)備上的響應(yīng)硬毕。
45to75
45to75 為保證在所有大小設(shè)備上，你的文字是可讀的礼仗。它可以幫你把句子規(guī)定在 45 到 75 個(gè)字符之間吐咳，從而優(yōu)化句子長(zhǎng)度。
PerfectPixel
PerfectPixel 在開發(fā) HTML 時(shí)元践，它會(huì)把半透明圖像疊加在頂部韭脊，允許你在每個(gè)像素間進(jìn)行比較。
ZenHub
ZenHub 為 Github 項(xiàng)目管理應(yīng)用单旁。有節(jié)省時(shí)間的特性沪羔，如 drap-drop 任務(wù)板和 to-do 列表，幫助你提升 Github 的生產(chǎn)效率。
Instant Wireframe
Instant Wireframe 誰不喜歡漂亮的線框呢蔫饰？它給為任何一個(gè)網(wǎng)頁添加線框琅豆，同時(shí)本地的也可以。
Minimalist Markdown Editor
Minimalist Markdown Editor 同步預(yù)覽 Markdown篓吁∶Ｒ颍可以快速地幫 Markdown 轉(zhuǎn)化成 HTML。
fb-flo
fb-flo 由 Facebook 開發(fā)杖剪，同時(shí)也是 Chrome 的擴(kuò)展應(yīng)用冻押。使你能夠在線編輯 JS，CSS盛嘿，images 或任何靜態(tài)資源洛巢。
Web Developer
Web Developer 如果你現(xiàn)在還沒用這個(gè)應(yīng)用，趕緊吧次兆。這是迄今為止最受歡迎的 Chrome 和 Firefox 開發(fā)人員擴(kuò)展應(yīng)用稿茉。它添加了一個(gè)超級(jí)有用工具到瀏覽器，每個(gè)網(wǎng)頁設(shè)計(jì)師和開發(fā)人員类垦，還有你可能甚至不知道你需要的都會(huì)需要狈邑。
MySQL Admin
MySQL Admin 為你更好地，更簡(jiǎn)單地管理 MySQL 數(shù)據(jù)庫蚤认。
完畢米苹！
想要獲取更多的 Chrome 擴(kuò)展應(yīng)用，請(qǐng)看 DevTools Tips砰琢，這里收集了 Chrome 的開發(fā)工具集和基本使用方法蘸嘶。如果你是一個(gè)設(shè)計(jì)師或開發(fā)人員，想獲取更新最新的設(shè)計(jì)和開發(fā)資訊陪汽，請(qǐng)?jiān)L問 Chrome 的擴(kuò)展應(yīng)用 Muzli 或 Panda训唱。
如果你正在尋找 Firefox 的擴(kuò)展應(yīng)用，請(qǐng)看：對(duì)于 Web 開發(fā)非常有用的 20 個(gè) Firefox 擴(kuò)展應(yīng)用挚冤。
之前還有一篇發(fā)布在 Speckyboy Design Magazine 上的文章是對(duì)于 Web 設(shè)計(jì)師和開發(fā)者非常有用的 20 個(gè) Chrome 擴(kuò)展應(yīng)用况增。
