Код Visual Studio: точка останова установлена, но еще не привязана - Vue. js - PullRequest
Новая
       7

Код Visual Studio: точка останова установлена, но еще не привязана - Vue. js

0 голосов
/ 26 мая 2020

У меня есть большой проект Vue. js, с которым я пытаюсь правильно настроить отладку в VS Code. Я пробовал разные вещи в течение целой недели, и у меня все еще возникают проблемы с привязкой точек останова. Как бы то ни было, они обычно хуже возникают в классах, созданных с помощью фабричного шаблона или таких вещей, как действия Vuex, которые не имеют напрямую доступных конечных точек функций - это может быть связано.

Вот образец некоторых запускать конфиги ... 

    {
        "name": "Parity - Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080/app",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*",
          "/./*": "${webRoot}/*",
          "/src/*": "${webRoot}/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*"
        }
    },
    {
      "name": "Parity - Edge",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:8080/app",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },

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

1 Ответ

0 голосов
/ 26 мая 2020

Покопавшись во вкладке «Источники» в браузере, я обнаружил, что исходные карты в основном находятся в папках веб-пакетов для этого, поэтому они не обнаруживаются (исключение составляют файлы *. vue, поэтому почему они будут работать нормально).

Следующая конфигурация работает для меня, но полный ответ:

посмотрите, где находятся файлы в «Источниках» в вашей сети браузер и используйте эти местоположения для сопоставления с фактическим местоположением файла - делать то, что я делал раньше, и просто пытаться использовать чужую случайную конфигурацию, не всегда сработает. 

    {
        "name": "Parity - Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080/app",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*",
          "webpack:///./src/*": "${webRoot}/*",
          "webpack:///./node_modules/*": "${webRoot}/node_modules/*"
        }
    },
    {
      "name": "Parity - Edge",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:8080/app",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///./node_modules/*": "${webRoot}/node_modules/*"
      }
    },
...