任何一門編程語言，在學習之前都應該先弄清楚它的調試方法，畢竟沒有不挖坑的人類！

程序一旦出現問題，第一時間就是找到問題出在哪兒，其次才是拿出解決辦法。如果都找不到問題原因，那又何從談起解決辦法呢？

如何排查編程問題，這就是一門藝術了，同樣的問題，也許 A 只需要 10 分鐘，B 可能需要 30 分鐘，C 可能束手無策。

調試方法不僅僅可以用于問題排查，還能用于運行結果輸出，能讓枯燥的學習多那么一點點樂趣~~

PC 端調試手段

console 輸出

瀏覽器內置的輸出方法，可以很方便地看到運行結果，也能幫助我們定位程序問題。常用方法：

console.log() // 輸出 log 日志級別的變量值或信息。
console.info() // 輸出 info 信息級別的變量值或信息。
console.error() // 輸出 error 錯誤級別的變量值或信息。
console.warn() // 輸出 warn 警告級別的變量值或信息。
console.trace() // 輸出函數調用堆棧
console.table() // 以表格形式展示數組/對象
console.time() // 計時器
console.timeEnd() // 計時結束，查看計時結果

console 掌握以上幾個常用方法已經足夠了，當然它還有其他一些不太常用的方法，比如：

console.assert() // 斷言
console.clear() // 清空控制臺
console.count() // 計數器
console.countReset() // 重置計數器
console.debug() // 輸出調試信息
console.dir() // 輸出對象結構
console.dirxml() // 輸出 XML 結構
console.group() // 分組
console.groupCollapsed() // 收縮分組
console.groupEnd() // 結束分組
console.profile() // 開始性能分析（非標準，存在兼容性）
console.profileEnd() // 結束性能分析（非標準，存在兼容性）
console.timeLog() // 輸出計時器
console.timeStamp() // 輸出時間戳（非標準，存在兼容性）

提到 console ，那么就不得不提瀏覽器的開發者工具了，因為 console 輸出的內容，都是在開發者工具--控制臺中展示的：

示例：

console.time() // 開始計時器
console.log('日志信息', 'hello world', {a: 'b'})
console.info('信息', 'hello world', {a: 'b'})
console.error('錯誤信息', 'hello world', {a: 'b'})
console.warn('警告信息', 'hello world', {a: 'b'})
console.trace('追蹤信息')
console.table([{a: 'b'}, {a: 'c'}])
console.timeEnd() // 結束計時器，查看計時結果

以上代碼可以直接在開發者工具--控制臺中執行，看看執行效果：

您的瀏覽器控制臺可能不支持粘貼代碼，會提示讓您輸入 allow pasting，可在控制臺中輸入 allow pasting 之后回車就能粘貼代碼了！

注意看最后的 default: xxx ms，這表示 time 到 timeEnd 的執行時間，截圖中就表示我們代碼執行耗時 0.66ms，所以這兩個方法也能用于我們的代碼性能檢測，分析出哪些代碼耗時太長，便可以針對耗時長的代碼做優化。

debugger 語句

在代碼中插入 debugger;，當瀏覽器開發者工具打開時自動進入中斷。

const test = '112233';
function foo() {
    const test1 = '123';
    const test2 = '321';
    const test3 = test1 + test2;
    debugger;
}
foo()

控制臺執行以上代碼，開發者工具將會進入中斷，此時可以看到當前程序狀態：

控制按鈕 可以程序繼續執行、跳過下一個函數調用、進入下一個函數、跳出當前函數、單步調試、停用斷點等。
監視 可以添加自定義表達式查看程序狀態。。
本地 和 全局 可以查看當前程序作用域中的變量。
調用堆棧 可以查看當前程序的調用順序。

斷點調試

可在 源代碼/來源（Sources） 面板中添加斷點進行調試，與 debugger 類似，不同地方在于 debugger 語句需要添加在代碼中，而 斷點調試 只需要在面板中打上斷點即可。

示例代碼：

<script>
  const test = '112233';
  function foo() {
    const test1 = '123';
    const test2 = '321';
    const test3 = test1 + test2;
    return test3;
  }
  foo()
</script>

斷點調試演示：

網絡調試

開發者工具中的網絡（Network）面板，可以查看所有的網絡請求，包括請求頭、響應頭、響應內容、網絡耗時等等。

也可以對網絡請求節流，模擬低網速環境下網頁響應狀態等。

性能、內存面板

開發者工具中的兩個高階技能，一般多用于性能優化。

性能（Performance）面板：錄制代碼執行過程，分析耗時函數
內存（Memory）面板：抓取堆快照，排查內存泄漏。

開發者工具的其他手段

日志點：右鍵行號設置，無需修改代碼輸出日志。
條件斷點：僅在滿足條件時中斷（如循環特定索引）。
黑盒腳本（Blackbox）：忽略第三方庫/框架的內部代碼，聚焦業務邏輯調試。

框架專用工具

React Developer Tools 檢查 React 組件狀態、Props及Hooks，分析組件渲染性能。

Vue Devtools 查看Vue組件樹、狀態和事件。

善用無痕模式

瀏覽器無痕模式，可以屏蔽瀏覽器的三方插件，避免緩存影響。有時候某個問題可能就是某個插件或者三方緩存造成的，這時候使用無痕模式可以分分鐘定位問題。

移動端調試手段

移動端沒有內置開發者工具，程序調試不像 PC 端那么方便，這時候必須借助相關開源工具了，比如：

vConsole

vConsole：騰訊開源的輕量級網頁控制臺，集成日志、網絡請求、設備信息查看等功能。

使用方法：必須在代碼中引入并開啟工具。

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"></script>
<script>
  new VConsole();
</script>

效果：

Eruda

Eruda：功能更豐富的控制臺，支持元素檢查、性能分析、本地存儲查看等。

使用方法：必須在代碼中引入并開啟工具。

<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.4.1/eruda.min.js"></script>
<script>
  eruda.init();
</script>

效果：

Chrome遠程調試

手機端 Chrome 瀏覽器，通過 USB 線連接電腦，可在電腦端查看手機端網頁的調試信息。

1、手機開啟USB調試模式（開發者選項中）。
2、用USB連接電腦，Chrome訪問 chrome://inspect/#devices。
3、點擊對應頁面下的 Inspect，直接使用PC版DevTools調試。

抓包工具

PC 端代表軟件：Charles、Fiddler。

Node.js抓包工具：Whistle。

手機端抓包APP：HttpCanary（Android）、Stream（iOS）。

抓包工具可不僅僅用于抓包。

1、可以用來分析網絡請求，比如查看各種請求內容是否正常。
2、可以模擬網絡請求各種狀態，比如請求超時、無網絡、404、500等。
3、可以偽造請求內容，比如偽造一個接口的響應數據，用于模擬后端接口返回數據。

手機抓包步驟：

1、PC 安裝 Charles 或者 Fiddler，設置代理端口（默認8888）。
2、手機與PC同一網絡，Wi-Fi設置手動代理（IP 為 PC 內網地址，端口8888）。
3、安裝證書以捕獲HTTPS請求。

以 Fiddler 為例：

所有的 http 和 https 請求都會被軟件捕獲，我們可以查看所有被捕獲的請求，也可以修改它們。

終極手段

有時候可能所有的調試手段都用上了，但就是找不到問題，這時候可以嘗試刪除部分代碼，直到刪到沒問題為止，基本就能定位到有問題的代碼了。

寫在最后

調試手段不僅僅可以用于開發調試，還能用于線上環境問題定位，模擬程序的各種異常情況，提升程序的健壯性。

轉自https://www.cnblogs.com/linx/p/18877259