Запуск проекта NodeJS в коде Visual Studio с пряжей

У меня есть проект NodeJS, который я могу запустить из командной строки с помощью команды yarn start. Мой package.json выглядит примерно так:

{
  "name": "projectname",
  "version": "0.0.1",
  "description": "",
  "author": "My Name",
  "license": "",
  "scripts": {
    "start": "yarn dev",
    "dev": "yarn stop && pm2 start pm2-dev.yaml && webpack-dev-server --progress",
    "prod": "yarn stop && yarn build && pm2 start pm2-prod.yaml",
    "build": "rimraf dist lib && babel src -d lib --ignore test.js && cross-env NODE_ENV=production webpack -p --progress",
    "stop": "rimraf logs/* && pm2 delete all || true"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "ejs": "2.5.5",
    "express": "^4.14.1",
    "pg": "^6.1.2",
    "react": "^15.4.2",
    "redux": "^3.6.0",
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "cross-env": "^3.1.4",
    "eslint": "^3.13.0",
    "pm2": "^2.3.0",
    "redux-mock-store": "^1.2.2",
    "rimraf": "^2.5.4",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.2.1"
  }
}

Я пытаюсь запустить этот проект в режиме отладки с кодом Visual Studio, но почти безуспешно. Я определил свою конфигурацию запуска в файле VS Code launch.json следующим образом:

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "yarn",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "start"
      ],
      "port": 5858,
      "cwd": "${workspaceRoot}",
      "timeout": 10000
    }
  ]
}

Проблема с этой конфигурацией заключается в том, что время ожидания обычно истекает, потому что сборка webpack-dev-server длиннее 10 секунд. Я могу увеличить timeout в своей конфигурации, но я заметил, что VS Code в конечном итоге приводит к сообщению Cannot connect to runtime process (timeout after 30000 ms)., поэтому я предполагаю, что это не очень хорошее решение. Кроме того, мои точки останова игнорируются с такой конфигурацией, что говорит мне, что я определенно делаю что-то не так.

Это первый раз, когда я пробую Visual Studio Code, и я обычно не использую NodeJS, но я получил этот проект со всеми этими скриптами в package.json, уже определенными, поэтому я пытаюсь адаптироваться к нему, и поэтому вся путаница в том, как чтобы запустить его правильно.

Может ли Visual Studio Code запустить подобный проект с полной функциональностью отладки, и если да, то как мне настроить сценарий запуска?


visual-studio-code node.js yarnpkg
person errata    schedule 21.02.2017    source источник
comment
что я обычно делаю для отладки, так это запускаю процесс сборки вручную. затем запустите отладку кода vs. никогда не пытался собрать и отладить с помощью кода vs за один раз   -  person Rajat banerjee    schedule 06.04.2018

Ответы (4)


arrow_upward
19
arrow_downward

В итоге у меня была следующая конфигурация в launch.json:

{
    "type": "node",
    "request": "launch",
    "name": "Launch via Yarn",
    "runtimeExecutable": "yarn",
    "cwd": "${workspaceFolder}",
    "runtimeArgs": ["start:debug"],
    "port": 5858
}

И следующая запись в свойстве scripts внутри package.json:

"start:debug": "node --inspect-brk=5858 ./server/index.js",

Вы можете включить ключ timeout (который по умолчанию равен 10000) и увеличить его значение, если в вашем package.json есть какой-либо сценарий prestart:debug, что может привести к задержке запуска фактического приложения узла.

person Luke    schedule 08.05.2019
comment
По какой-то причине это не показывает вывод терминала для просмотра в любом месте. - person MarcinWolny; 29.10.2020

arrow_upward
2
arrow_downward

Я не могу конкретно ответить на части вопроса о веб-пакете. Однако ваш сценарий выше не будет работать, потому что вы не включили отладку. Предоставление отладки позволяет отладчику подключиться к этому процессу, а также блокирует выполнение программы до тех пор, пока отладчик не подключится. Вам нужно будет создать еще один скрипт в package.json, который позволяет выполнять отладку. Затем вы можете использовать свой скрипт для отладки для отладки, а скрипт без отладки — для нормальной работы. Например:

  "scripts": {
    "start": "yarn dev",
    "dev": "node entry.js",
    "dev-debug": "node --inspect-brk=5858 entry.js",

Затем в вашем launch.json замените «start» на «dev-debug». Порт отладки уже установлен на 5858 как в launch.json, так и в package.json, так что это должно работать. Ключ запускает узел с помощью команды --inspect-brk, заставляя выполнение приложения узла останавливаться до тех пор, пока к нему не подключится отладчик.

person Joe B.    schedule 11.10.2018

arrow_upward
1
arrow_downward

В дополнение к выше - чтобы моя работа заработала, мне пришлось добавить следующее в мой package.json(exec все еще требовался ) -

"start:debug": "nodemon --inspect-brk=5858 --exec \"babel-node\" src/index.js"
person AngryDaz    schedule 15.07.2020
comment
Добро пожаловать в СО! Пожалуйста, добавьте ссылку на этот предыдущий ответ с помощью edit. В противном случае может случиться так, что сортировка со временем изменится. - person Hille; 15.07.2020

arrow_upward
0
arrow_downward

Не использовал отлаженный код VS, однако я использую nodemon для отладки Chrome с помощью сценария shell.

bin_dir="$__dirname/../node_modules/.bin"
src_dir="$__dirname/../src"

"$bin_dir/nodemon" --ext js,yaml \
    --watch "$src_dir/package.json" \
    --watch "$src_dir" \
    "$src_dir/index.js" \
    --exec "yarn && babel-node --inspect=0.0.0.0:9229"

Откройте chrome://inspect/#devices и запустите отладчик.

person Rob Gleeson    schedule 23.05.2018