使用vscode調試代碼

使用 vscode 直接調試 js 代碼

步驟

• 將當前標簽頁設置為需要調試的 js
• 將需要打斷點的地方標上小紅點
• 左側工具欄點擊小蟲子（Run and Debug）
• 點擊運行和調試
• 選擇 nodejs 作為調試工具
• 開始調試

如果只調試 js 代碼的話，選擇 nodejs 即可

調試界面

總結

使用 vscode 調試非常方便，比直接在瀏覽器中調式體驗更好，可以邊調試邊改代碼，很爽的體驗；

launch 和 tasks 的使用

launch 的使用

待完成

tasks（任務）的使用

官網：https://code.visualstudio.com/docs/editor/tasks#_variable-substitution

預定義變量

官網：https://code.visualstudio.com/docs/editor/variables-reference#_predefined-variables

知乎：https://zhuanlan.zhihu.com/p/92175757

tasks.json

具體的配置文件

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "options": {
        "cwd": "${fileDirname}" // 定義執行環境
    },
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "ruler  -p  ${fileBasename}",
            "problemMatcher": {
                "fileLocation": [
                    "relative",
                    "${fileDirname}"
                ],
                "pattern": {
                    // 提示文本進行分組 下面是具體的提示文本
                    // s920.rule:652:1: warning 規則Server,"軟件預裝","os"已在647行定義
                    "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error)\\s+(.*)$",
                    "file": 1,			// 文件名所在組
                    "line": 2,			// 代碼所在行
                    "column": 3,		// 代碼所在列
                    "severity": 4,		// warning 還是 error
                    "message": 5		// 提示文本
                }
            },
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared",
                "showReuseMessage": false,
                "clear": true
            },
            "group": "build"
        },
    	{
            ...
        }
    ]
}

注意事項

使用 launch 時.vscode 目錄一定要在所打開文件夾的根節點下

否則點擊運行啟動調試則只能調試當天打開的 tab 標簽頁