VS Code 調試徹底攻略（1）：基礎知識

時間 2020-05-28

標籤 code 調試徹底攻略基礎知識简体版

原文原文鏈接

做者：Charles Szilagyi
翻譯：瘋狂的技術宅javascript

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

未經容許嚴禁轉載java

在接下來的幾篇文章中，咱們將研究如何以專業的方式調試 JavaScript 和 TypeScript 代碼。咱們將學習如何使用 Visual Studio Code 中內置的調試器，而不是讓 console.log 處處亂飛。node

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

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

調試器容許你在程序運行時打開程序，查看其狀態、變量、暫停並逐步觀察數據流。你甚至能夠運行代碼片斷，並在運行時環境中嘗試想法。全部這些都無需中止程序後修改代碼（添加 console.log！）並從新啓動。你可以使用調試器解決問題並更快地瞭解代碼。git

咱們先從一些簡單的 Node.js 代碼開始，而後着眼於調試瀏覽器程序、Express 服務器、GraphQL、TypeScript、Serverless、Jest 測試、Storybook 等等，不過在此以前要先了解一些必要的基礎知識！即便你不喜歡服務器端 Node.js，仍然但願你先看完本文。程序員

獲取代碼

該系列在 GitHub 上的代碼： https://github.com/thekarel/d...

咱們第一個話題的代碼很是簡單——先把下面的代碼複製粘貼到你的 index.js 文件中：github

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 中打開文件夾：面試

爲了確保到一切正常，請試着運行它：shell

node index.js

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

請確保當即中止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}`);
});

因爲代碼已經被修改，因此須要從新啓動服務器。使用調試器很簡單：你能夠按 ⇧+⌘+F5 或單擊綠色的重啓圖標：

你也能夠禁用斷點，由於如今不須要它了：

訪問 http://127.0.0.1:3456?name=Coco，看看咱們的工做成果！ 😉

但願你可以繼續探索調試器。在下一篇中，咱們將會用 "step over"、 "step in" 和 "step out" 功能逐行調試代碼。