引言

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

1. 配置VSCode

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

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

1.2 編輯launch.json

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

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

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

2. 設置斷點

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

3. 啟動調(diào)試會話 

在vscode中打開終端然后點擊終端中的+號旁邊的下拉箭頭，在下拉中點擊Javascript Debug Terminal就可以啟動一個debug終端。

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

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

鼠標懸浮到變量上，可以方便快捷的查看變量內(nèi)容。

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

最新評論