千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > 如何使用VSCode斷點進(jìn)行調(diào)試

如何使用VSCode斷點進(jìn)行調(diào)試

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-11-24 21:35:45 1700832945

對于開發(fā)者來說,調(diào)試是一項非常重要的工作。在調(diào)試軟件時,最常用的方法之一就是使用斷點。在VSCode中,我們可以使用斷點來調(diào)試我們的應(yīng)用程序。本文將從多個方面來講解如何在VSCode中使用斷點進(jìn)行調(diào)試。

一、如何在VSCode中設(shè)置斷點

要在VSCode中設(shè)置斷點,我們需要先打開我們的項目,然后進(jìn)入調(diào)試界面。調(diào)試界面的入口可以在菜單欄中找到,或者使用快捷鍵【Ctrl+Shift+D】。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "/**"
      ],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

在調(diào)試界面中,我們可以看到一個按鈕,上面寫著“暫?!薄_@是設(shè)置斷點的位置。我們可以點擊代碼行號旁邊的空白區(qū)域,來設(shè)置斷點。當(dāng)我們將鼠標(biāo)放在代碼行號上方時,會出現(xiàn)紅色的圓點,這表示我們已經(jīng)成功設(shè)置了斷點。

除了點擊空白區(qū)域,我們還可以使用快捷鍵【F9】來設(shè)置斷點。我們也可以使用條件斷點,只有在符合某些條件時才能觸發(fā)斷點。

二、如何在VSCode中調(diào)試Node.js應(yīng)用程序

在使用VSCode進(jìn)行Node.js應(yīng)用程序調(diào)試時,我們需要在調(diào)試配置文件中指定我們要調(diào)試的程序入口點文件。下面是一個示例配置文件:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "/**"
      ],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

這里的program選項就指定了我們要調(diào)試的入口點文件。

三、如何在VSCode中調(diào)試前端應(yīng)用程序

當(dāng)我們要調(diào)試前端應(yīng)用程序時,我們需要在調(diào)試配置文件中指定我們要調(diào)試的瀏覽器。下面是一個示例配置文件:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

這里的url選項就指定了我們要調(diào)試的URL地址,webRoot選項指定了我們的項目目錄。

為了在VSCode中調(diào)試前端應(yīng)用程序,我們還需要在項目代碼中設(shè)置斷點。這時,我們可以使用瀏覽器提供的開發(fā)者工具來查看我們的應(yīng)用程序代碼,并在代碼行號旁邊點擊設(shè)置斷點。

四、如何在VSCode中使用條件斷點

為了讓斷點更精確,我們可以使用條件斷點。條件斷點只有在符合某些條件時才會觸發(fā)。要使用條件斷點,我們首先需要設(shè)置一個斷點,在斷點上右鍵單擊并選擇“編輯斷點”。

在編輯斷點的對話框中,我們可以輸入一個一元表達(dá)式作為條件。任何返回true的表達(dá)式都會導(dǎo)致斷點被觸發(fā)。例如,如果我們要在變量x的值為10時觸發(fā)斷點,我們可以將條件設(shè)置為“x === 10”。

五、如何在VSCode中調(diào)試多個應(yīng)用程序

有時候,我們可能需要在同一個VSCode窗口中同時調(diào)試多個應(yīng)用程序。為了實現(xiàn)這個目標(biāo),我們可以使用多個調(diào)試配置文件。我們可以在.vscode/launch.json文件中創(chuàng)建多個配置項,每個配置項都對應(yīng)一個調(diào)試配置。

例如,下面是一個示例配置文件,我們可以在其中配置兩個調(diào)試配置項:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Server",
      "skipFiles": [
        "/**"
      ],
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Client",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

使用多個配置項,我們可以同時調(diào)試多個應(yīng)用程序。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT