VSCode調試教學（2）：逐行步進調試

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

在上一篇中，我們研究了 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/debug-anything  取得

#啟動偵錯器

讓我們啟動偵錯器：使用偵錯工具列或按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、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” 將一次運行完該函數的剩餘程式碼。

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

現在，你應該對調試器工具列有了更好的了解，如何

著眼於重要的事情

並跳過無關的部分。這些命令不僅可以節省你的時間，還可以讓整個調試工作變得更加愉快！為什麼不在你的專案中試試呢？

VSCode調試教學系列：1、

基礎#########2、###逐行步進調試#### ###########英文原文網址：https://charlesagile.com/debug-javascript-typescript-debugger-navigating-with-steps######作者：Charles Szilagyi#### #####相關教學推薦：###vscode入門教學#######

以上是VSCode調試教學（2）：逐行步進調試的詳細內容。更多資訊請關注PHP中文網其他相關文章！