首頁 > 文章 > 開發工具 > VSCode調試教學（1）：了解基礎知識

VSCode調試教學（1）：了解基礎知識

PHPz轉載: 2020-07-02 13:46:185297瀏覽

在接下來的幾篇文章中，我們將研究如何以專業的方式來偵錯 JavaScript 和 TypeScript 程式碼。我們將學習如何使用 Visual Studio Code 中內建的偵錯器，而不是讓 console.log 到處亂飛。

偵錯器可讓你在程式執行時開啟程序，查看其狀態、變數、暫停並逐步觀察資料流。你甚至可以運行程式碼片段，並在運行時環境中嘗試想法。所有這些都無需停止程式後修改程式碼（添加 console.log！）並重新啟動。你能夠使用調試器解決問題並更快地了解程式碼。

我們先從一些簡單的Node.js 程式碼開始，然後專注於調試瀏覽器程式、Express 伺服器、GraphQL、TypeScript、Serverless、Jest 測試、Storybook 等等，不過在此之前要先了解一些必要的基礎知識！即使你不喜歡伺服器端 Node.js，仍然希望你先看完這篇文章。

取得程式碼

該系列在GitHub 上的程式碼：https://github.com/thekarel/debug-anything

我們第一個主題的程式碼非常簡單－先把下面的程式碼複製貼上到你的 index.js 檔案中：

const http = require(&#39;http&#39;);

const hostname = &#39;127.0.0.1&#39;;
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const server = http.createServer((req, res) => {
  const name = &#39;World&#39;

  res.statusCode = 200;
  res.setHeader(&#39;Content-Type&#39;, &#39;text/plain&#39;);
  res.end(`Hello, ${name}!\n`);
});

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

現在繼續並在VS Code 中打開資料夾：

VSCode調試教學（1）：了解基礎知識

為了確保一切正常，請試著運行它：

node index.js

然後訪問http ://127.0.0.1:3456，你應該會看到Hello, World!。

請確保立即停止node index.js指令，否則你將收到一個醜陋的「錯誤： Error: listen EADDRINUSE error soon

程式碼本身很簡單：執行HTTP伺服器，並且使用「Hello，World！ ” 回應每個請求。很簡單對不對？但是這段簡單的程式碼足以了使我們解調試的基本概念。

## 新增功能

#讓我們在伺服器上新增一個功能：我們不再回傳硬編碼的訊息"Hello, World!"，而是從查詢中得到

name，在點擊http:// 127.0.0.1:3456/?name=Coco 時會回覆Hello, Coco!。

我們先假裝不知道該怎麼做，運行伺服器後，發送請求並查看

Coco 出現在哪裡不是更有趣嗎？試試看。啟動偵錯器！

## 啟動偵錯器確保已在VS Code 中開啟

index.js

，按一下偵錯器圖標，按一下“執行並偵錯”，然後按一下Node.js：

VSCode調試教學（1）：了解基礎知識現在你的伺服器正在調試模式下運行！訪問

http://127.0.0.1:3456?name=Coco

你不會看到任何不同，應該仍然回傳預設訊息。接下來，在程式碼中加入一個

斷點（breakpoint）

，這樣下次造訪伺服器URL 時將會暫停執行。可以透過點擊編輯器左邊的行號來實現：

VSCode調試教學（1）：了解基礎知識訪問

http://127.0.0.1:3456?name=Coco

，VS Code 將彈出一個檢視並暫停伺服器：

VSCode調試教學（1）：了解基礎知識我們需要先找出查詢中name 的位置，這樣才能完成後面的工作。在

左側邊欄

中：你會看到一個名為Variables 的部分。在Local 下，IDE 顯示了函數本地作用域的所有變數。有一個看起來可能性很高的：req：

VSCode調試教學（1）：了解基礎知識現在我們知道了，請求查詢字串位於

req.url

中，在文件的幫助下，我們把程式碼腳本修改為：

const http = require(&#39;http&#39;);
const url = require(&#39;url&#39;); 

const hostname = &#39;127.0.0.1&#39;;
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const server = http.createServer((req, res) => {
  const {name} = url.parse(req.url, true).query;  

  res.statusCode = 200;
  res.setHeader(&#39;Content-Type&#39;, &#39;text/plain&#39;);
  res.end(`Hello, ${name}!\n`);
});

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

由於程式碼已經被修改，所以需要重新啟動伺服器。使用偵錯器很簡單：你可以按

或點擊綠色的重啟圖示：

VSCode調試教學（1）：了解基礎知識