首頁 > 開發工具 > VSCode > VSCode調試教學(1):了解基礎知識

VSCode調試教學(1):了解基礎知識

PHPz
發布: 2020-07-02 14:37:31
轉載
5375 人瀏覽過

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 中打開資料夾:

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

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

由於程式碼已經被修改,所以需要重新啟動伺服器。使用偵錯器很簡單:你可以按或點擊綠色的重啟圖示:

VSCode調試教學(1):了解基礎知識

VSCode調試教學(1):了解基礎知識你也可以停用斷點,因為現在不需要它了:

VSCode調試教學(1):了解基礎知識#訪問

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中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板