Блог

Я пытаюсь отладить приложение Vue с помощью VSC. У меня есть следующий файл 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": [
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides":{
            "webpack:///src/*": "${webRoot}/*"
        } 
    },
    {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides":{
            "webpack:///src/*": "${webRoot}/*"
        }
    }
]
 

}

Я также добавил следующее vue.config.js файл в корневой каталог проекта

 module.exports = {
configureWebpack: {
    devtool: 'source-map'
},
devServer: {
    port: 8080
}
 

}

Для отладки приложения Vue я использую «службу запуска npm» в терминале, нажимаю опцию «Выполнить и отладить» в меню слева и выбираю конфигурацию отладки под названием «Запустить Chrome на локальном хосте».

Я не могу привязать какие-либо точки останова,т. Е. Точки останова представляют собой незаполненные серые круги в коде.

Не знаю, что попробовать дальше, в онлайн-поиске ничего не всплывает о том, в чем может быть проблема.

у вас, вероятно, есть несоответствие в вашем "sourceMapPathOverrides" .

"sourceMapPathOverrides" должно указывать на корневой файл, в котором webpack сгенерировал исходную карту. Вы можете проверить это в своих инструментах разработки chrome.

Сделайте следующее

1 — Откройте свои инструменты разработки chrome:

2 — Исследуйте webpack:// большинство случаев, когда он находится внутри . или src в папках. Чтобы проверить это, откройте случайный компонент vue, и он должен выглядеть так же, как в вашем редакторе vs-кода, это правильная исходная карта, на которую "sourceMapPathOverrides" следует указывать.

Бонус

Точная конфигурация, которую я использовал тогда, такова:

 {
  "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}/*"
      }
    }
  ]
}
 

В любом случае, убедитесь, что вы выполнили шаги, которые я перечислил, и посмотрите, исправит ли это проблему.