Как отлаживать Angular с помощью VSCode?

127

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

angular  debugging  webpack  visual-studio-code 
— Asesjix
источник
что вы имеете в виду? Как они не работают?
— TylerH
2
@TylerH, это должно быть руководство, как это работает. он не работает без модифицированного launch.json.
— Asesjix

Ответы:

178

Протестировано с 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 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
        }
      }
    ]
  }

Протестировано с Angular 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 01
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

Есть два разных способа сделать это. Вы можете запустить новый процесс или присоединиться к уже существующему.

Ключевым моментом в обоих процессах является одновременная работа сервера разработки веб-пакетов и отладчика 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 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

    Окна:

    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 dev из Angular CLI, выполнив npm start
  4. Выберите конфигурацию «Chrome Attach» и запустите ее.

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

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

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

— skryvets
источник
Спасибо, каждый раз при запуске хрома я должен запускать эту команду. 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-angular указывает прямо на интересный момент, если вы хотите отредактировать свой ответ ...
— Пипо
@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"
      ]
    }
  ]
}
— Исак Ла Флер
источник
Можете ли вы отлаживать / устанавливать точку останова для кода на стороне сервера одновременно с angular с этой конфигурацией?
— Mika571
@ Mika571 нет, к сожалению ... Я попробовал это прямо сейчас. Я бы тоже хотел отлаживать серверную и клиентскую части одновременно.
— Лениэль Маккаферри
1

Ответ @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"
        }
    ]
}
— ubiquibacon
источник
0

В моем случае я не использовал исходное дерево папок проекта Angular, и я знал, что что-то не так с webRoot/ {workspaceFolder}bit, но все мои эксперименты не дали результата. Получил совет от другого 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чтобы она выполнялась либо как задача перед запуском, либо как часть сборки (примеры выше), либо в командной строке.

Вот ссылка на все переменные, которые вы можете использовать:

— ясень
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.