這 12 款 Chrome 瀏覽器插件，網(wǎng)頁開發(fā)必備

時間：2023-07-23 22:09:01 | 來源：網(wǎng)站運營

時間：2023-07-23 22:09:01 來源：網(wǎng)站運營

這 12 款 Chrome 瀏覽器插件，網(wǎng)頁開發(fā)必備：作者：Phoebe 前端工程師

作為一名前端開發(fā)，Google Chrome 自不必說是我們在 Web 開發(fā)過程中使用最多的瀏覽器了。除了使用方便，以及支持各種最新的網(wǎng)頁開發(fā)標準外，Chrome 背后還有數(shù)量龐大的應用擴展可供使用，使我們的日常編程不再是一件苦差事。

雖然我有朋友表示 Chrome 內(nèi)置的開發(fā)者工具已經(jīng)足夠，不需要任何額外的插件了，但是我從個人的工作經(jīng)歷中感覺到了效率的提高，因此我想把我在用的插件分享出來，希望能給需要的同學一些幫助。

Githunt

如果你經(jīng)常會花時間在 GitHub 上尋找項目靈感，Githunt 這個插件可能就很適合你。在啟用后，它會在你的瀏覽器新標簽頁上顯示你選擇關注的項目列表。

你可以自定義搜索不同語言的項目，查看項目的摘要和項目當前的 issues 情況，并通過點擊項目鏈接跳轉前往項目的 Github 進行檢查。因為這款插件收錄的幾乎都是趨勢項目，你將可以省下不少時間去做更有效率的事情（比如找 bug 和修 bug）。

ColorZilla

在正式登陸 Chrome 瀏覽器之前，ColorZillia 就作為 FireFox 上最富盛名的的取色工具知名于前端人士之間。它可以快速識別網(wǎng)頁上任何一處角落里的任何顏色，甚至是 1px 大小的邊框上的色彩都可以爬取下來，并允許用戶將取下的顏色輕松復制到其他程序中使用。

CSSViewer

CSS Viewer 是另一個對前端人員來說簡單實用的 Web 開發(fā)工具。顧名思義，這個插件在你將鼠標懸停在任何地方時，會自動出現(xiàn)一個小彈窗，顯示構成當前鼠標所指向元素的 CSS 參數(shù)。

Font Ninja

Font Ninja 是那些平日里喜歡收集各種優(yōu)秀網(wǎng)頁案例并嘗試學習的 Web 開發(fā)人員的理想選擇。 它內(nèi)置的專利算法快速有效，能在幾秒鐘內(nèi)識別出頁面中的單個字體。它還能識別出字體的大小、重量和顏色等信息，所有這些都會顯示在一個小彈出窗口中。

Check My Links

顧名思義，這是一款專門用來檢查壞鏈和死鏈的工具。除此以外，它還可以檢查頁面上的有效鏈接和重定向鏈接。這款插件不僅僅對 Web 開發(fā)者來說非常有幫助，對做網(wǎng)站 SEO 優(yōu)化業(yè)務的人員來說也很有用。

Dimensions

當你想測量頁面元素之間的間隙、尺寸，或是你在頁面上看到的任何物體之間的距離，這是一個非常有用的插件。

安裝后，你會在你的工具欄上看到一個小十字線圖標。在瀏覽器中打開一個新頁面，選擇該圖標，你會看到屏幕上出現(xiàn)一個十字線。將它拖動到你想測量的頁面元素之間，你就會看到具體的數(shù)值，簡單而優(yōu)雅。

UX Check

這是一個可用性分析插件，利用內(nèi)置的用戶體驗指標算法來評估一個頁面的可用性水平。它可以快速找出網(wǎng)頁潛在的可用性問題，并允許用戶添加注釋，進行截圖并導出，方便與其他團隊成員進行合作。

對于不需要考慮太多細節(jié)的輕量級用戶體驗測試，UX Check 可以為團隊節(jié)省下不少的時間和資源。

BuiltWith Technology Profiler

這是一款非常適合放在手邊的小工具，它可以識別絕大多數(shù)網(wǎng)站背后所用的技術棧。例如網(wǎng)絡服務提供商、使用的 CMS 平臺、網(wǎng)站分析工具、插件、JavaScript 庫和其他內(nèi)容。

安裝好插件后，只要在一個頁面上點開它，就會出現(xiàn)一個彈出窗口，向你顯示該頁面上運行的可識別技術。

Web Developer

這是一個包含了多種功能的套裝插件。雖然名字是 「Web Developer」，但我認為這個工具也適合其他的開發(fā)人員，因為它包含了許多有用的工具可供開發(fā)者調用。

安裝后，Web Developer 可通過點擊工具欄上的小齒輪圖標進入訪問。插件啟動后，你應該能看到一個小的下拉框出現(xiàn)，其中有一系列的選項被組織成標簽。選擇一個選項卡來訪問其中的工具。這里有很多東西，但每個工具都是真正有用的。

EditThisCookie

你可以用這個插件在每個頁面的基礎上進行編輯、刪除、創(chuàng)建和保存 cookies 文件，它還支持將 cookies 導出進行分析、阻止，以及添加進 JSON 文件里等等?；旧夏憧梢酝ㄟ^這款插件對網(wǎng)頁 cookies 做任何想做的事情。

JSON Viewer

JSON Viewer 可以在瀏覽器窗口中把 JSON 數(shù)據(jù)管理成可快速識別的層次視圖。當然，作為技術人員，手動處理 JSON 文件應該是必備技能，但是使用這個插件可以讓你的效率和體驗相應的提升一些。

Session Buddy

嚴格意義上這不是一款面向開發(fā)者的工具。它比較像傳統(tǒng)意義上的文件收藏夾，可以將特定的頁面保存起來，以便以后訪問。例如，當你發(fā)現(xiàn)一篇很有趣的文章但眼下沒有時間去讀，或者當你的瀏覽器上打開了太多個標簽時，它就可以派上用場了。

以上就是我在日常工作中發(fā)現(xiàn)到的好用的插件，如果你有發(fā)現(xiàn)到好用的插件是文中沒有提到的，歡迎留言！如果你覺得這篇文章對你有所幫助，也請點贊收藏！

（部分資料和圖片來源于互聯(lián)網(wǎng)）