Hello，大家好，我是 Sunday。

作為前端開發(fā)，我們每天要打開無數(shù)個網(wǎng)頁：調(diào) API、調(diào)樣式、看日志、對比線上線下環(huán)境……

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

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

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

1. React DevTools

圖片

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

很多人常遇到的問題是： “為什么我的組件不停地重新渲染？” 有了 React DevTools，你能立刻找到罪魁禍?zhǔn)住?/p>

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

2. Vue DevTools

圖片

如果你是 Vue 開發(fā)者，這個擴展就是標(biāo)配。

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

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

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

3. JSON Viewer Pro

圖片

調(diào) API 的時候，返回一坨壓縮的 JSON 數(shù)據(jù)，光看就讓人頭暈。

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

這意味著：

• 查找字段更輕松
• 漏掉的 key 一眼就能發(fā)現(xiàn)
• 不用再手動復(fù)制到 VS Code 去排版

適合經(jīng)常和 REST API 打交道的前端同學(xué)。

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

4. Wappalyzer

圖片

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

Wappalyzer 一點開就能告訴你：它是 React 還是 Vue，后端是 Node 還是 PHP，甚至能識別 CMS、統(tǒng)計工具、CDN、服務(wù)器環(huán)境。

想要“偷學(xué)”別人的網(wǎng)站技術(shù)，這個插件，直接安裝起來

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

5. Lighthouse

圖片

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

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

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

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

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

獲取方式：

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

6. Web Developer

圖片

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

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

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

平時調(diào)試頁面時特別方便，

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

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

7. User-Agent Switcher

圖片

做前端一定繞不開一個問題：不同設(shè)備、不同瀏覽器下頁面表現(xiàn)不一樣。

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

常見的用法有：

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

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

8. Dark Reader

圖片

熬夜寫代碼的同學(xué)應(yīng)該都懂，半夜盯著一片雪白的網(wǎng)頁，眼睛直接被亮瞎。

Dark Reader 可以給所有網(wǎng)站一鍵加上暗黑模式，而且支持調(diào)整亮度、對比度，甚至可以針對單個網(wǎng)站開啟或關(guān)閉。

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

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

9. Tab Manager Plus

圖片

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

Tab Manager Plus 可以幫你：

• 可視化展示所有標(biāo)簽頁
• 快速搜索 / 關(guān)閉 / 分組
• 用快捷鍵一鍵切換

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

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

10. Postman Interceptor 或者 apifox

圖片

圖片

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

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

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

這意味著：

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

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