Отладка кода Visual Studio Chrome, точки останова не будут достигнуты

У меня есть приложение Angular2/typcript, которое я разрабатываю в VSCode. Я использую Gulp для создания файлов машинописного текста и gulp-sourcemap для создания файлов карт. Присоединение / запуск chrome работает хорошо после некоторой обработки расширения отладки chrome для VSCode, но я не могу получить точки останова, чтобы поразить. Я запускаю сайт с "dnx web", но не думаю, что это должно иметь значение.

Моя структура папок выглядит так:

project/wwwroot/index.html
project/wwwroot/app/myfile.js
project/wwwroot/app/myfile.js.map
project/scripts/myfile.ts

мой launch.json выглядит так:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8001/portfolios",
      "runtimeArgs": [
          "--new-window", //Open in new window
          "--user-data-dir=C:/temp/", 
          "--remote-debugging-port=9222" 
      ],
      "webRoot": "${workspaceRoot}/wwwroot", 
      "sourceMaps": true
    }
  ]
}

и моя задача сборки gulp выглядит так:

gulp.task('ts', function (done) {
  var files = gulp.src(tsToMove)
    .pipe(sourcemaps.init())
    .pipe(ts(tsConfig), undefined, ts.reporter.fullReporter());
    return files.js.pipe(sourcemaps.write(".",{sourceRoot: '../scripts'}))
    .pipe(gulp.dest('scripts'));
})

Я проверил, что файлы карт создаются и хранятся в той же папке, что и файлы js. при строительстве.

Спасибо за любые подсказки.

Источник

5 ответов

Установка местоположения рабочей области для расположения моих файлов машинописного текста, а не моих файлов сборки, работала для меня.

Неподтвержденная точка останова (расположение моего скомпилированного файла)

"webRoot": "${workspaceRoot}/build/client"

Рабочая точка останова (расположение моего файла TS)

"webRoot": "${workspaceRoot}/client"

Я чувствую, что должен упомянуть, что я использую расширение отладчика для Chrome

Источник

Так что я часами возился с этим и наконец заработал: RVCA18 был прав в своем ответе:

Вы должны убедиться, что webRootустановлен правильно, и будет зависеть от того, откуда вы запускаете dnx. Если из вашей папки 'project', тоэто ваш настоящий webRoot.

Вы также можете использовать файл исходного кода. Если вы откроете файл, он будет иметь такую ​​структуру: {"version":3,"sources":[],"names":[],"sourcesContent":[]}

Найти sources prop, который является массивом всех ваших исходных файлов. Например, если я ищу одно из моих имен классов, я нахожу источник примерно таким: "webpack:///./app/components/TargetCard.js", Я использую webpack и имею структуру dir, как показано ниже (упрощенно):

main
  app
  dist

что означает, что мой webRoot что касается VSCode, то он должен быть равен dir на один уровень выше "app" или "main". Это также то место, откуда я запускаю webpack, так что это имеет смысл. Если я открою "основную" папку в VSCode, то мой ${workspaceRoot} также будет 'main', поэтому чтобы отладчик нашел мои файлы, я должен установить webRoot просто быть ${workspaceRoot},

Источник

Я полностью согласен с RVCA18. Речь идет о неправильной настройке webRoot. У меня был VS-код ${workspaceRoot}, указывающий на подпапку (только потому, что я открыл проект таким образом, и у меня не было скрипта в папке верхнего уровня). Поскольку запущенный index.html находится в папке верхнего уровня, мне пришлось установить следующий параметр в launch.json

"webRoot": "${workspaceRoot}/.."
Источник

Если вы используете отладчик для расширения Chrome, я бы проверил, что вы используете Chrome с удаленной отладкой? Я смог начать работать после того, как начал запускать Chrome с удаленной отладкой. с https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

На данный момент Chrome нужно запускать с включенной удаленной отладкой, и он поддерживает только одно одновременное соединение. Это означает, что если вы откроете DevTools внутри Chrome, соединение с VS Code будет прервано Chrome. Это немного раздражает, и мы надеемся, что эта проблема будет исправлена ​​в ближайшее время.

Для этого у меня есть командный файл, который открывает Chrome с этой командой.

start /d  "C:\Program Files (x86)\Google\Chrome\Application"  chrome.exe --remote-debugging-port=9222
Источник

For me, the problem occured in Visual Studio Code, using addons "Debugger for Chrome" with "Live Server".

I got it to work with the following settings:

Live Server's settings.json:

      "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --user-data-dir=C:/tmp --remote-debugging-port=9222",

launch.json:

      "configurations": [
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "url": "http://127.0.0.1:5500/${relativeFile}",
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}"
    },
Источник
Другие вопросы по тегам