Hello，大家好，我是 Sunday。

作為前端開發，我們每天要打開無數個網頁：調 API、調樣式、看日志、對比線上線下環境……

時間久了你就會發現，瀏覽器其實才是我們用得最多的開發工具。

但是，光有瀏覽器還不夠。咱們還需要一些擴展工具，才可以真正的提升效率。

所以，今天這篇文章我整理了 10 個前端必備的瀏覽器擴展，從 React、Vue 調試，到 API 抓包、頁面優化，應有盡有。

1. React DevTools

圖片

如果你平時寫 React，這個擴展必須裝。 它能讓你在瀏覽器里直接看到 組件樹，隨時查看 props / state / hooks / context 的變化，還能幫你追蹤組件的渲染情況。

很多人常遇到的問題是： “為什么我的組件不停地重新渲染？” 有了 React DevTools，你能立刻找到罪魁禍首。

獲取方式： Chrome / Firefox / Edge 插件市場，搜索 “React Developer Tools” 即可。

2. Vue DevTools

圖片

如果你是 Vue 開發者，這個擴展就是標配。

它能讓你在瀏覽器里清晰地看到 組件層級，實時查看 ref / reactive 的數據變化，還支持調試 Pinia / Vuex 狀態管理，甚至能跟蹤路由變化和性能表現。

寫 Vue 項目時，很多同學喜歡瘋狂打 console.log 去看數據變化，有了 Vue DevTools，你直接在面板里就能一眼看透。

獲取方式： Chrome / Firefox 官方插件商店，搜索 “Vue.js devtools”。

3. JSON Viewer Pro

圖片

調 API 的時候，返回一坨壓縮的 JSON 數據，光看就讓人頭暈。

裝上 JSON Viewer 之后，響應會被自動格式化，高亮顯示，還能折疊/展開嵌套字段。

這意味著：

• 查找字段更輕松
• 漏掉的 key 一眼就能發現
• 不用再手動復制到 VS Code 去排版

適合經常和 REST API 打交道的前端同學。

獲取方式： Chrome 商店搜索 “JSON Formatter” 或 “JSON Viewer”。

4. Wappalyzer

圖片

有沒有好奇過某個網站到底是用什么框架寫的？

Wappalyzer 一點開就能告訴你：它是 React 還是 Vue，后端是 Node 還是 PHP，甚至能識別 CMS、統計工具、CDN、服務器環境。

想要“偷學”別人的網站技術，這個插件，直接安裝起來

獲取方式： Chrome / Firefox 商店直接搜索 “Wappalyzer”。

5. Lighthouse

圖片

這是 Google 官方出品的性能檢測工具。

它能幫你對網站做一次「體檢」，包括：性能、可訪問性、SEO、最佳實踐。

跑一遍報告，你能立刻知道：

• 頁面加載是不是太慢
• 有沒有缺少關鍵的 meta 標簽
• 無障礙評分是不是拖了后腿

很多團隊在做性能優化前，第一步就是跑 Lighthouse，看哪里拖了后腿。

獲取方式：

• 直接在 Chrome DevTools → Lighthouse 里運行
• 或者安裝擴展，一鍵生成報告

6. Web Developer

圖片

這是前端人幾乎人手一個的。

它提供了一整套快捷功能，比如：

• 一鍵禁用 JavaScript / CSS
• 給頁面元素加邊框輪廓
• 檢查圖片大小 / 缺失 alt 標簽
• 驗證 HTML 語法

平時調試頁面時特別方便，

比如你懷疑某個問題是 CSS 導致的，點一下就能直接禁用所有樣式。

獲取方式： Chrome / Firefox 商店搜索 “Web Developer”。

7. User-Agent Switcher

圖片

做前端一定繞不開一個問題：不同設備、不同瀏覽器下頁面表現不一樣。

User-Agent Switcher 可以一鍵修改 UA，讓你快速模擬成 iPhone、Android、微信內置瀏覽器，甚至是搜索引擎爬蟲。

常見的用法有：

• 驗證移動端跳轉邏輯是否生效
• 模擬爬蟲 UA 看站點 SEO 展現
• 測試不同瀏覽器 UA 的兼容情況

獲取方式： Chrome / Firefox 商店搜索 “User-Agent Switcher”。

8. Dark Reader

圖片

熬夜寫代碼的同學應該都懂，半夜盯著一片雪白的網頁，眼睛直接被亮瞎。

Dark Reader 可以給所有網站一鍵加上暗黑模式，而且支持調整亮度、對比度，甚至可以針對單個網站開啟或關閉。

除了護眼，它還有一個隱藏好處：有些網站的樣式只有在深色主題下才會暴露問題，Dark Reader 正好幫你提前踩坑。

獲取方式： Chrome / Firefox 商店搜索 “Dark Reader”。

9. Tab Manager Plus

圖片

作為前端，打開三四十個標簽頁是家常便飯：本地項目、接口文檔、調試頁面、參考資料……最后總是忘了哪個是自己的本地 3000 端口。

Tab Manager Plus 可以幫你：

• 可視化展示所有標簽頁
• 快速搜索 / 關閉 / 分組
• 用快捷鍵一鍵切換

從此告別“滿屏 tab 找不到”的痛苦。

獲取方式： Chrome 商店搜索 “Tab Manager Plus”。

10. Postman Interceptor 或者 apifox

圖片

圖片

調試接口的時候，很多請求都依賴瀏覽器里的 Cookie / Header。

如果你直接用 Postman 或者 apifox，往往得自己手動復制粘貼一大堆 Token，非常麻煩。

裝上 Postman Interceptor 之后，Postman 可以直接攔截瀏覽器的請求，把 Cookie 和 Header 自動帶過來。

這意味著：

• 登錄態接口一鍵就能測
• 不用再來回切瀏覽器和 Postman
• API 調試效率直接翻倍

獲取方式： Chrome 商店搜索 “Postman Interceptor”。