💡 前言

昨天我們掌握了透過斷點與逐行執行來追蹤程式邏輯的技巧。但在實際軟體開發中，除了找出邏輯錯誤（Logic Error）之外，我們經常還會面臨兩個讓人頭痛的場景：程式碼執行速度異常緩慢（效能瓶頸），或是 VS Code 本身因為裝了太多擴充套件而變得無比卡頓。

今天 Day 19 我們要來探討 VS Code 的效能診斷工具、如何揪出拖慢系統的罪魁禍首，以及當程式跑在外部或背景時，如何透過「附加」模式進行遠端/多端連線除錯！

🎯 本篇重點

1. VS Code 效能診斷：揪出吃資源的幕後黑手套件
2. 程式碼效能剖析 (CPU & Memory Profiling)
3. Attach 模式：連線到已經在執行的外部行程 (Attach to Process)
4. 高效率的日誌與計時技巧 (console.time)

🐢 1. 診斷 VS Code 效能：抓出拖慢編輯器的「肥胖套件」

你有時候會不會覺得 VS Code 突然變得非常耗電、打字有延遲，或是 CPU 飆高？這通常是因為某個擴充套件出現了記憶體洩漏（Memory Leak）或無窮迴圈。

• 快速診斷步驟：

1. 按下快捷鍵 Ctrl + Shift + P 開啟命令面板。
2. 輸入並選擇 Developer: Show Running Extensions（開發人員：顯示執行中的擴充套件）。
3. VS Code 會彈出一個專屬分頁，詳細列出目前所有正在運行的擴充套件，以及它們各自消耗的 CPU 毫秒數 與 記憶體 (Memory) 大小。
4. 如果發現某個套件佔用異常偏高，就可以考慮將其停用或解除安裝。

💡 另外一個好工具：輸入 Developer: Toggle Developer Tools 可以打開類似 Chrome 的開發者工具主控台，用來檢查 VS Code 內部有沒有未捕捉的 JavaScript 錯誤。

⏱️ 2. 程式碼效能剖析：找出你的慢速函式

當你寫完了一段複雜的資料處理邏輯，想知道到底是哪一個迴圈或函式吃掉了最多的執行時間？

• **使用 console.time() 與 console.timeEnd()**：
不需要安裝龐大的外掛，在 JavaScript / Node.js 中可以利用內建計時器進行輕量效能剖析：

console.time("資料處理總耗時");

// 假設這裡有一段複雜的迴圈運算
heavyComputationTask();

console.timeEnd("資料處理總耗時"); 
// 終端機會自動印出：資料處理總耗時: 142.35ms

• 進階 CPU Profiler：
如果需要更精細的視覺化火焰圖（Flame Chart），可以安裝 Node.js CPU Profiler 或是搭配 Chrome DevTools，對正在執行的應用程式進行採樣，精準找出佔用最多 CPU 週期的瓶頸程式碼。

🔗 3. Attach 模式：連線到已經在跑的外部行程

有時候，你的程式並不是從 VS Code 裡面按 F5 啟動的——例如它是一個背景執行的 Docker 容器、遠端伺服器上的 API 服務，或是獨立的背景服務。這時我們不能用「啟動（Launch）」除錯，而是要用「附加（Attach）」模式：

1. 在專案的 .vscode/launch.json 中配置一個 Attach 類型的設定：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Remote Process",
      "port": 9229
    }
  ]
}

2. 讓你的應用程式在啟動時開啟偵錯埠（例如 Node.js 加上 --inspect=9229 參數）。
3. 在 VS Code 中按下 F5 選擇該設定，VS Code 就會像磁鐵一樣「掛載」到正在執行的外部程式上。此時只要遠端程式執行到斷點，你的本地編輯器就會立刻攔截並進入除錯狀態！