Налагодити та запустити машинопис Angular2 за допомогою коду Visual Studio?

79

Налагодити та запустити машинопис Angular2 за допомогою коду Visual Studio?

Я намагаюся налагодити додаток Angular2 машинопис за допомогою коду VS https://angular.io/guide/quickstart

Хтось може поділитися кроками для налагодження та запуску з коду VS?

angular  typescript  visual-studio-code 
— Санкет
джерело

Відповіді:

124

Після багатьох досліджень я знайшов ці кроки -

Перш ніж почати, переконайтесь, що у вас остання версія VS коду. Ви можете перевірити останню версію - Довідка> Перевірити наявність оновлень або Про програму.

  1. Встановіть розширення під назвою "Налагоджувач для Chrome". Після завершення встановлення перезапустіть код VS.

  2. Перейдіть у вікно налагодження, відкрийте launch.json за допомогою Chrome.

  3. У розділі конфігурації Launch.json використовуйте нижче config

    {
    "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 . Для хромового розширення ви побачите опцію розширення (або використовуйте CTRL + SHFT + X) зліва. Відкривши вікна розширень, знайдіть налагоджувач для Chrome Встановіть це розширення. Вам доведеться перезапустити VScode. Сподіваюся, це допомагає.
— Санкет
4
Я також боровся з "open launch.json". Дії наступні: натисніть на піктограму "Налагодження" на лівій бічній панелі, потім натисніть на зубчасте колесо у верхньому правому куті вікна налагодження та виберіть "Хром" зі спадного списку, якщо він з’явиться.
— Іван Крив'яков
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: (root), налагодження працювало нормально.
— HydTechie
angular 2 chrome налагодження не працює має дивні причини .. кілька разів перевірка всіх, що очікують на керування джерелом, беруть чисту папку, остання, налагодження починає працювати ... причина, я не знаю .. :(
— HydTechie
Я використовую нижче json launch - постійно міг запускати код режиму налагодження \ 0 /: {"version": "0.2.0", "configurations": [{"name": "Запустити localhost with sourcemaps", "type": "chrome", "request": "launch", "url": " localhost: 4200 ", "webRoot": "$ {workspaceRoot} / app / files", "sourceMaps": true}, {"name": " Запуск "," type ":" chrome "," request ":" launch "," url ":" 127.0.0.1:4200 "," port ": 9222," sourceMaps ": true, //" diagnostLogging ": true , "trace": "багатослівний", "webRoot": "$ {workspaceRoot}", "userDataDir":
— HydTechie
Спробуй запустити варіант запуску налагодження в реальному часі замість вихідних карт!
— HydTechie
5

У мене була подібна проблема, але мій проект також включав веб-пакет, який спричинив збій вищезазначених рішень. Після пошуку в Інтернеті я знайшов рішення в потоці на github:

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

У всякому разі, це те, що було зроблено.

Примітка: - Перш ніж почати, ви повинні перевірити, чи маєте ви останню версію коду Visual Studio, а також встановили розширення під назвою " Налагоджувач для Chrome " у коді VS.

По-перше, у './config/webpack.dev.js'

  • use => devtool: 'source-map'
  • замість => devtool: 'дешевий-модуль-джерело-карта'

Потім встановіть і використовуйте плагін 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. Натисніть кнопку Встановити для налагоджувача для Chrome. Кнопка зміниться на Встановлення, після чого після завершення встановлення перейде на Перезавантажити. Натисніть Перезавантажити, щоб перезапустити код VS і активувати розширення.

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

— Тедді
джерело
Що робити, якщо я хочу запустити Internet Explorer, а не Chrome?
— robermann
Не знаю, чому ви хотіли б це зробити, але наразі підтримка 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: Встановіть chrome-налагоджувач: просто відкрийте палітру команд (Ctrl + Shift + P) всередині коду VS і введіть Extensions: Install Extension command. Коли з’явиться список розширень, введіть "chrome", щоб відфільтрувати список і встановити розширення Debugger for Chrome. Потім ви створите файл налаштування запуску.

[Докладніше про крок 1]

Крок 2: Створення та оновлення файлу launch.json: Два приклади конфігурацій launch.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]

— ентузіаст
джерело
0

Мені потрібно використовувати CORS тому я відкриваю хром із вимкненою веб-безпекою. Потім я роблю налагодження програми 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}"
        },
    ]
}
— Картік
джерело
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.