快捷導(dǎo)航

分享幾個(gè)前端開(kāi)發(fā)中常用的調(diào)試技巧

更新時(shí)間：2026年05月23日 09:36:09 作者：Blue布魯

在Web應(yīng)用高度依賴用戶交互的今天,前端性能已成為影響用戶體驗(yàn)、SEO排名和業(yè)務(wù)轉(zhuǎn)化的關(guān)鍵因素,這篇文章主要介紹了幾個(gè)前端開(kāi)發(fā)中常用的調(diào)試技巧,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

本文檔介紹前端開(kāi)發(fā)中常用的調(diào)試技巧，涵蓋 Console、VSCode Debug 和 Chrome Debugger 的使用方法。

一. Console

Console 是前端開(kāi)發(fā)中最基礎(chǔ)也是最常用的調(diào)試工具 console.log()、console.info()、console.warn()、console.error() 這些都是比較基礎(chǔ)的輸出功能，這里不再贅述～

console.table()

非常適合用于輸出結(jié)構(gòu)化數(shù)據(jù)（對(duì)象、數(shù)組等）對(duì)于接口返回用這種輸出方法非常好，還能點(diǎn)擊表頭排序

// 輸出數(shù)組
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];
console.table(users);

// 輸出對(duì)象
const user = {
  name: 'John',
  email: 'john@example.com',
  age: 30,
  address: {
    city: 'Beijing',
    country: 'China'
  }
};
console.table(user);

console.time() / console.timeEnd()

用于測(cè)量代碼執(zhí)行時(shí)間。

console.time('API 請(qǐng)求耗時(shí)');
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.timeEnd('API 請(qǐng)求耗時(shí)'); // API 請(qǐng)求耗時(shí): 234.567ms
  });

二. VSCode Debug

VSCode 提供了強(qiáng)大的調(diào)試功能，可以直接在編輯器中設(shè)置斷點(diǎn)、單步調(diào)試、監(jiān)控變量值等。 VSCode 系的編輯器操作方法都一樣，如 Cursor～

2.1 配置調(diào)試環(huán)境

VSCode 側(cè)邊欄選擇 Run and Debug 并創(chuàng)建 launch.json 文件創(chuàng)建 launch.json 時(shí)選擇自己對(duì)應(yīng)的瀏覽器即可（Chrome or Edge）

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080", // 這里改成自己本地開(kāi)發(fā)的 url
      "webRoot": "${workspaceFolder}",
      "skipFiles": [
        "${workspaceFolder}/node_modules/**" // debug 時(shí)忽略 node_modules，只有我們業(yè)務(wù)代碼進(jìn)行 Debug 建議加上
      ]
    }
  ]
}

配置好后，點(diǎn)擊菜單欄的 Launch 按鈕，會(huì)重新打開(kāi)一個(gè) chrome 的窗口

2.2 調(diào)試控制

此時(shí)在對(duì)應(yīng)代碼行數(shù)前端點(diǎn)擊一下，出現(xiàn)紅點(diǎn)時(shí)即 打斷點(diǎn) 成功，此時(shí)刷新頁(yè)面即可看到代碼停在這里，可以鼠標(biāo) Hover 查看對(duì)應(yīng)變量值，也可以選擇 Step Over (F10) 代碼一步一步執(zhí)行，可以看到代碼詳細(xì)的執(zhí)行邏輯。

調(diào)試時(shí)，上面的基本按鈕功能：

繼續(xù) (F5): 繼續(xù)執(zhí)行到下一個(gè)斷點(diǎn)
單步跳過(guò) (F10): 執(zhí)行當(dāng)前行，不進(jìn)入函數(shù)內(nèi)部
單步進(jìn)入 (F11): 進(jìn)入函數(shù)內(nèi)部
單步跳出 (Shift + F11): 跳出當(dāng)前函數(shù)
重啟 (Ctrl + Shift + F5): 重新開(kāi)始調(diào)試
停止 (Shift + F5): 停止調(diào)試

3.2 變量監(jiān)視及錯(cuò)誤捕獲

變量監(jiān)視

可以在變量監(jiān)視的面板中監(jiān)聽(tīng)某個(gè)變量，在調(diào)試過(guò)程中實(shí)時(shí)看到變量變化

錯(cuò)誤捕獲

在斷點(diǎn)面板中開(kāi)啟Caught Exceptions，即可在有異常時(shí)，自動(dòng)斷點(diǎn)到錯(cuò)誤代碼行處～

三. Chrome Debugger

Chrome Debugger 是指在代碼中使用 debugger 語(yǔ)句進(jìn)行調(diào)試的方法。當(dāng)代碼執(zhí)行到 debugger 語(yǔ)句時(shí)，如果瀏覽器 DevTools 已打開(kāi)，程序會(huì)自動(dòng)暫停，此時(shí)可以查看變量值、調(diào)用堆棧等信息。

3.1 debugger 語(yǔ)句基礎(chǔ)

什么是 debugger 語(yǔ)句

debugger 是 JavaScript 的一個(gè)關(guān)鍵字，當(dāng)瀏覽器 DevTools 打開(kāi)時(shí)，執(zhí)行到該語(yǔ)句會(huì)自動(dòng)暫停程序執(zhí)行。

function myFunction() {
  const data = { name: 'John', age: 30 };
  debugger; // 程序會(huì)在這里暫停
  console.log(data);
}

使用前提

必須打開(kāi) Chrome DevTools：如果 DevTools 未打開(kāi)，debugger 語(yǔ)句會(huì)被忽略
確保 Source Maps 啟用：開(kāi)發(fā)環(huán)境通常默認(rèn)啟用，生產(chǎn)環(huán)境需要配置
代碼必須被執(zhí)行：只有執(zhí)行到的 debugger 才會(huì)生效

3.2 基礎(chǔ)使用場(chǎng)景

調(diào)試函數(shù)執(zhí)行

在函數(shù)開(kāi)始或關(guān)鍵位置添加 debugger：

// lib/utils/format-number.ts
export const formatNumber = (num: number) => {
  debugger; // 查看傳入的參數(shù)
  const formatted = num.toLocaleString('en-US');
  debugger; // 查看格式化后的結(jié)果
  return formatted;
};

調(diào)試條件分支

在條件判斷處添加 debugger，查看條件值和執(zhí)行路徑：

function processUser(user: User) {
  debugger; // 查看 user 對(duì)象
  if (user.age >= 18) {
    debugger; // 進(jìn)入此分支
    return handleAdult(user);
  } else {
    debugger; // 進(jìn)入此分支
    return handleMinor(user);
  }
}

調(diào)試循環(huán)

在循環(huán)中添加 debugger，可以逐步查看每次迭代：

function processItems(items: Item[]) {
  for (let i = 0; i < items.length; i++) {
    debugger; // 每次循環(huán)都會(huì)暫停，可以查看 i 和 items[i]
    const item = items[i];
    processItem(item);
  }
}

// 或者只在特定條件下暫停
function processItems(items: Item[]) {
  for (let i = 0; i < items.length; i++) {
    if (items[i].status === 'error') {
      debugger; // 只在遇到錯(cuò)誤狀態(tài)時(shí)暫停
    }
    processItem(items[i]);
  }
}

調(diào)試 React 組件

在組件函數(shù)體中添加 debugger，查看每次渲染時(shí)的 props 和 state：

// components/UserProfile.tsx
export const UserProfile: React.FC<Props> = ({ userId }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(false);
  
  debugger; // 查看組件渲染時(shí)的 props 和初始 state
  
  useEffect(() => {
    debugger; // 查看 useEffect 執(zhí)行時(shí)的 userId
    setLoading(true);
    fetchUser(userId).then(data => {
      debugger; // 查看獲取到的用戶數(shù)據(jù)
      setUser(data);
      setLoading(false);
    });
  }, [userId]);
  
  debugger; // 查看渲染時(shí)的最終狀態(tài)
  return <div>{user?.name}</div>;
};