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

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

四、如何在VSCode中使用條件斷點(diǎn)

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

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

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

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

例如，下面是一個(gè)示例配置文件，我們可以在其中配置兩個(gè)調(diào)試配置項(xiàng)：

{
  "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"
    }
  ]
}