Точка останова Visual Studio появляется в неправильном месте

Question

В моем проекте Vue + Vuex я пытаюсь отладить код Visual Studio.Я правильно запускаю отладчик с помощью инструментов отладки Chrome и карты, но когда я пытаюсь разместить точки останова в моих файлах .js или .vue, VS Code, кажется, размещает точки останова не в том месте.Например, здесь я пытаюсь разместить точку останова в одном из моих геттеров на строке 40, но она заканчивается на 15 строк позже:

Этоошибка в VS Code или, возможно, какая-то другая проблема?Любые предложения о том, как исправить?

Другие точки останова в других строках имеют то же поведение, что и в последующих строках, но я не могу обнаружить шаблон.Это происходит как в файлах .js, так и в файлах .vue, и в объявлениях объектов, и в определениях традиционных функций корневого уровня.

Я использую VS Code 1.24.0.

Answer 1

Возможно, редактор и отладчик не используют одно и то же толкование «новой строки».Проверьте, использует ли код \ r или \ r \ n, и измените его на другой.

Answer 2

Я думаю, что вы на самом деле пытаетесь установить точку останова в середине оператора.

На самом деле это один оператор.

Рассмотрим приведенное ниже утверждение.

Вы можете установить точку останова перед ним.

> var obj = { a: value1, b: value2 }

Если вы напишите это как

var obj = { //can set break point here
 a: value1, //you can't set break point in this line 

 b: value2 //you can't set break point in this line 
}

Answer 3

Чтобы ответить на этот вопрос в каждом конкретном случае, потребуется использовать конфигурацию launch.json и как минимум структуру исходной папки.У меня есть правдивая история только с прошлой недели, чтобы проиллюстрировать, почему:

Фон

Недавно я унаследовал относительно небольшой проект Vue и сразу столкнулся с той же проблемой.Точки останова в VSCode были «нервными» во всех моих исходных файлах.

Проект не был разработан в VSCode, поэтому в управлении исходным кодом не было launch.json.Моя первая наивная попытка настройки отладки выглядела так:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceRoot}",
  "sourceMaps": true
}

Одна очень важная деталь - структура исходной папки.Выглядит это так:

D:\TST\PROJECT
└───src
    │   main.js
    │
    ├───components
    │       AnotherComponent.vue
    │       SomeComponent.vue
    │
    └───services
            myservice.js
            yourservice.js

---

Исправление

Легко найти проблему была webRoot.Поскольку все мои исходные файлы были в папке src, это должно было указывать на ${workspaceRoot}/src вместо просто ${workspaceRoot}.Просто это исправило все скачки в моих .vue файлах под src/components.К сожалению, точки останова в main.js и в файлах в папке services были по-прежнему нервными.

Следующим шагом было добавление ключа sourceMapPathOverrides в конфигурацию launch.json.VSCode автоматически завершает то, что я считаю значениями по умолчанию:

  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "meteor://?app/*": "${webRoot}/*"
  }

Я оставил их как есть, и добавил две записи.Чтобы исправить main.js, я добавил:

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

и исправить файлы в папке служб, которые я добавил:

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

На этом этапе все мои контрольные точки вели себя во всех моих файлах по всему проекту.

---

Но почему?

К сожалению, я не могу сказать вам, почему эти двав моем случае нужны магические линии или даже то, что они действительно делают.

Однако я могу рассказать вам, как я их угадал.В devtools Chrome я углубился в раздел webpack:// вкладки «Источники».Я заметил, что src/components показывалось в «корне» (зеленая стрелка), а других моих источников (красные стрелки) не было.Они показывались только под . (обведено красным).

Отказ от ответственности : я не эксперт в Vue, webpack, протокол отладки chrome, исходные карты или vue-загрузчик.Я просто еще один разработчик, который хочет устанавливать свои контрольные точки в своей IDE, а не в своем браузере.