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

在接下來的幾篇文章中，我們將研究如何以專業的方式來偵錯 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('http');

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

const server = http.createServer((req, res) => {
  const name = 'World'

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

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

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

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

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：

現在你的伺服器正在調試模式下運行！訪問

http://127.0.0.1:3456?name=Coco

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

斷點（breakpoint）

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

訪問

http://127.0.0.1:3456?name=Coco

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

我們需要先找出查詢中name 的位置，這樣才能完成後面的工作。在

左側邊欄

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

現在我們知道了，請求查詢字串位於

req.url

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

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

const hostname = '127.0.0.1';
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('Content-Type', 'text/plain');
  res.end(`Hello, ${name}!\n`);
});

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

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

或點擊綠色的重啟圖示：

你也可以停用斷點，因為現在不需要它了：

#訪問

http://127.0.0.1:3456?name =Coco

，看看我們的工作成果！ 希望你能夠繼續探索調試器。在下一篇文章中，我們將會用  "step over"、 "step in" 和 "step out" 功能逐行除錯程式碼。

VSCode偵錯教學系列：

1、基礎

2、逐行步進調試

英文原文網址：：https ://charlesagile.com/debug-series-nodejs-browser-javascript

#作者：Charles Szilagyi

本文轉載自：https://segmentfault.com/a/1190000022764213

相關教學推薦：vscode入門教學

#

以上是VSCode調試教學（1）：了解基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！