WebdriverIO - 除錯程式碼

要在 Visual Studio Code 編輯器中除錯 WebdriverIO 程式碼，我們必須啟用 JavaScript 偵錯程式的夜間版本。除錯是識別程式碼中錯誤根本原因的最重要步驟之一。

它還有助於理解程式流程。

啟用除錯

啟用除錯的步驟如下所示：

步驟 1 - 如果您使用的是 Windows 或 Linux 作業系統，請導航到以下連結：

https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

步驟 2 - 點選安裝。您的計算機上將出現以下螢幕：

如果我們使用的是 Mac 作業系統，則可以跳過步驟 1 和 2。

步驟 3 - 在專案中建立一個名為 .vscode 的資料夾。然後在此資料夾中建立一個名為 launch.json 的檔案。您的計算機上將出現以下螢幕：

步驟 4 - 在 launch.json 檔案中新增以下程式碼。

{
   "configurations": [
      {
         "name": "Webdriver IO",
         "type": "node",
         "request": "launch",
         "args": ["wdio.conf.js", "--spec", "${file}"],
         "cwd": "${workspaceFolder}",
         "autoAttachChildProcesses": true,
         "program": "${workspaceRoot}/node_modules/@wdio/cli/bin/wdio.js",
         "console": "integratedTerminal",
         "skipFiles": [
            "${workspaceFolder}/node_modules/**/*.js",
            "${workspaceFolder}/lib/**/*.js",
            "<node_internals>/**/*.js"
         ]
      },
   ]
}

步驟 5 - 在規範檔案中新增斷點。您的計算機上將出現以下螢幕：

步驟 6 - 轉到“執行”選單並選擇“開始除錯”選項。您的計算機上將出現以下螢幕：

步驟 7 - 執行將在除錯模式下觸發，底部會有一個橙色條帶。偵錯程式已附加訊息應反映在終端控制檯中。此外，執行將在斷點處停止。我們必須手動重新恢復它。

您的計算機上將出現以下螢幕：