Настройки отладчика для Chrome в VS Code с Vue.js


Настройки отладчика для Chrome в VS Code с Vue.js

04.10.2018 04:54:49 Просмотров 30 Источник

Со следующими настройками в файле. vscode\launch. json

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
    ]
}

Я могу установить точку останова в index.js файл в моем проекте, и он успешно срабатывает, но точки останова в файлах *.vue срабатывают неправильно.

Со следующими настройками:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

наоборот, точки останова в файлах *.vue запускаются успешно, но я не могу установить точку останова в своем файле. index.js файл.

Как заставить точки останова работать как в*. js, так и в *.vue?

См. более подробную информацию о том, как я настраиваю среду.

У вопроса есть решение - Посмотреть?

Ответы - Настройки отладчика для Chrome в VS Code с Vue.js / Debugger settings for Chrome in VS Code with Vue.js

Является ответом!
Steve

03.11.2018 12:37:48

Я был очень удивлен,но добавление двух версий переопределения исходной карты сработало для меня. Теперь я могу установить и остановить его на точках останова в файлах. vue,. js и моих импортированных модулях es6. Мне потребовалось всего около месяца, чтобы найти решение!

Надеюсь, это сработает для вас (это больше не работает для меня. Смотреть ниже)

      "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/*",
          "webpack:///src/*": "${webRoot}/*"
      }

Обновлено В Октябре 2019 Года:

Отладка как JS, так и vue-файлов сломалась для меня в недавнем обновлении. Наконец-то я нашел новые настройки, которые работают для обоих:

      "sourceMapPathOverrides": {
         "webpack:///src/*.vue": "${webRoot}/*.vue",
         "webpack:///./src/*.js": "${webRoot}/*.js"
      }
jomofrodo

24.09.2020 05:53:53

И вот что работает для меня в сентябре 2020 года в vsCode 1.49.1: очень похоже на ответ Стива выше:

     "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/src/*",
            "webpack:///./src/*.js": "${webRoot}/src/*.js",
         }
Помочь в развитии проекта:
Закрыть X