Як налагодити Angular за допомогою VSCode?

127

Як я можу налаштувати Angular та VSCode так, щоб мої точки зупинки працювали?

angular  debugging  webpack  visual-studio-code 
— Asesjix
джерело
Що ви маєте на увазі? Як вони не працюють?
— TylerH
2
@TylerH, Це має бути керівництвом, як це працює. не працює без зміненого start.json.
— Asesjix

Відповіді:

178

Перевірено з кутовим 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 for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

Тестували з кутовим 2.4.8

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

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}
— Asesjix
джерело
7
чи знаєте ви, як запустити, NG Live Development Serverа потім запустити Chromeлише одним F5клацанням миші?
— Мердан Гочмурадов
2
Вибачте, що це неможливо, оскільки завдання "ng serve" потрібно було б запустити в preLaunchTask. "ng serve" повинен працювати постійно, і тому "preLaunchTask" не завершений, що означає, що код vs не запускає процес налагодження. але я додав нову конфігурацію, яка повинна зробити роботу трохи швидшою ;-)
— Asesjix
1
Чітка і коротка відповідь. Було б добре, якби ви могли коротко пояснити launch.jsonі tasks.jsonщо тут робити. Як я зрозумів, launch.jsonце запустити сервер вузлів і прослухати порт 8080, а також tasks.jsonінструкція використовувати npmта виконувати команду ng serveдля запуску програми.
— shaijut
@Zachscs яку кутову версію ви використовували?
— Asesjix
1
У мене була така ж проблема, не встановлені точки перерви, поки нарешті я не зрозумів, що моя веб-кореня помилялася. У мене було значення за замовчуванням для webRoot ("webRoot": "$ {workspaceFolder}") замість $ {workspaceFolder} / my-app-folder
— Джозеф Сімпсон
48

Схоже, команда 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"]
    }      
  ]
}
— Леві Фуллер
джерело
10

Є два різні способи зробити це. Ви можете запустити новий процес або приєднати до вже існуючого.

Ключовим моментом в обох процесах є одночасне запуску сервера розробників webpack та відладчика VSCode .

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

  1. У свій launch.jsonфайл додайте таку конфігурацію:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

  2. Запустіть сервер розробників Webpack від Angular CLI, виконавши npm start

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

Додайте до існуючого процесу

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

    Мак:

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

    Windows:

    chrome.exe --remote-debugging-port=9222

  2. launch.json файл буде виглядати наступним чином:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}
  3. Запустіть сервер розробників Webpack від Angular CLI, виконавши npm start
  4. Виберіть конфігурацію "Attach Chrome" та запустіть її.

У цьому випадку налагоджувач додається до існуючого процесу Chrome замість запуску нового вікна.

Я написав власну статтю, де описав цей підхід ілюстраціями.

Проста інструкція, як налаштувати налагоджувач для Angular у VSCode

— скривець
джерело
Дякую, щоразу, коли запускаю хром, я повинен запускати цю команду. chrome.exe --remote-debugging-port=9222Чи є альтернатива для одноразової конфігурації
— Saurabh47g
Залежно від ваших облікових даних, ви можете мати правою кнопкою миші на хром у меню запуску Windows, натиснути властивості та додати туди прапор. Це не працює для мене на моєму робочому комп’ютері, тому я відчув команду в git bash для windows.
— vitale232
7

Це детально пояснено на сайті Visual Studio Code: https://code.visualstudio.com/docs/nodejs/angular-tutorial

— Віктор Іонеску
джерело
ви мали на увазі code.visualstudio.com/docs/nodejs/… ? · # _Debugging-кутових точок безпосередньо до цікавого , якщо ви хочете редагувати свою відповідь ...
— PIPO
@Pipo Ні, я не мав на увазі nodejs, я не використовую nodejs на стороні сервера, тому я б не знав.
— Віктор Іонеску
3

Можна використовувати цю конфігурацію:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}
— Ахмад Агазаде
джерело
2

Ось трохи легше рішення, працює з Angular 2+ (я використовую 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"
      ]
    }
  ]
}
— Ісак Ла Флер
джерело
Чи можете ви налагоджувати / переривати точку коду вашого сервера одночасно з кутовим з цим налаштуванням?
— Mika571
@ Mika571 nope, на жаль ... Я спробував це прямо зараз. Я також хотів би одночасно налагоджувати сервер та клієнтську сторону.
— Леніел Маккаферрі
1

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

task.json:

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

start.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}
— ubiquibacon
джерело
0

У моєму випадку я не використовував оригінальне дерево папок проекту Angular, і знав, що щось не так webRoot / {workspaceFolder}бітом але всі мої експерименти не дали результату. Отримав підказку з іншої відповіді, на яку я зв’яжу, якщо знову знайду її.

Що мені допомогло - знайти вміст змінної {workspaceFolder}під час виконання, а потім змінити її на розташування моєї папки "src", під якою у вас є "app / *". Щоб знайти його, я додав аpreLaunchTask у свій файл start.json і завдання вивести значення {workspaceFolder}.

start.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, і я думаю, що це називається "створити завдання для іншої команди" або щось подібне. Не можу бачити його після створення task.json. Ви також можете просто створити файл у тому самому місці, що і start.json

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

Як тільки я знав значення $ {workspaceFolder}, я виправив його, щоб вказати на свою папку src у моєму новому дереві проектів, і все працювало. Налагодження потрібно ng serveзапускати або як завдання перед запуском, або як частина збірки (приклади вище) або в командному рядку.

Ось посилання на всі змінні, які ви можете використовувати:

— Зола
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.