Debug & Run Angular2 Typescript с кодом Visual Studio?

Отладка и запуск Angular2 Typescript с кодом Visual Studio?

Я пытаюсь отлаживать приложение Angular2 Typescript с VS-кодом https://angular.io/guide/quickstart

Кто-нибудь может поделиться шагами по отладке и запуску из кода VS?

Ответ 1

После многих исследований я нашел эти шаги -

Прежде чем начать, убедитесь, что у вас есть последняя версия VS-кода. Вы можете проверить последнюю версию - Справкa > Проверить наличие обновлений или О программе.

Установите расширение под названием "Отладчик для Chrome". После завершения установки перезапустите VS-код.
Перейдите в окно "Отладка", откройте "launch.json" с помощью Chrome.

В разделе конфигурации Launch.json используйте ниже config

{
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/Welcome",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

В tsconfig.json убедитесь, что у вас есть "sourceMap": true

Это завершает настройки среды отладки. Теперь перед началом отладки убедитесь, что все существующие экземпляры Chrome.exe закрыты. Проверить из диспетчера задач или использовать команду DOS 'killall chrome

Запустите проект, используя команду запуска npm и Chrome в качестве браузера по умолчанию.
После успешного запуска приложения вы получите номер порта. Скопируйте URL-адрес из браузера Chrome и вставьте в ссылку выше. (ПРИМЕЧАНИЕ. Если вы используете маршрутизацию в своем приложении, то url хотел бы, чтобы в противном случае он будет заканчиваться index.html и т.д.)
Теперь разместите точки останова, где бы вы ни находились в своих typescript файлах.
Снова перейдите в окно отладки в VS-коде и нажмите Run. Ваша вкладка/экземпляр, связанный с отладчиком, будет выглядеть ниже.

Ответ 2

Укажите userDataDir - это позволит избежать коллизий с другими экземплярами Chrome, которые у вас уже могут быть запущены. Из-за этого я заметил, что Chrome просто перестает слушать любой указанный вами порт. Ниже то, что я использую, и это здорово!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Благодаря @reecebradley - GitHub: Невозможно подключиться к цели: подключиться ECONNREFUSED

Ответ 3

У меня была аналогичная проблема, но в моем проекте также был включен веб-пакет, который привел к отказу вышеупомянутых решений. После прохождения Интернета я нашел решение в потоке github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

В любом случае, это то, что было сделано.

Примечание. -. Перед началом работы вы должны проверить, есть ли у вас последняя версия визуального кода студии, а также установить расширение под названием Отладчик для Chrome в коде VS.

Во-первых, в './config/webpack.dev.js'

use = > devtool: 'source-map'
вместо = > devtool: 'cheap-module-source-map'

Затем установите и используйте файл write-file-webpack-plugin:

npm install --save write-file-webpack-plugin

Добавьте плагин в './config/webpack.dev.js', добавив:

const WriteFilePlugin = require ('write-file-webpack-plugin');

под плагинами Webpack вверху. Продолжайте добавлять:

new WriteFilePlugin()

в список плагинов после нового нового DefinePlugin(), i.e

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

Это гарантирует, что исходные карты записываются на диск

Наконец, мой launch.json приведен ниже.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

Обратите внимание на отсутствие "/dist/" в веб-корне. с этой конфигурацией исходные карты находятся в. /dist/, но они указывают на. /src/. vscode добавляет абсолютный корень в рабочую область и правильно решает файл.

Ответ 4

Вот официальная документация кода Visual Studio о том, как отлаживать Angular в VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Для отладки Angular-кода на стороне клиента нам нужно установить расширение Debugger for Chrome. Откройте представление "Расширения" (Ctrl + Shift + X) и введите "хром" в поле поиска. Вы увидите несколько расширений, которые ссылаются на Chrome. Нажмите кнопку Установить для отладчика для Chrome. Кнопка изменится на Установка, затем, после завершения установки, изменится на Перезагрузить. Нажмите "Перезагрузить", чтобы перезапустить VS Code и активировать расширение.

Нам нужно изначально настроить отладчик. Для этого перейдите в представление "Отладка" (Ctrl + Shift + D) и нажмите кнопку с изображением шестеренки, чтобы создать файл конфигурации отладчика launch.json. Выберите Chrome из выпадающего списка Select Environment. Это создаст файл launch.json в новой папке .vscode в вашем проекте, которая включает конфигурацию для запуска веб-сайта или присоединения к работающему экземпляру. Нам нужно сделать одно изменение для нашего примера: изменить порт с 8080 на 4200.

Ответ 5

У меня были проблемы с этим, и хотя ответ @Sankets помог мне решить эту проблему, я решил https://github.com/angular/angular-cli/issues/2453.

В частности, добавление ниже к launch.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

Ответ 6

Для angular -seed:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

Ответ 7

Эти моды до launch.json работали для меня на MacOS, что позволило мне получить отладчик и точки останова, работающие в новом экземпляре Chrome на сеанс отладки...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

Ответ 8

Этот вопрос проверяется и проверяется -

Шаг 1: Установите хром-отладчик: просто откройте командную палитру (Ctrl + Shift + P) внутри кода VS и введите расширения: установите команду "Расширение". Когда появится список расширений, введите "chrome" для фильтрации списка и установки расширения отладчика для Chrome. Затем вы создадите файл конфигурации запуска.

[Подробнее о шаге 1]

Шаг 2: Создайте и обновите файл launch.json: Два примера config.json для запуска с запросом: "запуск". Вы должны указать либо файл, либо URL-адрес для запуска Chrome на локальный файл или URL-адрес. Если вы используете URL-адрес, установите webRoot в каталог, из которого поданы файлы. Это может быть либо абсолютный путь, либо путь с использованием ${workspaceRoot} (папка открыта в коде). webRoot используется для решения URL-адресов (например, http://localhost/app.js ") в файл на диске (например," /Users/me/project/app.js "), поэтому будьте осторожны, чтобы он правильно установил. обновить содержимое файла launch.json следующим образом:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[Подробнее о шаге 2]

Ответ 9

Мне нужно использовать CORS чтобы открыть Chrome с отключенной веб-безопасностью. Затем я делаю отладку приложения Angular, подключая отладчик к Chrome.

Линия CMD для запуска Chrome с отключенной веб-безопасностью:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

Файл launch.json для подключения отладчика:

{
    // Use IntelliSense to learn about possible 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": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Ответ 10

@Sanket ответ был правильным, но у меня были некоторые проблемы с этим. Первый Launch.json находится в каталоге ".vscode" проекта. Второй: номер порта должен совпадать с портом сервера по умолчанию, который вы используете для запуска вашего приложения. Я использую ng serve из cmd для запуска моего проекта, и номер порта по умолчанию был 4200, поэтому я изменил файл launch.json следующим образом

{//Use IntelliSense to learn about possible 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": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:4200", "sourceMaps": true, "webRoot": "${workspaceFolder}" } ] }