Как отлаживать js и node.js в vscode

Visual Studio Code

Как правило, все отлаживают js на стороне браузера, но иногда вам нужно отлаживать js или node.js в инструменте кода, как в фоновом режиме.Ниже описано, как использовать точки останова в vscode.

1, используется для отладки js

Первый: найдите Debugger for Chrome в левом расширении и нажмите «Установить»:

在这里插入图片描述
  

Два: нажмите f5 в каталоге вашего собственного html-проекта или нажмите кнопку отладки слева.

在这里插入图片描述
,на вершине
在这里插入图片描述
, выбираем выпадающую кнопку, там будет добавить, выбираем хром
在这里插入图片描述
  3: После этого файл конфигурации launch.json появится в вашем собственном каталоге проекта.
在这里插入图片描述
  4: Но если вы хотите отлаживать разные файлы кода, вам нужно каждый раз изменять файл конфигурации   

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/jsTest/test1/test1.html"  #每次需要修改这里的文件地址
        }
    ]
}

5: Здесь вы можете отлаживать, в

在这里插入图片描述
выберитеLaunch index.html (disable sourcemaps)Элемент отладки, нажмите F5 для отладки, он появится, одновременно откройте браузер Google, нажмите
在这里插入图片描述
, вы можете войти в стадию отладки

2, используется для отладки node.js

Есть много способов отладки nodejs, вы можете прочитать эту статьюblog.rising stack.com/how-to-getting…

Среди них то, как мне больше всего нравится использовать V8 Inspector и vscode. В vscode нажмите кнопку этого паука

在这里插入图片描述
Вы можете увидеть боковую панель, где появляется отладка, а затем добавить конфигурацию
在这里插入图片描述
Выберите среду
在这里插入图片描述
Вы можете увидеть файл launch.json.
在这里插入图片描述
При запуске выберите соответствующую конфигурацию, затем щелкните зеленый треугольник, указывающий вправо
在这里插入图片描述
режим запуска и режим подключения

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Port",
      "address": "localhost",
      "port": 5858
    }
  ]
}

Когда запрос запущен, это режим запуска.Это программа запускается из vscode.Если это отладка, то она всегда будет в режиме отладки. Режим подключения предназначен для подключения к запущенной службе. Например, если вы запустили проект снаружи и вдруг возникла необходимость отладки, вам не нужно закрывать уже запущенный проект и перезапускать его в vscode, пока вы запускаете его в режиме присоединения, vscode может подключиться к сервису, который уже начато. Когда отладка окончена, просто отключите соединение, что явно удобнее запуска.

Начните с npm в отладке

Много раз мы пишем длинные команды запуска и конфигурации в сценариях package.json, например

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},

Мы хотим, чтобы vscode использовал npm для запуска и отладки, что требует следующей конфигурации:

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"    //这里的dev就对应package.json中的scripts中的dev
  ],
    "port": 9229    //这个端口是调试的端口，不是项目启动的端口
},

Начните с nodemon в отладке

Просто используйте npm для запуска, хотя в команде dev используется nodemon, программу можно нормально перезапустить, но после перезапуска отключается отладка. Поэтому вам нужно разрешить vscode использовать nodemon для запуска проекта.

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",    //相当于--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [    //对应nodemon --inspect之后除了启动文件之外的其他配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},

Обратите внимание на runtimeArgs здесь, если эти конфигурации прописаны в package.json, то дело обстоит именно так

nodemon --inspect --exec babel-node --presets env ./bin/www

Это очень удобно, проект можно нормально перезапустить, а функция отладки будет включаться при каждом перезапуске.

Однако что, если мы не хотим постоянно включать функцию отладки?Это требует использования режима подключения, упомянутого выше. Используйте следующую команду для нормального запуска проекта

nodemon --inspect --exec babel-node --presets env ./bin/www

Когда мы хотим выполнить отладку, запустите следующую конфигурацию в отладке vscode.

{
  "type": "node",
  "request": "attach",
  "name": "Attach to node",
  "restart": true,
  "port": 9229
}
Категории