Как мне настроить Angular и VSCode, чтобы мои точки останова работали?

Ответы (8)

Протестировано с Angular 5 / CLI 1.5.5

  1. Установите расширение отладчика Chrome
  2. Создайте launch.json (внутри папки .vscode)
  3. Используйте мой launch.json (см. Ниже)
  4. Создайте tasks.json (внутри папки .vscode)
  5. Используйте мой tasks.json (см. Ниже)
  6. Нажмите CTRL+SHIFT+B
  7. Нажмите F5

launch.json для angular / cli> = 1.3

{
  "версия": "0.2.0",
  "конфигурации": [
    {
      "name": "Запустить Chrome",
      "тип": "хром",
      "запрос": "запуск",
      "url": "http://localhost: 4200 / #",
      "webRoot": "$ {workspaceFolder}"
    },
    {
      "name": "Прикрепить Chrome",
      "тип": "хром",
      "запрос": "прикрепить",
      "url": "http://localhost: 4200 / #",
      "webRoot": "$ {workspaceFolder}"
    },
    {
      "name": "Запустить Chrome (Тест)",
      "тип": "хром",
      "запрос": "запуск",
      "url": "http://localhost: 9876 / debug.html",
      "webRoot": "$ {workspaceFolder}"
    },
    {
      "name": "Запустить Chrome (E2E)",
      "тип": "узел",
      "запрос": "запуск",
      "program": "$ {workspaceFolder} / node_modules / protractor / bin / protractor",
      "протокол": "инспектор",
      "args": ["$ {workspaceFolder} /protractor.conf.js"]
    }
  ]
}

tasks.json для angular / cli> = 1.3

{
    "версия": "2.0.0",
    "задания": [
      {
        "идентификатор": "нг подавать",
        "тип": "нпм",
        "скрипт": "старт",
        "проблемаМатчер": [],
        "группа": {
          "вид": "строить",
          "isDefault": true
        }
      },
      {
        "идентификатор": "нг тест",
        "тип": "нпм",
        "скрипт": "тест",
        "проблемаМатчер": [],
        "группа": {
          "вид": "тест",
          "isDefault": true
        }
      }
    ]
  }

Протестировано с Angular 2.4.8

  1. Установите расширение отладчика Chrome
  2. Создайте launch.json
  3. Используйте мой launch.json (см. Ниже)
  4. Запустите сервер разработки NG Live (ng serve)
  5. Нажмите F5

launch.json для angular / cli> = 1.0.0-beta.32

{
  "версия": "0.2.0",
  "конфигурации": [
    {
      "тип": "хром",
      "запрос": "запуск",
      "name": "Запустить Chrome",
      "url": "http://localhost: 4200",
      "webRoot": "$ {workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "$ {workspaceFolder} /. vscode / chrome",
      "runtimeArgs": [
        "- отключен-сеанс-разбился-пузырь"
      ]
    },
    {
      "name": "Прикрепить Chrome",
      "тип": "хром",
      "запрос": "прикрепить",
      "url": "http://localhost: 4200",
      «порт»: 9222,
      "webRoot": "$ {workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json для angular / cli <1.0.0-beta.32

{
  "версия": "0.2.0",
  "конфигурации": [
    {
      "name": "Обед Chrome",
      "тип": "хром",
      "запрос": "запуск",
      "url": "http://localhost: 4200",
      "webRoot": "$ {workspaceFolder} / src / app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack: ///./~/*": "$ {workspaceFolder} / node_modules / *",
        "webpack: ///./src/*": "$ {workspaceFolder} / src / *"
      },
      "userDataDir": "$ {workspaceFolder} /. vscode / chrome",
      "runtimeArgs": [
        "- отключен-сеанс-разбился-пузырь"
      ]
    },
    {
      "name": "Прикрепить Chrome",
      "тип": "хром",
      "запрос": "прикрепить",
      "url": "http://localhost: 4200",
      «порт»: 9222,
      "webRoot": "$ {workspaceFolder} / src / app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack: ///./~/*": "$ {workspaceFolder} / node_modules / *",
        "webpack: ///./src/*": "$ {workspaceFolder} / src / *"
      }
    }
  ]
}

@ Asesjix ответ очень подробный, но, как отмечали некоторые, по-прежнему требуется несколько взаимодействий для запуска ng serve, а затем запуска приложения Angular в Chrome. Я получил это одним щелчком мыши, используя следующую конфигурацию. Основное отличие от ответа @Asesjix заключается в том, что тип задачи теперь shell, а вызовы команд добавляют start перед ng serve, поэтому ng serveможет существовать в собственном процессе и не блокировать запуск отладчика:

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

There're two different ways of doing that. You can launch a new process or attach to an existing one.

Ключевым моментом в обоих процессах является одновременная работа сервера разработки веб-пакетов и отладчика VSCode.

Запустить процесс

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

    {
      "версия": "0.2.0",
      "конфигурации": [
        {
          "name": "Сеанс отладки Angular",
          "тип": "хром",
          "запрос": "запуск",
          "url": "http://localhost: 4200",
          "webRoot": "$ {workspaceFolder}"
        }
      ]
    }
    
  2. Запустите сервер Webpack dev из Angular CLI, выполнив npm start

  3. Перейдите в отладчик VSCode и запустите конфигурацию «Angular debugging session». В результате откроется новое окно браузера с вашим приложением.

Присоединить к существующему процессу

  1. Для этого необходимо запустить Chrome в режиме отладчика с открытым портом (в моем случае это будет 9222):

    Mac:

    / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222
    

    Windows:

    chrome.exe --remote-debugging-port = 9222
    
  2. Файл launch.json будет выглядеть следующим образом:

    {
      "версия": "0.2.0",
      "конфигурации": [
        {
          "name": "Прикрепить Chrome",
          "тип": "хром",
          "запрос": "прикрепить",
          «порт»: 9222,
          "url": "http://localhost: 4200 /",
          "webRoot": "$ {workspaceFolder}"
        }
      ]
    }
    
  3. Запустите сервер разработки Webpack из Angular CLI, выполнив npm start
  4. Выберите конфигурацию «Chrome Attach» и запустите ее.

В этом случае отладчик подключен к существующему процессу Chrome вместо запуска нового окна.

Я написал свою статью, где описал этот подход с иллюстрациями.

Простая инструкция по настройке отладчика для Angular в VSCode

Можно использовать эту конфигурацию:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

В моем случае я не использовал исходное дерево папок проекта Angular, и я знал, что что-то пошло не так с битом webRoot / {workspaceFolder}, но все мои эксперименты дали безрезультатно. Получил подсказку от другого SO-ответа, на который я свяжусь, если найду его снова.

Мне помогло найти содержимое переменной {workspaceFolder} во время выполнения, а затем изменить его на расположение моей папки «src», в которой у вас есть «app / *». Чтобы найти его, я добавил preLaunchTask в свой файл launch.json и задачу для вывода значения {workspaceFolder}.

launch.json, который появляется после установки отладчика Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json По умолчанию отсутствует. Нажмите Ctrl + Shift + p, и я думаю, это называется «создать задачу для другой команды» или что-то в этом роде. Кажется, не видно его после создания tasks.json. Вы также можете просто создать файл в том же месте, что и launch.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

Как только я узнал значение $ {workspaceFolder}, я исправил его так, чтобы он указывал на мою папку src в моем новом дереве проекта, и все заработало. Для отладки требуется, чтобы ng serve выполнялась либо как задача перед запуском, либо как часть сборки (примеры выше), либо в командной строке.

Здесь - это ссылка на все переменные, которые вы можете использовать:

Похоже, команда VS Code сейчас хранит рецепты отладки.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

Here is a bit lighter solution, works with Angular 2+ (I'm using Angular 4)

Также добавлены настройки для Express Server, если вы запускаете стек MEAN.

{
  // 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": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

Это подробно описано на сайте Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial

2022 WebDevInsider