作為開發(fā)者，我們每天都在使用我們的瀏覽器做各種各樣的事情，從google搜索，在堆棧溢出上尋找解決方案，到在Reddit上浪費(fèi)時(shí)間(是的，我就是其中之一)，但也測(cè)試和運(yùn)行我們正在開發(fā)的應(yīng)用程序。這就是為正確的工作使用正確的工具的關(guān)鍵所在。

在這篇文章中，我們將介紹一些我最喜歡的瀏覽器擴(kuò)展，以提高我作為web開發(fā)人員的工作效率。

窗口大小

在Chrome商店的窗口大小調(diào)整

這個(gè)令人驚嘆的擴(kuò)展做了顧名思義的事情。它允許你改變屏幕的大小。簡(jiǎn)單但非常有用，如果你需要驗(yàn)證你的網(wǎng)站在不同的分辨率和視圖。這個(gè)擴(kuò)展提供了一組預(yù)定義的選項(xiàng)，但是你可以修改它們來滿足你的需要，這最后一個(gè)選項(xiàng)使它比簡(jiǎn)單地使用Chrome開發(fā)者工具更好。

您是否曾經(jīng)想過某個(gè)特定站點(diǎn)正在使用哪些技術(shù)?不用再懷疑Wappalyzer了。這個(gè)擴(kuò)展不僅僅是一個(gè)CMS檢測(cè)器或框架檢測(cè)器:它揭示了幾十個(gè)類別中的一千多種技術(shù)，如編程語言、分析、營(yíng)銷工具、支付處理器、CRM、CDN和其他。

不要讓外表欺騙了你，這可能不是最漂亮的工具欄，但它確實(shí)很強(qiáng)大。這個(gè)擴(kuò)展為你的瀏覽器添加了一個(gè)工具欄，有許多有用的web開發(fā)功能的選項(xiàng)，如激活/不激活腳本，彈出窗口?？刂芻ookie或查找創(chuàng)建窗體、圖像、樣式等方法的函數(shù)。

我個(gè)人已經(jīng)不再使用這個(gè)擴(kuò)展了，但在過去我還不太熟悉HTML和CSS的許多方法時(shí)，它非常有用。

此擴(kuò)展允許您輕松檢查哪些字體和字體屬性正在應(yīng)用于任何文本在一個(gè)網(wǎng)站。字體可以產(chǎn)生巨大的差異時(shí)的設(shè)計(jì)你的網(wǎng)站,你可以使用這個(gè)工具來確保他們都是應(yīng)該,或者甚至一個(gè)字體一個(gè)特定的網(wǎng)站信息正在使用,您還可以使用它在你的。

與什么字體類似，ColorZilla擴(kuò)展允許你獲得網(wǎng)站上任何像素的顏色。此外，還提供了一些便利的工具，如調(diào)色板瀏覽器和漸變生成器。

這是一個(gè)非常有趣的工具。

免責(zé)聲明:這是一個(gè)工具，我不使用，也不打算使用。使用不廣泛，評(píng)分也不高，但在twitter上被大力推薦。

這個(gè)擴(kuò)展修改了所有元素的CSS，這樣你就可以很直觀地看到每個(gè)元素的邊界在哪里。這在調(diào)試CSS布局問題時(shí)是至關(guān)重要的。

你不需要對(duì)此進(jìn)行擴(kuò)展，它可以很容易地通過一些CSS實(shí)現(xiàn)，所以如果你不想使用這個(gè)擴(kuò)展(就像我一樣)，請(qǐng)查看我的文章CSS技巧驗(yàn)證布局

結(jié)論

擴(kuò)展可以使我們的生活更輕松，就像我今天列出的那些一樣。如果您知道任何其他可以幫助開發(fā)人員提高工作效率的工具，請(qǐng)留下評(píng)論，我可以將它們合并到本文中。