引言

在JavaScript開(kāi)發(fā)中，調(diào)試是一個(gè)關(guān)鍵的過(guò)程，它幫助我們理解和修復(fù)代碼中的問(wèn)題。Visual Studio Code（VSCode）以其豐富的擴(kuò)展和內(nèi)置調(diào)試工具，為JavaScript開(kāi)發(fā)者提供了強(qiáng)大的支持。本文將詳細(xì)介紹如何在VSCode中進(jìn)行JavaScript調(diào)試。

1. 配置VSCode

1.1 打開(kāi)或創(chuàng)建launch.json

• 在VSCode中打開(kāi)您的項(xiàng)目。
• 轉(zhuǎn)到“運(yùn)行和調(diào)試”側(cè)邊欄（或使用快捷鍵Ctrl+Shift+D）。
• 點(diǎn)擊“創(chuàng)建 launch.json 文件”鏈接（如果尚未存在）。VSCode將提示您選擇一個(gè)環(huán)境，對(duì)于前端項(xiàng)目，您可以選擇“Chrome”作為調(diào)試類型。

1.2 編輯launch.json

根據(jù)您的項(xiàng)目需求，編輯launch.json文件以包含適當(dāng)?shù)恼{(diào)試配置。以下是一個(gè)基本的配置示例，用于調(diào)試在localhost上運(yùn)行的前端應(yīng)用：

{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "針對(duì) localhost 啟動(dòng) Chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

注意：webRoot應(yīng)該指向您的項(xiàng)目源代碼目錄，這是VSCode用來(lái)解析Chrome中加載的腳本文件與本地源代碼之間映射關(guān)系的目錄。

2. 設(shè)置斷點(diǎn)

• 在您的源代碼文件中，找到您想要調(diào)試的代碼行。
• 在行號(hào)旁邊的空白區(qū)域點(diǎn)擊，設(shè)置一個(gè)紅色的斷點(diǎn)。

3. 啟動(dòng)調(diào)試會(huì)話 

在vscode中打開(kāi)終端然后點(diǎn)擊終端中的+號(hào)旁邊的下拉箭頭，在下拉中點(diǎn)擊Javascript Debug Terminal就可以啟動(dòng)一個(gè)debug終端。

在debug終端執(zhí)行yarn dev，在瀏覽器中打開(kāi)對(duì)應(yīng)的頁(yè)面，比如：http://localhost:5173 。此時(shí)代碼將會(huì)停留在我們打的斷點(diǎn)函數(shù)調(diào)用處。左側(cè)可以看到相關(guān)的調(diào)試信息。

點(diǎn)擊右上角的調(diào)試工具可以進(jìn)行繼續(xù)、逐過(guò)程、單步調(diào)試、 單步調(diào)成、重啟、停止等調(diào)試操作。

鼠標(biāo)懸浮到變量上，可以方便快捷的查看變量?jī)?nèi)容。

到此這篇關(guān)于在VSCode中進(jìn)行JavaScript調(diào)試的詳細(xì)流程的文章就介紹到這了,更多相關(guān)VSCode中進(jìn)行JavaScript調(diào)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論