快捷導(dǎo)航

在VSCode中進(jìn)行JavaScript調(diào)試的詳細(xì)流程

更新時間：2024年07月14日 10:49:25 作者：sg_knight

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

引言

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

1. 配置VSCode

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

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

1.2 編輯launch.json

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

{
  // 使用 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應(yīng)該指向您的項目源代碼目錄，這是VSCode用來解析Chrome中加載的腳本文件與本地源代碼之間映射關(guān)系的目錄。

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

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

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

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

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

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

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

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

您可能感興趣的文章: