2024 年開發者瀏覽器必備擴展！！
有好的擴展工具對於開發者來說是非常有用的，它們可以提高開發效率，簡化工作流程，並且使得在瀏覽器中進行開發和調試變得更加方便。
先來看看各大瀏覽器的市場佔比：
前五大瀏覽器分別是：Chrome、Safari、Edge、Firefox、Opera。
Chrome 瀏覽器基本上一騎絕塵了，所以本文以 Chrome 瀏覽器爲例介紹開發者必備的一些擴展！！！
1、Web Developer
Web Developer 擴展提供了一個全面的開發者工具欄，包括查看和編輯 HTML、CSS、JavaScript 的功能。
Web Developer 可以禁用或啓用頁面上的 CSS 和 JavaScript，方便開發者調試網頁，還提供了元素的尺寸測量、響應式設計視圖、頁面資源查看等功能。
**安裝鏈接：**https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
2、Prettier
Prettier 是一個代碼格式化工具，它通過一個單一的配置文件來統一代碼風格，支持多種編程語言，如 JavaScript、TypeScript、CSS、HTML 等。
Prettier 可以集成到各種編輯器和 IDE 中，也可以作爲瀏覽器擴展使用。
**安裝鏈接：**https://chromewebstore.google.com/detail/prettier-chrome-extension/khnhpkjhoogpgnbhagabcnamppfohhjd
3、JSON Viewer
JSON Viewer 擴展將 JSON 數據以樹狀結構展示，使得複雜的 JSON 數據更易於閱讀和理解。
JSON Viewer 提供了搜索功能，可以快速定位到特定的數據段，支持摺疊和展開節點，以及格式化和壓縮 JSON 數據。
**安裝鏈接：**https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
4、Code Runner
Code Runer 擴展允許開發者在瀏覽器中直接運行代碼片段，支持多種編程語言。
Code Runer 提供了一個簡單的界面，用戶可以輸入代碼並立即看到結果，適合快速測試代碼片段或學習新語言。
**安裝鏈接：**https://chromewebstore.google.com/detail/code-runner/dbhlmjpfacmmmplcebbhgbofbckhmpbj
5、Octotree
在 GitHub 上瀏覽代碼時，Octotree 擴展提供一個側邊欄，顯示項目的文件結構。
Octotree 使得導航大型代碼庫變得更加容易，支持快速跳轉到文件和查看文件內容。
**安裝鏈接：**https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc
6、ColorPick Eyedropper
ColorPick Eyedropper 是一個顏色拾取工具，可以從任何網頁上吸取顏色，顯示顏色的 RGB、HEX 和 HSL 值。
ColorPick Eyedropper 對於設計師和前端開發者來說，這是一個非常有用的工具。
**安裝鏈接：**https://chromewebstore.google.com/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
7、Wappalyzer
Wappalyzer 可以檢測並顯示網站使用的技術棧，包括 CMS、電子商務平臺、JavaScript 框架等。
Wappalyzer 幫助開發者瞭解競爭對手的網站架構和技術選擇。
Wappalyzer 也可以用來發現潛在的安全漏洞。
**安裝鏈接：**https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg
8、Git History Browser Extension
Git History Browser Extension 擴展允許用戶在 GitHub 上查看文件的 Git 歷史記錄，包括每次提交的詳細信息。
Git History Browser Extension 提供了一個直觀的界面來瀏覽文件的變更歷史。
對於開發者來說，這是一個瞭解項目歷史和追蹤特定變更的有用工具。
**安裝鏈接：**https://chromewebstore.google.com/detail/git-history-browser-exten/laghnmifffncfonaoffcndocllegejnf
9、LambdaTest
LambdaTest 允許開發者在不同的瀏覽器和設備上測試他們的網頁。
LambdaTest 提供了一個雲基礎的測試平臺，可以進行跨瀏覽器兼容性測試，支持自動化測試和手動測試。
**安裝鏈接：**https://chromewebstore.google.com/detail/lambdatest/fjcjehbiabkhkdbpkenkhaahhopildlh
10、CSS Viewer
CSS Viewer 的主要功能是幫助用戶查看和複製網頁元素的 CSS 樣式。
當用戶在網頁上瀏覽時，只需點擊擴展程序的圖標，然後將鼠標懸停在想要查看的元素上，CSS Viewer 就會顯示該元素的 CSS 樣式。
**安裝鏈接：**https://chromewebstore.google.com/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce
11、UX Check
UX Check 是一個工具，用於檢查網頁的用戶體驗，並提供改進建議。
UX Check 可以分析網頁的可用性、可訪問性和性能，幫助開發者優化網頁，提高用戶滿意度。
安裝鏈接：
https://chromewebstore.google.com/detail/ux-check/giekhiebdpmljgchjojblnekkcgpdobp
12、Grepper
Grepper 是一個代碼搜索工具，可以在瀏覽器中搜索代碼庫。
Grepper 類似於 IDE 中的查找功能，但可以在瀏覽器中直接使用，適合快速查找和定位代碼片段。
**安裝鏈接：**https://chromewebstore.google.com/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco
13、Vimium
Vimium 是一個瀏覽器擴展，它允許用戶使用鍵盤快捷鍵來控制瀏覽器。
Vimium 模仿了 Vim 編輯器的操作方式，使得瀏覽網頁更加高效，對於熟悉 Vim 的用戶來說，這是一個提高生產力的工具。
**安裝鏈接：**https://chromewebstore.google.com/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb
參考鏈接：https://www.turing.com/blog/best-developer-chrome-extensions
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/PzGY54e1DXiaX259udGS-A