在當今的前端開發(fā)領域，調試工具已經(jīng)成為每個開發(fā)者不可或缺的“利器”。它們幫助我們高效地定位問題、優(yōu)化代碼，并提升整體的開發(fā)體驗。本文將詳細介紹一系列前端調試工具，包括開發(fā)者工具、代碼編輯器、移動端調試、遠程調試、抓包&代理、Mock數(shù)據(jù)、接口調試、構建分析、性能測試、JSON查看、在線代碼編輯器以及點擊元素跳轉代碼等工具。讓我們一起探索這些強大的工具，為前端調試增添更多便捷與高效！

開發(fā)者工具

Chrome Devtools

Chrome DevTools 是一款功能豐富的瀏覽器內置開發(fā)工具集，為Web開發(fā)者提供了從元素檢查、網(wǎng)絡監(jiān)控到性能分析和安全檢測等全方位的開發(fā)和調試支持。通過 Devtools 可以實時編輯和調試網(wǎng)頁的HTML、CSS和JavaScript代碼，監(jiān)控和分析網(wǎng)絡請求和性能數(shù)據(jù)，管理瀏覽器數(shù)據(jù)和應用狀態(tài)，以及確保網(wǎng)頁的安全性。此外，DevTools還支持設備模擬功能，方便開發(fā)者測試網(wǎng)頁在不同設備上的顯示效果。

官方文檔：https://developer.chrome.com/docs/devtools?hl=zh-cn。

Vue Devtools

Vue DevTools是一款專為Vue.js框架設計的瀏覽器擴展工具，它提供了一系列功能來幫助開發(fā)者更好地理解和調試Vue.js應用程序。這些功能包括概覽應用信息、查看頁面和路由、深入探索組件層次結構、管理項目資源、追蹤狀態(tài)變化、可視化組件依賴關系、自定義設置以及與其他Vite插件的集成。Vue DevTools還可以作為一個獨立的窗口運行，便于開發(fā)者在需要時進行分屏調試。

官方文檔：https://devtools-next.vuejs.org/。

React Devtools

React Devtools是一款由Facebook開發(fā)的Chrome瀏覽器擴展程序，它允許開發(fā)者檢查React組件樹、調試組件狀態(tài)和屬性，以及查看組件更新過程等。這款工具的主要作用是幫助開發(fā)者更直觀地理解和調試React應用程序。通過React Devtools，開發(fā)者可以檢查頁面上的React組件，查看組件的層次結構、狀態(tài)和屬性值，并在需要時調試組件的更新過程。

官方文檔：https://react.dev/learn/react-developer-tools。

Nuxt DevTools

Nuxt DevTools 是一款為 Nuxt.js 開發(fā)的工具，它為Nuxt.js應用提供了詳盡的信息和快速導航。它允許開發(fā)者查看頁面、組件、導入項、模塊和插件的詳細信息等，并提供構建分析和SEO優(yōu)化功能。

官方文檔：https://devtools.nuxt.com/。

代碼編輯器

VS Code

VSCode 是一款功能強大的開源代碼編輯器，提供了內置的調試器，支持多種語言，包括 Node.js 和 JavaScript。用戶可以輕松地通過選擇“運行和調試”或使用快捷鍵 F5 開始調試過程。在調試過程中，VSCode 還支持斷點、日志點、數(shù)據(jù)檢查、變量替換等高級功能，以及一個調試控制臺。

官方文檔：https://code.visualstudio.com/docs/editor/debugging。

WebStorm

WebStorm 是一款很受歡迎的集成開發(fā)環(huán)境，它允許用戶調試 JavaScript 和 TypeScript 編寫的應用，它提供了斷點設置、逐步執(zhí)行代碼、評估表達式等高級功能，幫助開發(fā)者更加高效地調試代碼。用戶可以通過簡單的操作，如選擇調試圖標或使用快捷鍵，來啟動調試過程。此外，WebStorm 還支持遠程調試和多種調試配置選項，為用戶提供了極大的靈活性和便利性。

官方文檔：https://www.jetbrains.com/help/webstorm/debugging-code.html。

微信開發(fā)者工具

微信開發(fā)者工具是微信官方為微信小程序開發(fā)者提供的一站式開發(fā)環(huán)境。它不僅集成了代碼編輯、編譯、預覽、上傳、發(fā)布以及調試等功能，還支持斷點調試、觀察變量值、執(zhí)行代碼片段等常見的調試功能。

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html。

移動端調試

vConsole

vConsole 是騰訊開源的一款專為手機網(wǎng)頁設計的輕量級、可擴展的前端開發(fā)者調試面板。這款工具與框架無關，無論是Vue、React還是其他任何前端框架，開發(fā)者都可以輕松集成vConsole來輔助開發(fā)。更值得一提的是，vConsole 現(xiàn)已成為微信小程序的官方調試工具。

GitHub：https://github.com/Tencent/vConsole。

Eruda

Eruda是一個專為手機網(wǎng)頁設計的調試面板，功能齊全。

• Console面板：捕捉各種日志類型，支持自定義樣式輸出和正則表達式過濾，還能執(zhí)行JavaScript腳本。
• Elements面板：查看和編輯頁面元素及樣式，支持高亮和點擊選取，還能查看事件綁定。
• Network面板：捕獲和分析網(wǎng)絡請求，查看詳細信息。
• Resources面板：查看和清除存儲數(shù)據(jù)，包括localStorage、sessionStorage和cookies，還能查看頁面加載的腳本、樣式和圖片。
• Sources面板：查看和格式化頁面源碼，包括html、css、js和json。
• Info面板：顯示URL和User Agent，支持自定義輸出。
• Snippets面板：為頁面元素添加邊框、刷新時間戳，還支持自定義代碼片段。

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

遠程調試

PageSpy

PageSpy 是貨拉拉大前端開源的一款用來調試遠程 Web 項目的工具?；趯υ?API 的封裝，它將調用原生方法時的參數(shù)進行過濾、轉化，整理成格式規(guī)范的消息供調試端消費；調試端收到消息數(shù)據(jù)，提供類控制臺可交互式的功能界面將數(shù)據(jù)呈現(xiàn)出來。

官方文檔：https://www.pagespy.org/docs。

Chii

Chii是一款與weinre類似的遠程調試工具，它主要將web inspector替換為最新的chrome devtools frontend。這款工具可以幫助開發(fā)者在移動設備上進行網(wǎng)頁調試，無需在移動設備上安裝任何特殊的應用或瀏覽器插件。

GitHub：https://github.com/liriliri/chii。

抓包&代理

Charles

Charles是一個HTTP代理服務器、HTTP監(jiān)視器以及反轉代理服務器。當瀏覽器連接Charles的代理訪問互聯(lián)網(wǎng)時，Charles可以監(jiān)控瀏覽器發(fā)送和接收的所有數(shù)據(jù)。它能夠允許開發(fā)者查看所有連接互聯(lián)網(wǎng)的HTTP通信，包括request、response以及HTTP headers。

官方文檔：https://www.charlesproxy.com/documentation/。

Whistle

Whistle是一個基于Node.js的跨平臺抓包調試工具，適用于Mac、Windows等桌面系統(tǒng)以及服務端等命令行系統(tǒng)。它功能全面，可以作為HTTP、HTTPS、SOCKS的代理及反向代理，并支持抓包及修改HTTP、HTTPS、HTTP2、WebSocket、TCP請求。此外，它還允許重放和構造各種請求，提供上游代理、PAC腳本、Hosts設置以及請求響應的延遲或限速功能。

GitHub：https://github.com/avwo/whistle。

Fiddler

Fiddler是一個HTTP協(xié)議的調試代理工具，以代理服務器的方式監(jiān)聽系統(tǒng)的HTTP網(wǎng)絡數(shù)據(jù)流動。Fiddler的功能特點包括截獲客戶端的HTTP/HTTPS請求，進行分析與開發(fā)調試，解決開發(fā)接口跨域問題、資源訪問限制問題，快速調試線上腳本、排除故障，進行弱網(wǎng)絡環(huán)境模擬測試以暴露應用在弱網(wǎng)下的用戶體驗，進行接口性能測試，以及模擬各種網(wǎng)絡攻擊。

官方文檔：https://www.telerik.com/fiddler。

Mock 數(shù)據(jù)

Mock.js

Mock.js是一個用于生成隨機數(shù)據(jù)、模擬 Ajax 請求的 JavaScript 庫。它基于 JavaScript 語言實現(xiàn)，可以方便地模擬各種數(shù)據(jù)類型，如數(shù)字、字符串、數(shù)組、對象等，并支持自定義數(shù)據(jù)格式和生成規(guī)則。Mock.js 提供了一個簡潔的 API，開發(fā)者可以使用它來快速生成模擬數(shù)據(jù)，并用于前端開發(fā)、測試、接口對接等場景。它支持在瀏覽器和 Node.js 環(huán)境中使用，并可以與多種前端框架和庫（如 Vue、React、Angular、Webpack 等）集成使用。此外，Mock.js 還支持通過攔截 Ajax 請求來模擬后端接口響應，從而幫助開發(fā)者在前端開發(fā)中模擬后端數(shù)據(jù)交互，提高開發(fā)效率和開發(fā)體驗。

GitHub：https://github.com/nuysoft/Mock。

faker.js

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

GitHub：https://github.com/faker-js/faker。

Chance.js

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

GitHub：https://github.com/chancejs/chancejs。

接口調試

Postman

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

官方文檔：https://learning.postman.com/docs/introduction/overview/。

Hoppscotch

Hoppscotch 是一款強大的開源 API 工具，它的原名為 Postwoman，是知名 API 開發(fā)和測試工具 Postman 的開源替代品。它為用戶提供了一個直觀的界面，讓開發(fā)者能夠輕松地發(fā)送HTTP請求、查看響應并進行調試。

Github：https://github.com/hoppscotch/hoppscotch。

Insomnia

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

GitHub：https://github.com/Kong/insomnia。

構建分析

Rsdoctor

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

GitHub：https://github.com/web-infra-dev/rsdoctor。

Webpack Bundle Analyzer

Webpack Bundle Analyzer 是一個 Webpack 插件，它將打包內容表示為方便的交互式可縮放樹狀圖。它可以通過讀取構建結果文件，生成代碼分析報告。這個報告可以直觀地分析打包出的文件有哪些，以及它們的大小、占比情況、模塊包含關系、依賴等。幫助你發(fā)現(xiàn)構建過程中可能存在的性能瓶頸，從而更好地優(yōu)化項目。

GitHub：https://github.com/webpack-contrib/webpack-bundle-analyzer。

Rollup Plugin Visualizer

Rollup Plugin Visualizer 是一個用于 Rollup、Vite 構建工具的插件，它能夠生成可視化的構建報告，幫助開發(fā)者更好地了解構建過程中的文件大小、依賴關系等信息。使用這個插件，可以在構建完成后生成一個交互式的HTML報告，其中包含了構建過程中的各種統(tǒng)計信息，如文件大小、依賴關系、模塊數(shù)量等。

GitHub：https://github.com/btd/rollup-plugin-visualizer。

性能測試

Lighthouse

Lighthouse是一個開源的自動化性能測試工具，由Google開發(fā)并免費提供給所有網(wǎng)站使用。它可以檢測網(wǎng)頁的性能、可訪問性以及SEO等方面，并給出優(yōu)化建議。Lighthouse可以直接集成到Chrome開發(fā)者工具中，也可以在Node.js環(huán)境中使用。在Chrome開發(fā)者工具中，Lighthouse位于“Audits”面板下，可以很方便地進行性能分析。而在Node.js環(huán)境中，需要全局安裝Lighthouse并使用命令行來運行。無論是哪種方式，Lighthouse都會生成一個詳細的性能報告，包括各項指標得分、潛在問題以及優(yōu)化建議等，幫助開發(fā)人員全面了解網(wǎng)頁性能狀況并進行優(yōu)化。

官方文檔：https://developer.chrome.com/docs/lighthouse/overview?hl=zh-cn。

PageSpeed Insights

Google PageSpeed Insights 可以為網(wǎng)站生成性能報告，它在移動設備和桌面設備上都是免費的。并且還給出了影響頁面加載速度的原因，并為這些問題提供了解決方案。

在線地址：https://pagespeed.web.dev/。

Pingdom

Pingdom Website Speed Test 可以全面分析影響頁面Web速度的因素。此外，還可以查看網(wǎng)站在亞洲、歐洲等多個不同的地理位置的性能信息。

在線地址：https://tools.pingdom.com/。

JSON 查看

JSON Hero

JSON Hero 是一個功能強大的開源 JSON 可視化神器，它通過簡介美觀的UI及增強的額外功能，使得閱讀和理解JSON文檔變得更容易、直觀。它支持多種視圖以便查看JSON，如列視圖、樹視圖、JSON視圖等。其中，列視圖是受macOS Finder啟發(fā)創(chuàng)建的一種瀏覽JSON文檔的新方法。

GitHub：https://github.com/triggerdotdev/jsonhero-web。

JSON Crack

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

GitHub：https://github.com/AykutSarac/jsoncrack.com。

json.cn

json.cn 是一個提供JSON字符串在線格式化的網(wǎng)站。它可以幫助用戶將JSON格式的字符串進行格式化，使其更易于閱讀和編輯。

在線地址：https://www.json.cn/。

在線代碼編輯器

CodeSandbox

CodeSandbox是一個在線的代碼編輯器和開發(fā)環(huán)境，允許用戶在瀏覽器中編寫、測試和分享代碼。它基于虛擬化技術，將用戶的代碼和環(huán)境隔離開來，確保用戶可以在一個安全的環(huán)境中編寫代碼，而不用擔心代碼會影響到其他用戶或系統(tǒng)。CodeSandbox的虛擬化技術是基于容器技術實現(xiàn)的，容器可以將應用程序和其依賴項打包在一起，形成一個獨立的運行環(huán)境。

此外，CodeSandbox還提供了瀏覽器的沙盒環(huán)境和虛擬文件系統(tǒng)來實現(xiàn)代碼的運行和隔離。沙盒環(huán)境是一種受限的執(zhí)行環(huán)境，可以限制代碼的訪問權限，防止惡意代碼對系統(tǒng)造成危害。CodeSandbox還支持多種編程語言和框架，如React、Vue、Angular、TypeScript、Node.js等，無需任何配置，只需一個瀏覽器就可以開始工作。

在線地址：https://codesandbox.io/。

Stackblitz

StackBlitz是一個在線集成開發(fā)環(huán)境（IDE），它主要針對Web開發(fā)者，并移植了很多VS Code的特性與功能，使其非常方便易用，可以一鍵創(chuàng)建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等項目：

在線地址：https://stackblitz.com/。

碼上掘金

碼上掘金是掘金技術社區(qū)出品的一個在線代碼 Playground 平臺，具備輕量簡單、易使用、現(xiàn)代標準、模塊化、實時編輯，所見即所得等特性。內置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。

在線地址：https://code.juejin.cn/。

點擊元素跳轉代碼

LocatorJS

使用 LocatorJS，在瀏覽器中單擊 UI 組件就可以直接在 IDE 中打開其代碼?？梢酝ㄟ^瀏覽器插件（支持 Chrome 和 Firfox）或者在項目中安裝依賴來引入 LocatorJS，其適用于 React、Preact、Solid、Vue 和 Svelte。

Github：https://github.com/infi-pc/locatorjs。

react-dev-inspector

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

Github：https://github.com/zthxxx/react-dev-inspector。

vite-plugin-vue-inspector

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

Github：https://github.com/webfansplz/vite-plugin-vue-inspector。