VS Code 調試徹底攻略（2）：逐行步進調試

做者：Charles Szilagyi

翻譯：瘋狂的技術宅

原文：https://charlesagile.com/debu...

未經容許嚴禁轉載

在要檢查的代碼之間導航很重要。若是去遍歷代碼的每一行，那將會是乏味且沒有必要的。調試器提供了便捷的方法來查看重要的內容，並跳出可有可無的代碼塊。讓咱們看看怎樣在調試時進入、跳過和退出函數！

VS Code 調試徹底攻略系列目錄

1. 基礎知識
2. 逐行步進調試
3. 編輯變量並從新執行函數
4. launch.json 和調試控制檯
5. 基於瀏覽器的 React 應用
6. 調試用 TypeScript 開發並打包的 React 📦

在上一篇中，咱們研究了 VS Code 調試器，並在代碼中添加了斷點，還查看了本地狀態。

此次，咱們將學習如何逐行執行代碼以及如何跳入和跳出函數調用。

獲取代碼

首先，讓咱們把上次的服務器修改的更加複雜。添加兩個額外的函數：一個從請求中獲取名稱，另外一個用於生成問候語。

你能夠把下面的代碼粘貼到 index.js中。

const http = require('http');
const url = require('url');

const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const getNameFromReq = (req) => {
  const {name} = url.parse(req.url, true).query;

  return name
}

const getGreeting = (name) => {
  const greeting = `Hello, ${name}!`

  return greeting
}

const server = http.createServer((req, res) => {
  const name = getNameFromReq(req)
  const greeting = getGreeting(name)

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`${greeting}\n`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at ${serverUrl}`);
});

該系列的代碼可在 https://github.com/thekarel/d... 得到

啓動調試器

讓咱們啓動調試器：使用調試工具欄或按 F5 並選擇 Node.js：

你應該可以正常訪問 http://127.0.0.1:3456/?name=Coco 並看到問候語。

若是你喜歡命令行，也能夠用 curl http://127.0.0.1:3456\?name\=Coco 進行訪問。

好的，如今服務器已啓動並正常運行，讓咱們添加一個斷點。沒有斷點，調試器將沒法啓動：

在第 21 行添加一個斷點：

const name = getNameFromReq(req)

一步步的調試Step by Step

再次觸發對 http://127.0.0.1:3456/?name=Coco 的請求，調試器將被激活並停在第 21 行的代碼：

漂亮！如今讓咱們專一於調試工具欄：

首先是按鈕的名字。從左到右按順序以下（帶有默認的 VS Code 快捷方式）：

• Continue / Pause F5
• Step Over F10
• Step Into F11
• Step Out ⇧F11
• Restart ⇧⌘F5
• Stop ⇧F5

Continue、restart 和 stop 很簡單，會分別執行你所指望的操做：繼續到下一個斷點，從新啓動進程，以及中止進程（和調試器）。

Step 與當前行上的函數調用相關：你能夠單步執行某個函數調用（Step Over），也能夠進入該函數調用（Step Into 在內部查看並調試）或着離開這個函數（Step Out）。Step-over 操做還容許你逐行執行代碼，即便該行不是函數調用。

Step 命令僅控制你在調試器中看到的內容。因此 「Step Out」 或 「Over」 一個函數將會 仍然照常執行全部代碼。調試器不會讓你感到無聊，你可以更快地完成本身的主要工做。

Continue

Continue 將會運行代碼，直到下一個斷點或程序結束。一種調試的方法是預先在相關行上添加多個斷點，而後用 continue 在它們之間跳轉：

若是你已經知道哪些函數或行與你的目的有關，那麼 Continue 操做將很是方便。調試器將在預約義的位置暫停，這時你能夠對變量和調用棧進行檢查。

Step Over

你能夠將 Step Over 看做是在函數中逐行進行，但不進入函數調用。若是你對當前行中的函數調用內部邏輯不感興趣，而只想查看局部變量如何隨時間變化，用它就對了，例如：

Step Over 是略過說明性代碼的好方法。

Step Into

當某行調用了你感興趣的函數，並想要更深刻地研究時，可使用 Step Into。一旦進入代碼塊後，能夠像往常同樣進行調試（使用 continue、step 等命令）。

觀察咱們是怎樣如何跳過 getNameFromReq，而後進入到 getGreeting 的：

Step Out

Step Out 與 Step In 相反：若是你再也不對某個函數感興趣，能夠離開它。使用 「Step out」 將一次運行完該函數的剩餘代碼。

經過調試檢查這兩個函數之間的區別，咱們逐行執行第一個函數，可是早早的就退出第二個函數：

如今，你應該對調試器工具欄有了更好的瞭解，如何着眼於重要的事情並跳過無關的部分。這些命令不只能夠節省你的時間，還可使整個調試工做變得更加愉快！爲何不在你的項目中試試呢？

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...