在接下來的幾篇文章中，我們將研究如何以專業的方式調試 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
相關教程推薦：在文檔的幫助下
