對(duì)于前端開發(fā)者來說，Chrome 瀏覽器絕對(duì)是開發(fā)過程中不可缺少的利器：不僅僅是因?yàn)?Chrome 自帶的功能強(qiáng)大的 devtool，更是因?yàn)?Chrome 有著各種好用的前端語言調(diào)試工具以及諸如 EnjoyCSS、LiveReload 等這類能夠提高你編碼效率的強(qiáng)大擴(kuò)展。我們就整理了十款前端開發(fā)相關(guān)的 Chrome 插件，在這里推薦給你。

1. 掘金 Chrome 插件

對(duì)于開發(fā)者來說，比開發(fā)過程更重要的，應(yīng)該要算平時(shí)對(duì)于開發(fā)資源以及技術(shù)文章一點(diǎn)一滴的積累了吧。那么，開發(fā)者能夠在哪里獲取需要的技術(shù)內(nèi)容呢？
過去，你可能需要在 GitHub、Dribbble 等許多網(wǎng)站之間不停地跳轉(zhuǎn)來尋找自己需要的內(nèi)容，現(xiàn)在，有了掘金 Chrome 插件，只需要一個(gè)新標(biāo)簽頁面，你所需要的內(nèi)容，它都能夠?yàn)槟憔酆铣尸F(xiàn)出來，絕對(duì)算得上是發(fā)現(xiàn)干貨的利器。

2. Vue.js devtools

Chrome 開發(fā)者工具擴(kuò)展，用于調(diào)試 Vue.js 應(yīng)用。

3. React Developer Tools

React Developer Tools，可以在 Chrome 和 Firefox 開發(fā)者工具審查 React 組件的瀏覽器擴(kuò)展。

4. AngularJS Batarang

AngularJS Batarang 是適用于 Chrome 的 AngularJS WebInspector 擴(kuò)展。AngularJS Batarang 是開發(fā)者工具擴(kuò)展，用來調(diào)試和分析 AngularJS 應(yīng)用。

5. ng-inspector for AngularJS

ng-inspector for AngularJS 是一個(gè)在「檢查元素」面板中顯示當(dāng)前頁面實(shí)時(shí) AngularJS 范圍層次結(jié)構(gòu)、以及它的控制器或指令與范圍相關(guān)的瀏覽器擴(kuò)展。

6. EnjoyCSS

EnjoyCSS 能夠通過圖形化的界面幫助你在線生成 CSS3 代碼，可謂前端開發(fā)者的一大利器。

7. LiveReload

LiveReload 會(huì)監(jiān)控你指定的目錄中文件，如果有文件被更改，它就自動(dòng)觸發(fā)瀏覽器刷新頁面，這樣我們不用每次修改文件后，都要去按下 F5 刷新頁面。

8. jSonView

很方便地幫助你驗(yàn)證和查看 jSON 文檔。

9. User-Agent Switcher for Chrome

有了 User-Agent Switcher for Chrome，只需要一個(gè)瀏覽器插件，你可以隨時(shí)更換 UA，測(cè)試網(wǎng)頁的自適應(yīng)情況，能夠幫你很好地提高開發(fā)效率。

10. Page Ruler

Page Ruler 能夠幫你快速查看網(wǎng)頁中某個(gè)具體控件或者整個(gè)網(wǎng)頁具體尺寸的情況，，測(cè)量網(wǎng)頁元素，再也不用打開占據(jù)大片空間的「檢查元素」窗口了。

不管怎么說，工具只是我們?cè)陂_發(fā)過程中的輔助工具，探索好用的工具的同時(shí)，提升我們自己的開發(fā)實(shí)力才是最主要的。最后，也祝各位開發(fā)者們開發(fā)愉快！