前端偵錯工具超全匯總，效率翻倍！

在當今的前端開發領域，偵錯工具已經成為每個開發者不可或缺的「利器」。它們幫助我們高效地定位問題、最佳化程式碼，並提升整體的開發體驗。本文將詳細介紹一系列前端偵錯工具，包括開發者工具、程式碼編輯器、移動端偵錯、遠端偵錯、抓包&代理、Mock數據、介面偵錯、構建分析、效能測試、JSON檢視、線上程式碼編輯器以及點選元素跳轉程式碼等工具。讓我們一起探索這些強大的工具，為前端偵錯增添更多便捷與高效！

開發者工具

Chrome Devtools

Chrome DevTools 是一款功能豐富的瀏覽器內建開發工具集，為Web開發者提供了從元素檢查、網路監控到效能分析和安全檢測等全方位的開發和偵錯支持。透過 Devtools 可以即時編輯和偵錯網頁的HTML、CSS和JavaScript程式碼，監控和分析網路請求和效能數據，管理瀏覽器數據和套用狀態，以及確保網頁的安全性。此外，DevTools還支持裝置模擬功能，方便開發者測試網頁在不同裝置上的顯示效果。

Vue Devtools

Vue DevTools是一款專為Vue.js框架設計的瀏覽器擴充套件工具，它提供了一系列功能來幫助開發者更好地理解和偵錯Vue.js應用程式。這些功能包括概覽套用資訊、檢視頁面和路由、深入探索元件階層、管理計畫資源、追蹤狀態變化、視覺化元件依賴關系、自訂設定以及與其他Vite外掛程式的整合。Vue DevTools還可以作為一個獨立的視窗執行，便於開發者在需要時進行分屏偵錯。

React Devtools

React Devtools是一款由Facebook開發的Chrome瀏覽器擴充套件程式，它允許開發者檢查React元件樹、偵錯元件狀態和內容，以及檢視元件更新過程等。這款工具的主要作用是幫助開發者更直觀地理解和偵錯React應用程式。透過React Devtools，開發者可以檢查頁面上的React元件，檢視元件的階層、狀態和內容值，並在需要時偵錯元件的更新過程。

Nuxt DevTools

Nuxt DevTools 是一款為 Nuxt.js 開發的工具，它為Nuxt.js套用提供了詳盡的資訊和快速導航。它允許開發者檢視頁面、元件、匯入項、模組和外掛程式的詳細資訊等，並提供構建分析和SEO最佳化功能。

程式碼編輯器

VS Code

VSCode 是一款功能強大的開原始碼編輯器，提供了內建的偵錯程式，支持多種語言，包括 Node.js 和 JavaScript。使用者可以輕松地透過選擇「執行和偵錯」或使用快捷鍵 F5 開始偵錯過程。在偵錯過程中，VSCode 還支持斷點、日誌點、數據檢查、變量替換等高級功能，以及一個偵錯控制台。

WebStorm

WebStorm 是一款很受歡迎的整合式開發環境，它允許使用者偵錯 JavaScript 和 TypeScript 編寫的套用，它提供了斷點設定、逐步執行程式碼、評估運算式等高級功能，幫助開發者更加高效地偵錯程式碼。使用者可以透過簡單的操作，如選擇偵錯圖示或使用快捷鍵，來啟動偵錯過程。此外，WebStorm 還支持遠端偵錯和多種偵錯配置選項，為使用者提供了極大的靈活性和便利性。

微信開發者工具

微信開發者工具是微信官方為微信小程式開發者提供的一站式開發環境。它不僅整合了程式碼編輯、編譯、預覽、上傳、釋出以及偵錯等功能，還支持斷點偵錯、觀察變量值、執行程式碼片段等常見的偵錯功能。

移動端偵錯

vConsole

vConsole 是騰訊開源的一款專為手機網頁設計的輕量級、可延伸的前端開發者偵錯面板。這款工具與框架無關，無論是Vue、React還是其他任何前端框架，開發者都可以輕松整合vConsole來輔助開發。更值得一提的是，vConsole 現已成為微信小程式的官方偵錯工具。

Eruda

Eruda是一個專為手機網頁設計的偵錯面板，功能齊全。

GitHub： https://github.com/liriliri/eruda

遠端偵錯

PageSpy

PageSpy 是貨拉拉大前端開源的一款用來偵錯遠端 Web 計畫的工具。基於對原生 API 的封裝，它將呼叫原生方法時的參數進行過濾、轉化，整理成格式規範的訊息供偵錯端消費；偵錯端收到訊息數據，提供類控制台可互動式的功能界面將數據呈現出來。

Chii

Chii是一款與weinre類似的遠端偵錯工具，它主要將web inspector替換為最新的chrome devtools frontend。這款工具可以幫助開發者在行動裝置上進行網頁偵錯，無需在行動裝置上安裝任何特殊的套用或瀏覽器外掛程式。

抓包&代理

Charles

Charles是一個HTTP代理伺服器、HTTP監視器以及反轉代理伺服器。當瀏覽器連線Charles的代理存取互聯網時，Charles可以監控瀏覽器發送和接收的所有數據。它能夠允許開發者檢視所有連線互聯網的HTTP通訊，包括request、response以及HTTP headers。

Whistle

Whistle是一個基於Node.js的跨平台抓包偵錯工具，適用於Mac、Windows等桌面系統以及伺服端等命令列系統。它功能全面，可以作為HTTP、HTTPS、SOCKS的代理及反向代理，並支持抓包及修改HTTP、HTTPS、HTTP2、WebSocket、TCP請求。此外，它還允許重放和構造各種請求，提供上遊代理、PAC指令碼、Hosts設定以及請求響應的延遲或限速功能。

Fiddler

Fiddler是一個HTTP協定的偵錯代理工具，以代理伺服器的方式監聽系統的HTTP網路數據流動。Fiddler的功能特點包括截獲客戶端的HTTP/HTTPS請求，進行分析與開發偵錯，解決開發介面跨域問題、資源存取限制問題，快速偵錯線上指令碼、排除故障，進行弱網路環境模擬測試以暴露套用在弱網下的使用者體驗，進行介面效能測試，以及模擬各種網路攻擊。

Mock 數據

Mock.js

Mock.js是一個用於生成隨機數據、模擬 Ajax 請求的 JavaScript 庫。它基於 JavaScript 語言實作，可以方便地模擬各種數據型別，如數位、字串、陣列、物件等，並支持自訂數據格式和生成規則。Mock.js 提供了一個簡潔的 API，開發者可以使用它來快速生成模擬數據，並用於前端開發、測試、介面對接等場景。它支持在瀏覽器和 Node.js 環境中使用，並可以與多種前端框架和庫（如 Vue、React、Angular、Webpack 等）整合使用。此外，Mock.js 還支持透過攔截 Ajax 請求來模擬後端介面響應，從而幫助開發者在前端開發中模擬後端數據互動，提高開發效率和開發體驗。

faker.js

Faker.js是一個JavaScript庫，用於生成大量假數據。這個庫非常有用，特別是在前端開發、原型設計、測試、數據填充等方面。Faker.js可以生成各種型別的數據，包括名字、地址、電子信件、電話號碼、隨機文本、日期、財務資訊等。Faker.js的API設計得非常簡單和直觀，使得生成假數據變得非常容易。例如，可以使用 faker.name.findName() 來生成一個隨機的名字，或者使用 faker.address.city() 來生成一個隨機的城市名。

Chance.js

Chance.js 是一個用於生成隨機數據的 JavaScript 庫。與 Faker.js 類似，Chance.js 提供了一組豐富的 API，用於生成各種型別的數據，如數位、字串、日期、地址、姓名、電話號碼、電子信件地址等。它生成的數據很真實，例如生成的電話號碼或郵政編碼可能更接近實際使用的格式。此外，Chance.js 還提供了一些用於生成更復雜數據的函式，如生成隨機顏色、影像、UUID 等。

介面偵錯

Postman

Postman是一個介面測試工具，也可以用來模擬各種HTTP請求。在做介面測試的時候，Postman相當於一個客戶端，它可以模擬使用者發起的各類HTTP請求，將請求數據發送至伺服端，獲取對應的響應結果，從而驗證響應中的結果數據是否和預期值相匹配，並確保開發人員能夠及時處理介面中的bug。它提供了一個直觀的界面，使得發送請求、檢查響應和驗證數據變得非常容易。

Hoppscotch

Hoppscotch 是一款強大的開源 API 工具，它的原名為 Postwoman ，是知名 API 開發和測試工具 Postman 的開源替代品。它為使用者提供了一個直觀的界面，讓開發者能夠輕松地發送HTTP請求、檢視響應並進行偵錯。

Insomnia

Insomnia 是一款開源的、跨平台的 API 客戶端工具，支持多種協定如 GraphQL、REST、WebSockets 等。它提供了豐富的功能，包括偵錯 API、設計 API、測試 API，並計劃在未來支持模擬 API。此外，Insomnia 還支持多種儲存選項，包括本地儲存、雲同步和 Git 儲存，以滿足使用者的不同需求。

構建分析

Rsdoctor

Rsdoctor 是一個全面診斷和分析 Webpack 和 Rspack 構建過程與產物的工具，提供編譯耗時細節和行為展示，以及防止程式碼劣化的 Bundle Diff 功能。

Webpack Bundle Analyzer

Webpack Bundle Analyzer 是一個 Webpack 外掛程式，它將打包內容表示為方便的互動式可縮放樹狀圖。它可以透過讀取構建結果檔，生成代分碼析報告。這個報告可以直觀地分析打包出的檔有哪些，以及它們的大小、占比情況、模組包含關系、依賴等。幫助你發現構建過程中可能存在的效能瓶頸，從而更好地最佳化計畫。

Rollup Plugin Visualizer

Rollup Plugin Visualizer 是一個用於 Rollup、Vite 構建工具的外掛程式，它能夠生成視覺化的構建報告，幫助開發者更好地了解構建過程中的檔大小、依賴關系等資訊。使用這個外掛程式，可以在構建完成後生成一個互動式的HTML報告，其中包含了構建過程中的各種統計資訊，如檔大小、依賴關系、模組數量等。

效能測試

Lighthouse

Lighthouse是一個開源的自動化效能測試工具，由Google開發並免費提供給所有網站使用。它可以檢測網頁的效能、可存取性以及SEO等方面，並給出最佳化建議。Lighthouse可以直接整合到Chrome開發者工具中，也可以在Node.js環境中使用。在Chrome開發者工具中，Lighthouse位於「Audits」面板下，可以很方便地進行效能分析。而在Node.js環境中，需要全域安裝Lighthouse並使用命令列來執行。無論是哪種方式，Lighthouse都會生成一個詳細的效能報告，包括各項指標得分、潛在問題以及最佳化建議等，幫助開發人員全面了解網頁效能狀況並進行最佳化。

PageSpeed Insights

Google PageSpeed Insights 可以為網站生成效能報告，它在行動裝置和桌面裝置上都是免費的。並且還給出了影響頁面載入速度的原因，並為這些問題提供了解決方案。

Pingdom

Pingdom Website Speed Test 可以全面分析影響頁面Web速度的因素。此外，還可以檢視網站在亞洲、歐洲等多個不同的地理位置的效能資訊。

JSON 檢視

JSON Hero

JSON Hero 是一個功能強大的開源 JSON 視覺化神器，它透過簡介美觀的UI及增強的額外功能，使得閱讀和理解JSON文件變得更容易、直觀。它支持多種檢視以便檢視JSON，如列檢視、樹檢視、JSON檢視等。其中，列檢視是受macOS Finder啟發建立的一種瀏覽JSON文件的新方法。

JSON Crack

JSON Crack是一個開源的數據視覺化套用，它能夠將JSON、YAML、XML、CSV等數據格式視覺化為互動式圖表。JSON Crack具有直觀且使用者友好的界面，可以輕松探索、分析和理解即使是最復雜的數據結構。JSON Crack不僅僅簡單地展示JSON數據，而是將其轉化為類似思維導圖的形式。透過這個工具，使用者可以更方便地理解和分析復雜的JSON數據。它還支持多種操作，如放大/縮小、展開/收縮、搜尋節點以及匯出圖片等。

json.cn

json.cn 是一個提供JSON字串線上格式化的網站。它可以幫助使用者將JSON格式的字串進行格式化，使其更易於閱讀和編輯。

線上程式碼編輯器

CodeSandbox

CodeSandbox是一個線上的程式碼編輯器和開發環境，允許使用者在瀏覽器中編寫、測試和分享程式碼。它基於虛擬化技術，將使用者的程式碼和環境隔離開來，確保使用者可以在一個安全的環境中編寫程式碼，而不用擔心程式碼會影響到其他使用者或系統。CodeSandbox的虛擬化技術是基於容器技術實作的，容器可以將應用程式和其依賴項打包在一起，形成一個獨立的執行環境。

此外，CodeSandbox還提供了瀏覽器的沙盒環境和虛擬檔案系統來實作程式碼的執行和隔離。沙盒環境是一種受限的執行環境，可以限制程式碼的存取許可權，防止惡意程式碼對系統造成危害。CodeSandbox還支持多種程式語言和框架，如React、Vue、Angular、TypeScript、Node.js等，無需任何配置，只需一個瀏覽器就可以開始工作。

Stackblitz

StackBlitz是一個線上整合式開發環境（IDE），它主要針對Web開發者，並移植了很多VS Code的特性與功能，使其非常方便易用，可以一鍵建立 React、Vue、Vanilla、RxJS、TypeScript、Angular 等計畫：

碼上金塊

碼上金塊是金塊技術社群出品的一個線上程式碼 Playground 平台，具備輕量簡單、易使用、現代標準、模組化、即時編輯，所見即所得等特性。內建了 ES Modules 支持，並且支持 React、Vue 等流行前端框架。

點選元素跳轉程式碼

LocatorJS

使用 LocatorJS，在瀏覽器中單擊 UI 元件就可以直接在 IDE 中開啟其程式碼。可以透過瀏覽器外掛程式（支持 Chrome 和 Firfox）或者在計畫中安裝依賴來引入 LocatorJS，其適用於 React、Preact、Solid、Vue 和 Svelte。

react-dev-inspector

只需單擊一下即可直接從瀏覽器 React 元件跳轉到本地 IDE 對用的程式碼。適用於幾乎所有的 React 框架，例如 Vite、 Next.js、 Create React App、 Umi3、 Ice.js，或任何其他在內建中使用 @babel/plugin-transform-react-jsx-source 的 React 計畫。該外掛程式僅適用於 VS Code，但簡單，無需任何其他配置。

vite-plugin-vue-inspector

一個 vite 外掛程式，當點選瀏覽器的元素時，它提供了自動跳轉到本地 IDE 的能力，支持 Vue2、Vue3、Nuxt3、SSR。

往期推薦

每日下載超1000萬次，這個前端工具太有用了！