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

Ответы:

124

После долгих исследований я нашел следующие шаги:

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

  1. Установите расширение под названием «Отладчик для Chrome». После завершения установки перезапустите код VS.

  2. Перейдите в окно отладки, откройте launch.json в Chrome.

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

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

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

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

  1. Запустите свой проект, используя команду npm start и Chrome в качестве браузера по умолчанию.

  2. После успешного запуска приложения вы получите номер порта. Скопируйте URL-адрес из браузера Chrome и вставьте в раздел URL-адресов выше. (ПРИМЕЧАНИЕ: если вы используете маршрутизацию в своем приложении, тогда URL-адрес будет похож на указанный выше, иначе он будет заканчиваться index.html и т.д.)

  3. Теперь разместите точки останова в любом месте ваших машинописных файлов.

  4. Снова перейдите в окно отладки в VS-коде и нажмите «Выполнить». Ваша вкладка / экземпляр, подключенный к отладчику, будет выглядеть, как показано ниже.

Отладка Chrome

— Санкет
источник
4
не могу понять .. 1. какое расширение установить. 2. где Launch.json?
— azulay7
3
@ azulay7 Вы впервые используете VScode? Его VScode, а не Visual Studio 2015 IDE. В любом случае, слева вы увидите параметр отладки (или используйте CTRL + SHFT + D), щелкните, чтобы открыть окно отладки. Как только вы откроете окно отладки, в верхней правой части окна отладки вы увидите опцию для открытия Launch.json . Для расширения chrome вы увидите параметр расширения (или используйте CTRL + SHFT + X) слева. Как только вы откроете окна расширений, найдите отладчик для Chrome. Установите это расширение. Вам придется перезапустить VScode. Надеюсь это поможет.
— Sanket
4
Я также боролся с "open launch.json". Шаги следующие: щелкните значок «Отладка» на левой боковой панели, затем щелкните зубчатое колесо в верхнем правом углу окна отладки и выберите «Chrome» из раскрывающегося списка, если он появится.
— Иван Кривяков
6
Кто-нибудь еще получаетFailed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:3000/)
— benscabbia
3
Я также получаю ошибку подключения к порту отладки? HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222Загрузка на localhost нормально.
— Mangopop
15

Укажите 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

— HydTechie
источник
Тем не менее, могут возникнуть проблемы ... Я переместил свою базу кода на диск C: (корневой), отладка прошла нормально.
— HydTechie
angular 2 chrome отладка не работает по странным причинам ... несколько раз проверяю все ожидающие в системе управления версиями, возьмите чистую папку, последняя
— версия
Я использую ниже запускаемый json - последовательно мог запускать код режима отладки \ 0 /: {"version": "0.2.0", "configurations": [{"name": "Launch localhost with sourcemaps", "type": "chrome", "request": "launch", "url": " localhost: 4200 ", "webRoot": "$ {workspaceRoot} / app / files", "sourceMaps": true}, {"name": " Launch "," type ":" chrome "," request ":" launch "," url ":" 127.0.0.1:4200 "," port ": 9222," sourceMaps ": true, //" diagnosticLogging ": true , "trace": "verbose", "webRoot": "$ {workspaceRoot}", "userDataDir":
— HydTechie
ПОПРОБУЙТЕ вариант запуска для отладки в реальном времени вместо исходных карт!
— HydTechie
5

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

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

Во всяком случае, так и было сделано.

Примечание: - Перед тем как начать, вы должны проверить, установлена ​​ли у вас последняя версия кода Visual Studio, а также установлено ли расширение под названием « Отладчик для Chrome » в VS Code.

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

  • используйте => 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 вверху. Продолжайте добавлять:

  • новый WriteFilePlugin ()

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

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 добавляет абсолютный корень к рабочей области и правильно разрешает файл.

— malmike21
источник
5

Вот официальная документация кода 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. Кнопка изменится на «Установка», а после завершения установки изменится на «Обновить». Нажмите Reload, чтобы перезапустить VS Code и активировать расширение.

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

— Тедди
источник
Что, если я хочу запустить Internet Explorer, а не Chrome?
— Роберманн
Я не знаю, зачем вам это нужно, но в настоящее время поддержки IE нет.
— Тедди
3

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

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

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}
— рубин
источник
2

Для угловых семян:

{
  "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/*"
      }
    }
  ]
}
— Мэтт Бирнер
источник
0

Эти моды 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}/*" }
— Симеон
источник
0

Это проверено и проверено -

Шаг 1. Установите хромированный отладчик: просто откройте палитру команд (Ctrl + Shift + P) внутри VS Code и введите Extensions: Install Extension command. Когда появится список расширений, введите «хром», чтобы отфильтровать список и установить расширение «Отладчик для Chrome». Затем вы создадите файл конфигурации запуска.

[Подробнее об этапе 1]

Шаг 2: Создайте и обновите файл launch.json: два примера конфигураций launch.json с "запросом": "запуск". Вы должны указать файл или URL-адрес для запуска Chrome для локального файла или URL-адреса. Если вы используете URL-адрес, установите webRoot в каталог, из которого обслуживаются файлы. Это может быть абсолютный путь или путь с использованием $ {workspaceRoot} (папка, открытая в Code). 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]

— энтузиаст
источник
0

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

Строка 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}"
        },
    ]
}
— Картик
источник
0

Ответ Санкета был правильным, но у меня были некоторые проблемы с этим.

Во-первых, 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}"
        }
    ]
}
— Хамед Махдизаде
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.