React 調試不求人：VS Code 與 Chrome 的終極指南 Detail - 前端,next.js,react,web,框架學習長林啊 Blog

大家好，我是長林啊！一個 Go、Rust 愛好者，同時也是一名全棧開發者；致力於終生學習和技術分享。

本文首發於微信公眾號《全棧修煉之旅》，歡迎大家關注！

在開發過程中，調試無疑是我們解決疑難雜症的手段之一，但調試不僅僅是在解決 Bug 的時候才能應用的技能，當拿到一個新的項目時，我們也可以通過調試的方法，去快速瞭解代碼、熟悉業務。

React調試不求人：VS Code 與 Chrome 的終極指南

本文工具及代碼環境：

Visual Studio Code Version: 1.92.1

Node.js version：v20.10.0

Yarn version：v4.4.0

React version：v18.3.1

下面就是本文要涉及的幾個方面：

調試的概念
常用的調試工具
使用 vite 創建一個 react 項目
在 Chrome 中調試 react 項目
在 VS Code 中調試 react 項目

概念

什麼是調試呢？調試就是代碼在某個平台（網頁、小程序、桌面應用、Node.js後台服務等）運行，把運行時的狀態（調用棧、執行上下文、DOM結構、組件狀態、網絡、緩存等）通過某種方式暴露出來，傳遞給開發工具做 UI 的展示和交互，輔助開發者排查問題、梳理流程、瞭解代碼運行狀態等，這個就是調試。

在前端開發中，調試是日常任務的一部分。例如，使用 Chrome DevTools 進行網頁調試，我們可以查看和編輯 DOM 元素，監控網絡請求，設置 JavaScript 代碼的斷點，以及利用 Performance 工具來分析頁面性能。這些都是針對網頁層面的調試手段。

對於服務器端或後端邏輯的調試，VSCode Debugger 提供了強大的支持。它允許我們同時對多個進程的代碼進行調試，無論是理解代碼邏輯還是追蹤問題，VSCode Debugger 都是 Node.js 開發者的得力助手。

對於使用現代 JavaScript 框架（Vue/React）的開發者來説，特定的調試工具是必不可少的。例如，通過 React DevTools 和 Vue DevTools 這類Chrome插件，我們可以深入調試 React 和 Vue 組件。另外，獨立的 React DevTools 也常用於調試 React Native 應用，這些工具幫助我們優化組件邏輯和性能。

常用的調試工具

前端開發中常用的調試工具非常多，涵蓋了從瀏覽器內置工具到代碼編輯器插件，再到網絡抓包和模擬數據等多個方面；下面就以最主要的 Chrome DevTools、VS Code Debugger 和 React DevTools 為側重點。

Chrome DevTools

Chrome DevTools 是一套直接內置於 Google Chrome 瀏覽器中的 Web 開發人員工具。Chrome DevTools（簡稱DevTools）是一組網頁製作和調試的工具，內嵌於 Google Chrome 瀏覽器中。DevTools使開發者更加深入的瞭解瀏覽器內部以及他們編寫的應用。通過使用 DevTools，可以更加高效的定位頁面佈局問題，設置 JavaScript 斷點並且更好的理解代碼優化。

注意: 如果你是一個web開發者並且希望獲取最新版本的DevTools，你可以使用 Google Chrome Canary.

打開 DevTools 的方式有很多種，因為不同的用户希望快速訪問 DevTools UI 的不同部分。

要使用 DOM 或 CSS，請右鍵單擊頁面上的元素並選擇“檢查”以跳轉到“元素”面板。或者按 Command+ Option+ C(Mac) 或 Control+ Shift+ C(Windows、Linux、ChromeOS)。
要查看記錄的消息或運行 JavaScript，請按 Command+ Option+ J（Mac）或 Control+ Shift+ J（Windows、Linux、ChromeOS）直接跳轉到控制枱面板。

訪問 DevTools

訪問DevTools，首先用 Chrome 打開一個 web 頁面或 web 應用，也可以通過下面的方式：

在瀏覽器窗口的右上方選擇 Chrome 菜單, 然後選擇 更多工具 > 開發者工具。
在頁面上任意元素上右鍵，然後選擇審查元素。

DevTools 窗口會在 Chrome 瀏覽器的底部（默認是在底部）打開。

下面是一些有用的快捷鍵來快速的打開DevTools:

使用 Ctrl + Shift + I (Mac 上為 Cmd+Opt+I)打開 DevTools。
使用 Ctrl + Shift + J (Mac 上為 Cmd+Opt+J)打開 DevTools 中的控制枱。
使用 Ctrl + Shift + C (Mac 上為 Cmd+Shift+C)打開 DevTools 的審查元素模式。

為了日常工作，學習快捷鍵將幫助你節省更多的時間。

DevTools 窗口

DevTools 在窗口頂部的工具欄對不同的任務功能進行分組。在每個工具欄選項卡和對應的操作面板中，你可以處理某項特殊的任務，例如 DOM 元素，資源和源碼。

DevTools 目前主要包括以下八個主要功能組：

Device Mode：模擬移動設備。
Elements：查看和更改 DOM 和 CSS。
- 開始查看和更改 DOM
- 開始查看和更改 CSS
- 修改 CSS
- 修改 DOM
- 查找無效、被替換、無效和其他 CSS 的 CSS
- 發掘潛在的 CSS 改進
- 模擬淺色/深色主題、對比度和其他 CSS 媒體功能
- 查找未使用的 CSS
- 檢查動畫
Console：通過控制枱查看消息並運行 JavaScript。
- 開始使用控制枱
- 控制枱實用程序 API 參考文檔
- Console API 參考文檔
Sources：調試 JavaScript，在頁面重新加載時保留在開發者工具中所做的更改，保存和運行 JavaScript 代碼段，並將在開發者工具中所做的更改保存到本地源代碼中。
- 開始調試 JavaScript
- 使用斷點暫停代碼
- 在工作區中編輯和保存文件
- 運行 JavaScript 代碼段
- JavaScript 調試參考文檔
- 在本地替換 Web 內容和 HTTP 響應標頭
Network：查看和調試網絡活動。
- 檢查網絡活動
- 網絡功能參考
- 查看網頁資源
Recorder：錄製、重放和衡量用户流。
- 錄製、重放和衡量用户流
- 使用擴展程序自定義“錄音機”應用
- 錄音機功能參考
Performance：找到提高加載和運行時性能的方法。
- 優化網站速度
- 分析運行時性能
- 性能功能參考
Memory：查找並修復影響頁面性能的內存問題，例如內存泄漏。
- 解決內存問題
Application：檢查已加載的所有資源，包括 IndexedDB 或 Web SQL 數據庫、本地和會話存儲、Cookie、應用緩存、圖片、字體和樣式表。
- 調試漸進式 Web 應用
- 查看和修改本地存儲空間
- 查看、添加、修改和刪除 Cookie
- 查看源試用信息
Security：調試混合內容問題、證書問題等。
- 瞭解安全問題

你可以通過 Ctrl+[ 和 Ctrl+] 快捷鍵在不同面板之間進行切換。

還有更多使用技巧可以查看官方文檔。

source 面板

使用 Chrome 開發者工具 Sources 面板可以執行以下操作：

查看文件。
修改 CSS 和 JavaScript。
創建和保存 JavaScript 代碼段，以便在任何網頁上運行。代碼段類似於小書籤。
調試 JavaScript。
設置工作區，以便將您在開發者工具中所做的更改保存到文件系統的代碼中。

面板包含三個部分：

包含文件樹的頁面標籤頁。此處列出了頁面請求的每個文件。
代碼編輯器部分。在 Page 標籤頁中選擇文件後，該文件的內容會顯示在此處。
Debugger 部分。用於檢查網頁 JavaScript 的各種工具。

如果開發者工具窗口較寬，默認情況下，Debugger 位於代碼編輯器的右側。在這種情況下，Scope 和 Watch 標籤頁會將 Breakpoints、Call stack 和其他作為可收起的部分聯接。如下圖：

更多信息可以查看 Chrome 開發者文檔！

VS Code Debugger

VS Code，全稱為 Visual Studio Code，是由微軟開發的一款免費且開源的代碼編輯器。自從2015年發佈以來，VS Code 憑藉其高效、輕量和強大的功能迅速贏得了廣大開發者的青睞。以下是 VS Code 流行的一些主要原因：

跨平台支持：VS Code 可以運行在 Windows、macOS 和 Linux 上，滿足不同操作系統用户的需求。
豐富的擴展庫：VS Code 提供了一個強大的擴展市場，用户可以根據需要安裝插件來支持不同的編程語言和開發工具。
內置 Git 支持：VS Code 內置了 Git 支持，方便開發者進行版本控制和代碼管理。
高度可定製：用户可以通過配置文件自定義 VS Code 的界面和功能，以適應個人的開發習慣。
強大的調試功能：VS Code 內置了強大的調試工具，支持多種編程語言，使得調試變得更加高效和便捷。

VS Code 內置的調試工具稱為 VS Code Debugger，它為開發者提供了一個強大且易用的調試環境。以下是 VS Code Debugger 的主要功能：

斷點管理：允許開發者在代碼中設置斷點和條件斷點，以便在特定位置暫停程序的執行。
變量查看：在調試過程中，開發者可以實時查看和評估變量的值，幫助定位問題。
調用棧：顯示當前執行的調用棧，幫助開發者瞭解程序的執行路徑。
控制調試流程：提供單步執行、繼續運行、跳過和恢復等控制功能，使調試過程更加靈活。
調試控制枱：開發者可以在調試控制枱中輸入表達式和命令，直接與正在運行的程序進行交互。
多語言支持：VS Code Debugger 支持多種編程語言，包括 JavaScript、Python、Java、C++ 等。

下載 VS Code（如果已經安裝可以忽略此步驟）

VS Code 是免費的，官網下載地址

配置 VS Code

安裝擴展：打開 VS Code 後，您可以通過左側邊欄的擴展（Extensions）圖標，搜索並安裝所需的語言支持和工具擴展。推薦掘金社區一篇文章《2024 最新最全 VS Code 插件推薦！》
設置同步：登錄您的 GitHub 或 Microsoft 賬户，可以將您的設置同步到雲端，在不同設備之間共享。
個性化配置：通過點擊右下角的齒輪圖標（設置），您可以根據個人習慣自定義 VS Code 的界面和功能。

先對 VS Code 有個大致瞭解，下面會具體實操調試技巧！

使用 Vite 創建 React 項目

使用 yarn 創建項目
```
$ yarn create vite
```
用 vscode 打開項目，並安裝依賴
使用命令 yarn dev 運行項目並在瀏覽器中訪問

運行效果：

以上代碼可以在 clin211/react-awesome/tree/debug-react-project 中獲取到！

React DevTools

在web端的 react 項目裏， React DevTools 是作為瀏覽器的插件引入進來， chrome 中可以在擴展程序裏面添加；可以通過以下方式安裝：

打開 chrome 網上商店可能需要科學上網，firefox 和 microsoft edge 不需要科學上網也可正常安裝插件，使用上並無區別。

chrome 中安裝：右上角三個點 -> 擴展程序 -> 訪問 chrome 應用商店 -> 然後搜索 React DevTools -> 安裝，如下圖：
<img src="https://files.mdnice.com/user/8213/e1ae16f5-3290-402a-9010-c518ece70699.png" />
Firefox 中安裝：打開菜單 -> Web開發者 -> 獲取更多工具 -> 搜索 React Developer Tools -> 安裝。
Microsoft Edge 中安裝：打開右上角三個點 -> 擴展 -> 擴展管理 -> 搜索 React Developer Tools -> 安裝。

Safari 或其他瀏覽器:

全局安裝: npm i -g react-devtools

在終端中運行 react-devtools

在要調試的網頁的 head 中添加 <script src="http://localhost:8097"></script>

工具入口

如果檢測到當前web是 react 項目，右上角的工具小圖標（地址欄右側）會發生改變，分別對應着：
<ul>
<li style="display:flex;align-items:center;justify-content:flex-start;text-align:left"><img src="https://files.mdnice.com/user/8213/be276e20-aedf-4bf7-b221-0c9c26ba37d0.png" width="40px" height="40px" style="width:40px;height:40px" /><p style="flex:1;margin-left:8px;">debug版本的 react 項目，正在 coding。</p></li>
<li style="display:flex;align-items:center;justify-content:flex-start;"><img src="https://files.mdnice.com/user/8213/db9a028f-4ae8-423b-8222-3e88a58fa818.png" width="40px" height="40px" style="width:40px;height:40px;margin-left:-2px" /><p style="flex:1;margin-left:8px">生產版本的 react，説明已經打包發佈了。</p></li>
<li style="display:flex;align-items:center;justify-content:flex-start;"><img src="https://files.mdnice.com/user/8213/a05da0a2-b829-459d-a53f-385ef60d96ee.png" width="40px" height="40px" style="width:40px;height:40px" /><p style="flex:1;margin-left:8px">表示當前依賴的 react 版本比較老，一般會在 react15 以及更早的版本出現。</p></li>
<li style="display:flex;align-items:center;justify-content:flex-start;"><img src="https://files.mdnice.com/user/8213/f46453ee-cd32-483e-b8d8-72bf1e68a47f.png" width="40px" height="40px" style="width:40px;height:40px" /><p style="flex:1;margin-left:8px">Web中並沒有檢測到有 react 的依賴。</p></li>
</ul>

chrome 中右鍵點擊檢查，打開調試器，然後發現在調試器的 tab 欄末尾有最後兩欄比較特殊的tab，分別是 ⚛️Components 和 ⚛️Profiler，這兩個就是 react devtools 的功能入口了，下面會來介紹各自的功能。

Components 面板功能説明

在 Components 面板中，我們可以看到組件的結構以及相應的數據。

下面我們一個例子看看，DOM 結構如下：

import { useState } from 'react'
import classNames from 'classnames';
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App () {
  return (
    <>
      <div>
        <Logo href="https://vitejs.dev" src={viteLogo} alt="Vite logo" />
        <Logo href="https://react.dev" src={reactLogo} className="react" alt="React logo" />
      </div>
      <h1>Vite + React</h1>
      <Counter />
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

function Logo (props) {
  return <a href={props.href} target="_blank">
    <img src={props.src} className={classNames('logo', props.className)} alt={props.alt} />
  </a>
}

function Counter () {
  const [count, setCount] = useState(0)
  return <div className="card">
    <button onClick={() => setCount((count) => count + 1)}>
      count is {count}
    </button>
    <p>
      Edit <code>src/App.jsx</code> and save to test HMR
    </p>
  </div>
}

export default App

這段代碼中，<App/> 組件中有兩個 <Logo /> 組件和一個 <Counter /> 組件，我們看看瀏覽器中 Components 面板有啥變化，如下圖：

還可以看到組件中的 props，如 <Logo /> 組件中的 props：

function Logo(props) {
  return <a href={props.href} target="_blank">
    <img src={props.src} className={classNames('logo', props.className)} alt={props.alt} />
  </a>
}

當然也能看到相關 Hooks，比如 Counter 組件中的 state count：

function Counter() {
  const [count, setCount] = useState(0)
  return <div className="card">
    <button onClick={() => setCount((count) => count + 1)}>
      count is {count}
    </button>
    <p>
      Edit <code>src/App.jsx</code> and save to test HMR
    </p>
  </div>
}

在項目中用了一些 react-router ， redux 等工具後，虛擬 Dom 樹可能會受到一些侵入，比如 Dom 樹中多了一些 Conext.Consumer 的結構，這些是 context 的語法，不管這些結構，雙擊目標組件就可以展開當前組件下的所有子組件，這種方式有個弊端就是在組件層級很深的情況下，一層一層的找，效率太低了，當然 React Devtools 開發者也想到了，那就是 Components 中的過濾器！

使用過濾器可以輕鬆過濾掉一些不想要展示 Dom ，點開 setting 小圖標的下拉框裏，有一欄是組件的設置，然後找到 "Hide components where"，在這裏可以添加過濾器，從而進行過濾的設置，下面列出了各個配置代表什麼含義。

下拉框選擇過濾類型：

名稱	含義
`locatio`n	router 路由匹配的組件
`name`	組價名
`type`	各種組件類型細分（參考下面表格）
`hoc`	高階組件

location（集成 react-router 之後才會有）和 name 都是進行正則匹配的。

如果過濾類型選擇 type 的話，匹配模式就有9種，如下：

名稱	含義
`class`	繼承 `React.Component`的類組件
`context`	共享上下文 `context`
`function`	函數式組件
`forward ref`	函數式組件傳遞`ref`的
`dom nodes`	瀏覽器支持的 html 元素，div,h1,p
`memo`	函數式組件做props優化的
`other`	其他
`profiler`	測量性能的
`suspense`	懶加載根組件

單組件調試

當我們找到目標組件後，雙擊目標組件，右側就會出現(從上往下)工具欄、props、hooks、rendered by、source

我們重點來看看第一行出現的那些 icon 分別是些什麼(從左往右)：

顯示懶加載的 fallback 狀態

第一個顯示懶加載的 fallback 狀態，看起來像一個“鬧鐘”的按鈕，實際上與 <Suspense /> 相關，當 <Suspense /> 組件的 children 還沒加載出來的時候，有一個過渡的 loading 效果，點擊按鈕，就會顯示 fallback 屬性裏的 ReactNode，用來預覽加載效果還是不錯的。比如在代碼中添加 <Suspense /> 組件後效果調試如下：

function App () {

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <div>
        <Logo href="https://vitejs.dev" src={viteLogo} alt="Vite logo" />
        <Logo href="https://react.dev" src={reactLogo} className="react" alt="React logo" />
      </div>
      <h1>Vite + React</h1>
      <Counter />
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </Suspense>
  )
}

小圖標高亮就説明處於 loading 的狀態調試。這裏演示用的 loading 的文字，也可以寫成骨架屏的方式，體驗可能更佳！

檢查組件的真實 Dom

在 React 中寫的 JSX 代碼渲染出來的組件樹其實都不是真實的 DOM 樹，所有調試樣式、修改文案、直接操作 DOM 的需求，還是需要回到 chrome devtools 的 Element 面板進行調試 ，這裏仍然會面臨 DOM 層級很深的情況，可以通過“小箭頭”直接在頁面上點擊你要調試的 DOM。如下：

上面圖中這種也是調試真是 DOM 的一種方式，還有就一種方式就是 Components 中工具欄的第二個小眼睛的按鈕，點擊它之後，它會直接切到 element 面板下且聚焦在對應的 DOM 上，如下：

Debug 信息

也就是第三個“小蟲子”的圖標，在最開始用的時候會挺懵逼的，點了以後好像沒有什麼作用，然後懸停一會會有一段文字：log this component data to the console（將組件數據記錄在console中）；然後切換到 chrome devtools 的 console 就能發現端倪了，這裏出現了和 <Counter /> 相關的組件信息：

打印的信息如下：

定位 Source-map 信息

最後一個按鈕很熟悉，平時都會在一些組件庫文檔中的代碼案例中看到，比如 mui 等UI組件庫，用來作為展開代碼的調試入口， react devtools 的功能也是類似，這裏是定位該組件對應的 Source 文件，這裏我就切換到了 <Counter /> 組件對應的 App.jsx 文件中，在開發環境中配置好 source-map ，定位組件就能直接顯示源碼。

/** @type {import('vite').UserConfig} */
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true
  },
})

這個 source 面板的功能就非常強大了，可以打斷點、單步調試、調用棧、查看上下文對象等等，這一塊的內容在下面的內容中介紹！

性能問題追蹤

還有一個 ⚛️profiler 是什麼東西呢，可能剛開始接觸 React 的同學可能不太瞭解，在 react 的官方文檔中有介紹一個 Profiler API ，能添加在 React 樹中的任何地方來測量樹中這部分渲染所帶來的開銷，用法：

<Profiler id="App" onRender={onRender}>
    <App />
</Profiler>

id：字符串，用於標識正在測量的 UI 部分。

onRender：onRender 回調函數，當包裹的組件樹更新時，React 都會調用它。它接收有關渲染內容和所花費時間的信息。

function onRender(
  id, // 發生提交的 Profiler 樹的 “id”
phase, // "mount" （如果組件樹剛加載） 或者 "update" （如果它重渲染了）之一
actualDuration, // 本次更新 committed 花費的渲染時間
baseDuration, // 估計不使用 memoization 的情況下渲染整顆子樹需要的時間
startTime, // 本次更新中 React 開始渲染的時間
commitTime, // 本次更新中 React committed 的時間
interactions // 屬於本次更新的 interactions 的集合
) {
  // 對渲染時間進行彙總或記錄...
}

進行性能分析會增加一些額外的開銷，因此在默認情況下，它在生產環境中是被禁用的。如果要啓用生產環境下的性能分析，你需要啓用一個特殊的帶有性能分析功能的生產構建。

雖然在項目中調試比較靈活，但是對項目有一定的代碼侵入，甚至會有一些性能的損耗，所以當遇到使用全局 profiler 的場景的話，可以優先嚐試一下用 React devtools 的 profiler 功能。

下面為了測試 profiler 功能，新增一個 <List /> 組件中增加了一萬條數據來顯示，看下具體的耗時如何：

function List () {
  return <div>
    {Array.from({ length: 10000 }).map((_, index) => <p key={index}>{index}</p>)}
  </div>
}

這裏是一個典型的性能分析火焰圖，展示的是當前這個頁面中，各個組件的耗時情況，如果是有耗時比較長的異常組件，橫向柱狀圖會顯示成黃色，甚至更嚴重的紅色。從實際效果來看，<List /> 組件的耗能更高。

在 profiler 的系統設置中，還能打開組件何時渲染的開關，以及隱藏固定渲染時間以下的組件；

比如，我們把低於 16ms 的組件就在火焰圖中隱藏渲染；設置如下：

分析性能：

這裏 "Why did this render" 就説明了 <List /> 組件是第一次渲染，渲染了171.6毫秒

在 Chrome 中調試 React 項目

有了上面的基礎，接下來我們看看在 Chrome 中如何調試 React 項目，首先要將項目運行起來，然後打開 Chrome DevTools，在 Sources 面板找到 src/main.jsx，打上個斷點（就是對應文件的代碼行的地方，鼠標左擊就添加一個斷點）：

添加斷點之後，刷新頁面就可以進入調試流程了，如下圖：

代碼會在斷點處斷住，右邊會顯示當前 watch 監聽變量，breakpoints 斷點，scope 作用域，call stack 調用棧。還可以給請求和 DOM 打斷點。

下圖箭頭所指的這行按鈕就是控制執行行為的（Chrome 詳細説明）：

從左往右分別是：

恢復執行
下一個函數調用
進入函數調用
跳出函數調用
執行下一行
讓斷點失效

知道了這些調試方法後，就可以很方便的調試了，下面來看看我們平時用的最多的 IDE 工具 VS Code 如何調試？

在 VS Code 中調試 React 項目

React 項目歸根到底也是 JS，調試網頁的 JS，除了 Chrome DevTools 外，還有一種更好用的調試方式——VSCode Debugger。

創建調試文件

創建調試文件分為自動創建和手動創建。

用 VSCode 打開項目目錄，在項目的根目錄創建 .vscode/launch.json 文件：

自動創建：
打開 Debug 窗口，然後點擊 create a launch.josn，如下圖：

<img src="https://files.mdnice.com/user/8213/bcd7828e-126a-4d78-8ebb-856585e80905.png" />
點擊右下角的 Add Configuration... 按鈕，

點擊後，選擇 Chrome: Launch，文件中就會出現一段 json 配置：

把訪問的 url 改為開發服務器啓動的地址：

然後進入 Debug 窗口，點擊啓動：

點擊按鈕之後，你會發現它啓動了瀏覽器，並打開了配置中的 url：

VS Code 中還會有一排控制執行的按鈕：

上面的控制按鈕分別對應恢復執行、單步執行、進入函數調用、跳出函數調用，這個和 Chrome DevTools 一樣的；還多了刷新和停止的按鈕。

在代碼打個斷點，然後點擊右邊第二個按鈕刷新，代碼會執行到斷點處斷住，本地和全局作用域的變量，調用棧等都會展示在左邊；瀏覽器也會刷新。

下面是各個功能的介紹：

看起來和 Chrome DevTools 裏調試差不多，在 VSCode Debugger 裏調試有啥好處呢？

好處就是不用切換工具，之前是調試在 Chrome DevTools，寫代碼在 VSCode，而現在寫代碼和調試都可以在 VSCode 裏，無需在 Chrome DevTools 和 VSCode 之間切換。這種集成化的環境讓開發者能夠邊寫代碼邊調試，從而提高開發效率。

相比於 Chrome DevTools 的異常斷點的設置，VS Code 表現形式略有不同，如下圖：

配置説明

launch 和 attach

無論自動創建還是手動創建，都會選擇 launch 還是 attach 模式！

先引入一段配置，它們只是 request 的配置不同，然後 attach 模式有 port，launch 模式有 url：

{
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "chrome",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Launch（啓動）模式

當你使用 launch 模式進行調試時，VS Code 將直接啓動並控制你想要調試的應用程序。

也就是 VS Code 會作為應用程序的啓動器，它會在內部創建一個進程來運行你的代碼，並且這個進程會受到調試器的監控。

當你在代碼中設置了斷點，程序在運行到這些斷點時會暫停，等待你進行調試操作，比如單步執行、查看變量值等。
Attach（附加）模式

相比之下，attach 模式允許你將調試器連接到一個已經運行的外部進程。

比如，我們在調試 Node.js 項目時，有時候也會用 Chrome 瀏覽器的調試界面來調試。這通常用於調試那些不能由 VS Code 直接啓動的程序，或者你想在程序運行到某個特定狀態時才開始調試的情況。

在 attach 模式下，你需要先手動啓動你的應用程序，然後配置調試器去連接到該應用程序的進程ID或監聽的端口。

一旦連接成功，你就可以像在 launch 模式下那樣設置斷點和進行調試。

常用常量

${workspaceRoot}：VS Code 當前打開的文件夾
${file}：當前打開的文件
${relativeFile}：相對於 workspaceRoot 的相對路徑
${fileBasenameNoExtension}：當前文件的文件名，不帶後綴，也即 launch
${fileBasename}：當前打開文件的文件名
${fileDirname}：所在的文件夾，是絕對路徑
${fileDirname}：文件所在的文件夾路徑
${lineNumber}：當前文件光標所在的行號
${fileExtname}：當前打開文件的拓展名，如.json
${cwd}：啓動時任務運行程序的當前工作目錄
${workspaceFolder}：表示當前workspace文件夾路徑
${workspaceRootFolderName}：表示workspace的文件夾名
${env:PATH}：系統中的環境變量

下面是 `launch` 和 `attach` 類型共有的屬性

protocol：設置調試協議
auto：嘗試自動檢測目標運行時使用的協議
inspector 新的V8調試器協議，解決遺留版本的多數問題，node versions >= 6.3 and Electron versions >= 1.7.4
legacy：原始的v8調試器協議，node versions < v8.0 and Electron versions < 1.7.4.
port：調試使用的端口
address ：TCP/IP 地址，用於遠程調試
localRoot：遠程調試時映射的本地地址
remoteRoot：遠程調試時的遠程目錄地址
sourceMaps：默認為 true
outFiles ：當 map 文件不在 js 文件同目錄時用於指定 sourceMaps 的位置
restart ：自動重啓調試
timeout：配置自動附加的超時時間
stopOnEntry：自動斷點到第一行代碼處
smartStep：自動跳過未映射到源代碼的代碼
skipFiles：[]String指定跳過單步調試的代碼
trace：啓用診斷輸出
userDataDir：是保存用户數據的地方，比如你的瀏覽記錄、cookies、插件、書籤、網站的數據等等
sourceMapPathOverrides：對 sourcemap 到的文件路徑做一次映射，映射到 VSCode work
space 下的文件，這樣調試的文件就可以修改了
file：可以直接指定某個文件，然後啓動調試

以下是特定於類型 launch(啓動)的配置屬性：

program：指定調試入口文件地址
args ： []String 傳遞給程序的參數,可在 process.argv 拿到
cwd ：指定程序啓動調試的目錄 ,當 vscode啓動目錄不是項目根目錄，並且調試 npm script 時非常有用
runtimeExecutable：設置運行時可執行文件路徑，默認是 node 可以是其他的執行程序，如 npm、nodemon；如果是瀏覽器的話，可以是 stable，也就是穩定的 Google Chrome，或者 canary，也就是每日構建版的 Google Chrome Canary，還可以是 custom，然後用 CHROME_PATH 環境變量指定瀏覽器的地址。
runtimeArgs：傳遞給運行時可執行文件的參數。
runtimeVersion：設置運行時可執行程序的版本，如果使用 nvm，可以切換 node.js 版本。
env：添加額外的環境變量。
envFile：文件加載環境變量。
console：配置終端可以是外部終端或者內部集成終端，默認值 internalConsole。

總結

本文涵蓋了從基礎概念到具體實踐的 React 調試全過程。文章分為五個部分：

介紹了什麼是調試以及調試過程中我們應該關心那些東西。
常用的提示工具，深入探討了多種調試工具和技巧，特別是在 Chrome DevTools 和 React DevTools 兩部分有比較深入的探索，讓我們再開發過程中能夠快速定位問題並進行有效調試。
使用 vite 創建項目，詳細介紹瞭如何使用 vite 這一現代前端構建工具快速搭建 React 項目，為調試工作提供了一個高效的開發環境。
在 Chrome 中調試項目，展示瞭如何利用 Chrome DevTools 的強大功能。
在 VS Code 中調試項目，重點介紹了 VS Code 的 Debugger 功能，包括設置斷點、單步執行、監視變量等，在編碼環境中直接進行調試。

通過這五個部分的系統性學習，不僅能夠理解 React 調試的基礎知識，還能掌握在 VS Code 和 Chrome 中進行高效調試的實用技能。雖然文章是以 React 作為項目的支撐點，但是換成 Vue 也大相徑庭！

如果以上內容對你有幫助歡迎大家點贊、收藏、關注！

長林啊 Blog

@changlina

Tags

前端 (1157)

react (167)

typescript (130)

Web (56)

next.js (22)

框架學習 (3)

hooks (2)

Stories

React 調試不求人：VS Code 與 Chrome 的終極指南 - Stories Detail

概念