調(diào)試簡(jiǎn)介

在處理任何 Web 項(xiàng)目時(shí)，有時(shí)我們會(huì)遇到復(fù)雜的問(wèn)題，因此我們調(diào)試后端代碼以了解情況。調(diào)試是我們探索這些有問(wèn)題的情況的技能，借助這種技能，我們可以準(zhǔn)確地看到我們的代碼是如何一個(gè)接一個(gè)地執(zhí)行的。我們還可以在執(zhí)行單個(gè)指令后探索變量的值。

調(diào)試是一項(xiàng)被低估的技能，經(jīng)常被開發(fā)人員忽視。這項(xiàng)技能確實(shí)可以幫助您準(zhǔn)確理解代碼，還可以提高您的開發(fā)技能，從而可以非常有效地編寫代碼。將 console.log() 放入您的代碼中并不總是一個(gè)好主意；這也是一項(xiàng)耗時(shí)的任務(wù)。

我們現(xiàn)在將進(jìn)入調(diào)試 Node.js 應(yīng)用程序的預(yù)期主題。

在 VS 代碼中調(diào)試 NodeJs 應(yīng)用程序的先決條件

在調(diào)試 Node Js 應(yīng)用程序之前，您需要熟悉以下幾點(diǎn)：

1. node.js (Express)基礎(chǔ)知識(shí)
2. javascript基礎(chǔ)

調(diào)試 Node js 應(yīng)用程序的分步指南

為了繼續(xù) Node.js 調(diào)試過(guò)程，讓我們循序漸進(jìn)。

第 1 步：創(chuàng)建 Node.js 應(yīng)用程序

我們從一個(gè)具有單個(gè)端點(diǎn)的基本 Node.js 應(yīng)用程序開始，我們?cè)谶@里做一些隨機(jī)的事情。您可以使用任何 node.js 項(xiàng)目。

現(xiàn)在，我們有一個(gè)非?；镜膽?yīng)用程序，我們根據(jù)查詢參數(shù)中給定的類型從數(shù)組中過(guò)濾對(duì)象。這是我們的主要 js 文件 app.js。

這是tasks.json文件，其中我們有一個(gè)對(duì)象數(shù)組（任務(wù)列表）。

上面的 express 應(yīng)用程序示例是基本的，我們?cè)谄渲辛谐龊瓦^(guò)濾任務(wù)。以下是執(zhí)行此操作的端點(diǎn)。

獲取所有任務(wù) – http://localhost:3000/all-tasks
按給定類型過(guò)濾任務(wù) – http://localhost:3000/all-tasks?taskType=personal

現(xiàn)在讓我們繼續(xù) Nodejs 調(diào)試過(guò)程的下一步。

您是否正在為調(diào)試 Node.js 應(yīng)用程序而苦惱？
不要浪費(fèi)時(shí)間嘗試自己解決問(wèn)題。立即聘請(qǐng) Node js 開發(fā)人員，讓您的應(yīng)用程序再次順利運(yùn)行。

第 2 步：使用“Nodemon”設(shè)置 Node.js 調(diào)試器

我們正在使用 nodemon調(diào)試 Node js 應(yīng)用程序。讓我們?nèi)职惭b nodemon，安裝 nodemon 使用這個(gè)命令：

npm 安裝 -g nodemon或者紗線全局添加nodemon

安裝 nodemon 后，現(xiàn)在我們需要使用 nodemon 為 node.js 應(yīng)用程序提供服務(wù)，為此，請(qǐng)使用以下命令：

nodemon -L --inspect app.js

這里的 app.js 文件是 node.js 應(yīng)用程序的主文件，通過(guò)點(diǎn)擊此命令，您的應(yīng)用程序?qū)⒎?wù)于給定端口，對(duì)我們來(lái)說(shuō)它是 3000，因此應(yīng)用程序在 http://localhost:3000 上運(yùn)行

現(xiàn)在在下一步中，讓我們繼續(xù)在 VS 代碼中啟用調(diào)試選項(xiàng)。

第 3 步：在 VS 代碼中啟動(dòng)調(diào)試器

現(xiàn)在是時(shí)候在 VS 代碼中啟動(dòng)調(diào)試器了。要啟動(dòng)調(diào)試器，請(qǐng)?jiān)?vs 代碼中打開命令面板，然后只需按Ctrl + Shift + p在窗口或Cmd + Shift + p在 macOS 中。它將打開以下部分：

現(xiàn)在只需鍵入“Debug: Attach”，您將看到“Debug: Attach Node Process”選項(xiàng)，點(diǎn)擊它，點(diǎn)擊后，您將看到以下屏幕：

這些只是在您的系統(tǒng)中運(yùn)行的節(jié)點(diǎn)進(jìn)程，只需單擊第一個(gè)，您將看到這樣的調(diào)試控制器：

我們幾乎完成了，我們的調(diào)試器現(xiàn)在打開了，現(xiàn)在我們只需要添加一些斷點(diǎn)，這樣執(zhí)行就會(huì)停在那里，但是直接移動(dòng)到斷點(diǎn)讓我們首先了解調(diào)試器和調(diào)試控制器的一些基本內(nèi)容。

調(diào)試控制器的基本概述

我們對(duì)debug controller中的元素進(jìn)行了編號(hào)，大家可以根據(jù)各自的編號(hào)來(lái)了解它們的用途。這是調(diào)試控制器：

調(diào)試控制器

下面是每個(gè)部分的解釋。

?? Play/Pause：用于開始和暫停調(diào)試
?? Step In：如果要逐行執(zhí)行指令，那么它將幫助您執(zhí)行逐步指令
?? Step into：如果您在調(diào)用函數(shù)之間調(diào)用函數(shù)，則讓script 然后你也可以簡(jiǎn)單地進(jìn)入這些函數(shù)，這意味著通過(guò)這個(gè)選項(xiàng)你可以深入到一個(gè)函數(shù)或語(yǔ)句并在那里調(diào)試。
?? Restart：從開始或第一個(gè)斷點(diǎn)重新啟動(dòng) Debugger
?? Disconnect：用于停止調(diào)試

斷點(diǎn)

斷點(diǎn)是調(diào)試的主要實(shí)體，它跟蹤調(diào)試器從哪里停止執(zhí)行。通過(guò)在您的代碼中放置斷點(diǎn)，您將拖尾到調(diào)試器，該調(diào)試器會(huì)在此處停止執(zhí)行并在此處拖尾已執(zhí)行的變量值。

您可以通過(guò)單擊編輯器的左側(cè)（行號(hào)列的左側(cè)）來(lái)應(yīng)用斷點(diǎn)，以下是一些斷點(diǎn)的屏幕截圖。

添加斷點(diǎn)后，執(zhí)行將在此處停止，讓我們現(xiàn)在運(yùn)行調(diào)試器，看看它是如何工作的。

第 4 步：使用斷點(diǎn)運(yùn)行調(diào)試器

按照步驟 2 和步驟 3打開調(diào)試器。一旦調(diào)試器處于活動(dòng)狀態(tài)，讓我們 hist 到將執(zhí)行代碼的端點(diǎn)。

一旦您到達(dá)相應(yīng)的端點(diǎn)或開始執(zhí)行您在其中提到斷點(diǎn)的代碼部分，您將看到如下屏幕：

這是執(zhí)行停止時(shí)的樣子。這是逐行執(zhí)行代碼時(shí)的完整數(shù)據(jù)。讓我們解釋一下這些部分，以便您更好地理解如何調(diào)試 Node js 應(yīng)用程序。

??變量部分：此部分顯示了該代碼部分中使用的所有變量，您還可以看到該變量的各個(gè)值。您可能會(huì)看到一些變量未定義或?yàn)榭眨驗(yàn)橐坏┳兞康膱?zhí)行完成，執(zhí)行就會(huì)停止，然后您將看到該變量的實(shí)時(shí)值??調(diào)用堆棧：它只是所有執(zhí)行的歷史
記錄，例如, 你可以看到在當(dāng)前執(zhí)行之前完成的所有執(zhí)行
??斷點(diǎn)：在這個(gè)部分，你可以找到你在整個(gè)項(xiàng)目中添加的所有斷點(diǎn)，這個(gè)部分在一個(gè)地方管理所有斷點(diǎn)

結(jié)論

（言鼎科技）