程序員必備的16個(gè)優(yōu)秀Chrome插件
大家好，我是Echa。
互聯(lián)網(wǎng)的技術(shù)日新月異，發(fā)展迅速，作為一個(gè)與時(shí)俱進(jìn)的軟件開(kāi)發(fā)工程師，需要不斷的學(xué)習(xí)。作為Web開(kāi)發(fā)人員每天的工作就是不斷地開(kāi)發(fā)、測(cè)試、優(yōu)化，涉及到語(yǔ)言、布局、字體、樣式等技術(shù)。整個(gè)開(kāi)發(fā)過(guò)程離不開(kāi)瀏覽器。瀏覽器插件就像是瀏覽器的“裝備”，可以增加瀏覽器額外的特性和功能。針對(duì)開(kāi)發(fā)人員的日常工作，有些瀏覽器插件非常實(shí)用、高效，有助于開(kāi)發(fā)、優(yōu)化前端產(chǎn)品，節(jié)省開(kāi)發(fā)時(shí)間成本。
由于小編接觸的開(kāi)發(fā)人員大多數(shù)更喜歡使用Chrome瀏覽器，另外，據(jù)統(tǒng)計(jì)截至2023年8月 Chrome在全球?yàn)g覽器市場(chǎng)占有率為63.56%，全球份額排名第一，并且逐年上升。
借此機(jī)會(huì)，今天小編給大家好物分享程序員必備的16個(gè)優(yōu)秀Chrome插件，希望對(duì)大家有所幫助，讓大家把開(kāi)發(fā)效率提高。下面內(nèi)容主要為開(kāi)發(fā)人員推薦一些免費(fèi)的最佳chrome插件
全文大綱
- Window Resizer - 可以調(diào)整瀏覽器窗口大小以模擬各種屏幕分辨率Chrome插件
- BrowserStack - 支持在任何桌面或移動(dòng)設(shè)備瀏覽器上即時(shí)測(cè)試網(wǎng)頁(yè)。
- ColorZilla - 是包含顏色選擇器、顏色歷史、CSS梯度分析器等功能的插件
- WhatFont - 此插件可以輕松有效地識(shí)別任何網(wǎng)頁(yè)中的字體。
- Check My Links - 主要用于檢查網(wǎng)站上的鏈接是否有損壞，對(duì)維護(hù)網(wǎng)頁(yè)的SEO標(biāo)準(zhǔn)非常有幫助。
- JavaScript and CSS Code Beautifier - 這個(gè)插件有助于美化代碼，重新排列代碼，讓代碼的可讀性和可操作性更佳。
- Web Developer - 查找損壞的圖像、顯示圖像尺寸、顯示圖像路徑、重載圖像等等。
- Session Buddy - 是個(gè)會(huì)話管理器，它允許開(kāi)發(fā)人員保持已打開(kāi)的選項(xiàng)卡，管理選項(xiàng)卡集合，便于以后恢復(fù)，可以在瀏覽器崩潰后恢復(fù)。
- JSON Viewer - 前端開(kāi)發(fā)經(jīng)常處理的內(nèi)容，如果JSON數(shù)據(jù)格式雜亂無(wú)章處理起來(lái)有時(shí)會(huì)很困難。
- Wappalyzer - 該插件可以幫助開(kāi)發(fā)找出網(wǎng)站所使用的所有底層技術(shù)。
- Test IE - 這個(gè)插件支持模擬IE瀏覽器，便于測(cè)試各種IE版本的頁(yè)面兼容性。
- Lighthouse - 這個(gè)插件可以運(yùn)行快速測(cè)試頁(yè)面來(lái)審查網(wǎng)頁(yè)的性能和質(zhì)量，以生成有助于識(shí)別弱點(diǎn)的報(bào)告，幫助開(kāi)發(fā)人員進(jìn)一步優(yōu)化網(wǎng)頁(yè)。
- Ghostery - 一個(gè)可以阻止任何網(wǎng)站廣告并終止網(wǎng)站跟蹤器的插件。
- CSSViewer - 這個(gè)插件可以幫助Web開(kāi)發(fā)人員輕松查看網(wǎng)頁(yè)底層CSS屬性。
- ClickUp - 可以提高開(kāi)發(fā)人員的工作效率。
- React Developer Tools - 是一個(gè)Chrome DevTools 的擴(kuò)展，用于基于React框架的前端開(kāi)發(fā)。
Chrome插件 匯總
Window Resizer - 可以調(diào)整瀏覽器窗口大小以模擬各種屏幕分辨率Chrome插件
傳送門(mén)：https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/
Window Resizer
前端開(kāi)發(fā)總是需要測(cè)試頁(yè)面在不同設(shè)備、瀏覽器、屏幕尺寸和分辨率下的運(yùn)行顯示狀況。
Window Resizer可以調(diào)整瀏覽器窗口大小以模擬各種屏幕分辨率，對(duì)Web前端開(kāi)發(fā)人員測(cè)試頁(yè)面布局非常有用，特別是使用響應(yīng)式設(shè)計(jì)的頁(yè)面。
DuckDuckGo
BrowserStack - 支持在任何桌面或移動(dòng)設(shè)備瀏覽器上即時(shí)測(cè)試網(wǎng)頁(yè)。
傳送門(mén)：https://chrome.google.com/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb?hl=en
BrowserStack 瀏覽器插件
這個(gè)插件支持在任何桌面或移動(dòng)設(shè)備瀏覽器上即時(shí)測(cè)試網(wǎng)頁(yè)。可以在瀏覽器中快速啟動(dòng)新的會(huì)話。最多可以支持12個(gè)瀏覽器的快速訪問(wèn)，減少了切換瀏覽器的時(shí)間。它可以測(cè)試網(wǎng)頁(yè)或應(yīng)用程序的響應(yīng)能力，實(shí)時(shí)檢查、優(yōu)化用戶體驗(yàn)。
BrowserStack
ColorZilla - 是包含顏色選擇器、顏色歷史、CSS梯度分析器等功能的插件
傳送門(mén)：https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
Colorzilla是包含顏色選擇器、顏色歷史、CSS梯度分析器等功能的插件。它可以讓W(xué)EB開(kāi)發(fā)人員或前端設(shè)計(jì)師直接選擇顏色并將結(jié)果應(yīng)用到設(shè)計(jì)或代碼中。
高級(jí)吸管、拾色器、漸變生成器和其他與顏色相關(guān)的實(shí)用工具
ColorZilla是最用戶友好、功能齊全、安全且可靠的顏色選擇器和與顏色相關(guān)的工具套件。它是Chrome和Firefox開(kāi)發(fā)者擴(kuò)展中最受歡迎的之一，全球下載量超過(guò)1000萬(wàn)次。
使用ColorZilla，您可以從瀏覽器的任何位置獲取顏色讀數(shù)，快速調(diào)整此顏色并將其粘貼到另一個(gè)程序中。它還有更多功能...
== 功能 ==
- ? 取色器 - 獲取頁(yè)面上任何像素的顏色
- ? 高級(jí)顏色選擇器（類似于Photoshop的）
- ? 終極CSS漸變生成器
- ? 網(wǎng)頁(yè)顏色分析器 - 獲取任何站點(diǎn)的顏色調(diào)色板
- ? 帶有7個(gè)預(yù)裝調(diào)色板的調(diào)色板查看器
- ? 最近選中顏色的顏色歷史
- ? 各種采樣大小 - 1x1、3x3、5x5、11x11 和 25x25 像素
- ? 采樣任何選定區(qū)域的平均顏色
- ? 顯示元素信息，如標(biāo)簽名、類、id、大小等
- ? 自動(dòng)復(fù)制所選顏色到剪貼板
- ? 鍵盤(pán)快捷鍵
- ? 通過(guò)其色調(diào)/飽和度/值組件操作顏色
- ? 獲取動(dòng)態(tài)懸停元素的顏色
- ? 單擊開(kāi)始選擇顏色（目前僅在Windows上）
- ? 在任何縮放級(jí)別選擇顏色
- ? 所有功能都在這里
WhatFont - 此插件可以輕松有效地識(shí)別任何網(wǎng)頁(yè)中的字體。
傳送門(mén)：https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
WhatFont 插件
這個(gè)此插件可以輕松有效地識(shí)別任何網(wǎng)頁(yè)中的字體，只需將鼠標(biāo)懸停在某一個(gè)文本上就可以顯示文本相關(guān)的字體信息。另外，它還有助于識(shí)別文本的樣式、大小、粗細(xì)和顏色等。
WhatFont 插件
Check My Links - 主要用于檢查網(wǎng)站上的鏈接是否有損壞，對(duì)維護(hù)網(wǎng)頁(yè)的SEO標(biāo)準(zhǔn)非常有幫助。
傳送門(mén)：https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf
Check My Links 插件
這個(gè)插件就如同他的名字，主要用于檢查網(wǎng)站上的鏈接是否有損壞，對(duì)維護(hù)網(wǎng)頁(yè)的SEO標(biāo)準(zhǔn)非常有幫助。
JavaScript and CSS Code Beautifier - 這個(gè)插件有助于美化代碼，重新排列代碼，讓代碼的可讀性和可操作性更佳。
傳送門(mén)：https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald?hl=en
Web開(kāi)發(fā)人員常需要檢查網(wǎng)頁(yè)的源代碼。這個(gè)插件有助于美化代碼，重新排列代碼，讓代碼的可讀性和可操作性更佳。
Web Developer - 查找損壞的圖像、顯示圖像尺寸、顯示圖像路徑、重載圖像等等。
傳送門(mén)：https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US
Web Developer 插件
這個(gè)插件是Web開(kāi)發(fā)人員的必備。它在Chrome Web瀏覽器的工具欄上添加一個(gè)按鈕。點(diǎn)擊這個(gè)按鈕后，會(huì)顯示一系列功能，包括：CSS、Cookie、圖像、表單、大綱、信息、調(diào)整大小等。例如，在“圖像”功能下，可以有以下子功能：查找損壞的圖像、顯示圖像尺寸、顯示圖像路徑、重載圖像等等。
Session Buddy - 是個(gè)會(huì)話管理器，它允許開(kāi)發(fā)人員保持已打開(kāi)的選項(xiàng)卡，管理選項(xiàng)卡集合，便于以后恢復(fù)，可以在瀏覽器崩潰后恢復(fù)。
傳送門(mén)：https://chrome.google.com/webstore/detail/session-buddy/edacconmaakjimmfgnblocblbcdcpbko
Session Buddy 插件
Session Buddy是個(gè)會(huì)話管理器，它允許開(kāi)發(fā)人員保持已打開(kāi)的選項(xiàng)卡，管理選項(xiàng)卡集合，便于以后恢復(fù)，可以在瀏覽器崩潰后恢復(fù)。這個(gè)插件支持搜索，可以輕松地在打開(kāi)或保存的選項(xiàng)卡中找到與搜索內(nèi)容相關(guān)的選項(xiàng)卡。
JSON Viewer - 前端開(kāi)發(fā)經(jīng)常處理的內(nèi)容，如果JSON數(shù)據(jù)格式雜亂無(wú)章處理起來(lái)有時(shí)會(huì)很困難。
傳送門(mén)：https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en&ref=hackernoon.com
json是前端開(kāi)發(fā)經(jīng)常處理的內(nèi)容，如果JSON數(shù)據(jù)格式雜亂無(wú)章處理起來(lái)有時(shí)會(huì)很困難。JSON查看器插件可以美化、結(jié)構(gòu)化Json數(shù)據(jù)，功能包括：語(yǔ)法高亮、排序json、顯示行號(hào)等
Wappalyzer - 該插件可以幫助開(kāi)發(fā)找出網(wǎng)站所使用的所有底層技術(shù)。
傳送門(mén)：https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg
Wappalyzer 插件
說(shuō)到這個(gè)Wappalyzer 插件，小編有專門(mén)介紹。用這個(gè)Wappalyzer插件來(lái)揭秘12哥大廠對(duì)前沿技術(shù)。請(qǐng)見(jiàn)這篇：揭秘12個(gè)大廠的前沿技術(shù)
Wappalyzer插件可以幫助開(kāi)發(fā)找出網(wǎng)站所使用的所有底層技術(shù)。
只需點(diǎn)擊插件按鈕，就可以查看網(wǎng)站所采用的編程語(yǔ)言、CMS、數(shù)據(jù)庫(kù)、Web服務(wù)、內(nèi)容管理、生成器、服務(wù)器軟件、分析工具、電子商務(wù)平臺(tái)、插件、小部件、JavaScript框架等信息。
Test IE - 這個(gè)插件支持模擬IE瀏覽器，便于測(cè)試各種IE版本的頁(yè)面兼容性。
傳送門(mén)：https://chrome.google.com/webstore/detail/test-ie/eldlkpeoddgbmpjlnpfblfpgodnojfjl?hl=en
Test IE 插件
盡管大多數(shù)開(kāi)發(fā)人員喜歡Chrome，但有些最終用戶仍然使用Internet Explorer或Edge。作為開(kāi)發(fā)人員，需要考慮網(wǎng)頁(yè)的瀏覽器兼容性。這個(gè)插件支持模擬IE瀏覽器，便于測(cè)試各種IE版本的頁(yè)面兼容性。
Lighthouse - 這個(gè)插件可以運(yùn)行快速測(cè)試頁(yè)面來(lái)審查網(wǎng)頁(yè)的性能和質(zhì)量，以生成有助于識(shí)別弱點(diǎn)的報(bào)告，幫助開(kāi)發(fā)人員進(jìn)一步優(yōu)化網(wǎng)頁(yè)。
傳送門(mén)：https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
Lighthouse 插件
網(wǎng)站的效率對(duì)于能不能留住用戶至關(guān)重要。這個(gè)插件可以運(yùn)行快速測(cè)試頁(yè)面來(lái)審查網(wǎng)頁(yè)的性能和質(zhì)量，以生成有助于識(shí)別弱點(diǎn)的報(bào)告，幫助開(kāi)發(fā)人員進(jìn)一步優(yōu)化網(wǎng)頁(yè)。
Ghostery - 一個(gè)可以阻止任何網(wǎng)站廣告并終止網(wǎng)站跟蹤器的插件。
傳送門(mén)：https://chrome.google.com/webstore/detail/ghostery-%E2%80%93-privacy-ad-blo/mlomiejdfkolichcflejclcbmpeaniij?hl=en
Ghostery是一個(gè)可以阻止任何網(wǎng)站廣告并終止網(wǎng)站跟蹤器的插件，可以提高網(wǎng)頁(yè)瀏覽效率、保護(hù)隱私。
CSSViewer - 這個(gè)插件可以幫助Web開(kāi)發(fā)人員輕松查看網(wǎng)頁(yè)底層CSS屬性。
傳送門(mén)：https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce/related?hl=en
看到一個(gè)很酷的網(wǎng)站，作為Web開(kāi)發(fā)人員，有時(shí)候經(jīng)常想借鑒它們的樣式，想知道它的CSS并在自己的網(wǎng)頁(yè)中使用。這個(gè)插件可以幫助Web開(kāi)發(fā)人員輕松查看網(wǎng)頁(yè)底層CSS屬性。只需要單擊工具欄CSSViewer圖標(biāo)，然后將鼠標(biāo)懸停在網(wǎng)頁(yè)元素上，就可以看到元素相關(guān)的CSS。
ClickUp - 可以提高開(kāi)發(fā)人員的工作效率。
傳送門(mén)：https://chrome.google.com/webstore/detail/clickup-tasks-screenshots/pliibjocnfmkagafnbkfcimonlnlpghj
ClickUp可以提高開(kāi)發(fā)人員的工作效率。他的功能包括：
- 創(chuàng)建任務(wù)并將網(wǎng)站另存為任務(wù)
- 時(shí)間跟蹤：輕松將時(shí)間附加到ClickUp任務(wù)
- 屏幕截圖：捕獲、標(biāo)記和編輯屏幕截圖
- 電子郵件：創(chuàng)建任務(wù)并將電子郵件附加到任務(wù)
- 記事本
React Developer Tools - 是一個(gè)Chrome DevTools 的擴(kuò)展，用于基于React框架的前端開(kāi)發(fā)。
傳送門(mén)：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
React Developer Tools
React Developer Tools是一個(gè)Chrome DevTools 的擴(kuò)展，用于基于React框架的前端開(kāi)發(fā)?？梢杂眠@個(gè)插件查看React組件層次結(jié)構(gòu)。在DevTools的Components選項(xiàng)卡中顯示頁(yè)面上渲染的React組件。
