Использование точек останова в VS Code и приложении Quasar Vue

#debugging #vue.js #visual-studio-code #google-chrome-devtools #quasar-framework

#отладка #vue.js #visual-studio-code #google-chrome-devtools #quasar-framework

Вопрос:

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

Что я хотел бы иметь возможность сделать, так это установить точку останова на:

 console.log('in returnArray')
  

строка в функции returnArray в Index.vue, нажмите play и остановите VS Code, чтобы я мог использовать возможности отладчика.

Что я смог заставить работать, так это вставить инструкцию ‘debugger’ внутри функции для принудительного прерывания работы отладчика, что все еще лучше, чем отладка console.log (…), но не совсем так, как я хотел бы работать.

 {
    // 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": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true
        }
    ]
}
  

Запускаю .scripts, я вижу что-то странное, что кажется неправильным, но когда я пытаюсь это исправить, инструкция ‘debugger’ не приводит к остановке VS Code в ожидаемом месте.

 › webpack-internal:///./src/pages/Index.vue (/Users/ericgorr/depot_quasar/quasar_debug/src/pages/Index.vue)
    - webpack:///./src/pages/Index.vue?2483 (/Users/ericgorr/depot_quasar/quasar_debug/src/src/pages/Index.vue)
  

Вы можете увидеть двойное упоминание папки src. Это вызвано

 "webRoot": "${workspaceFolder}/src",
  

в файле launch.json, но если я удалю /src, путь в файле .scripts выглядит правильным, но отладчик перестает работать должным образом.

Должен ли я иметь возможность установить точку останова в VS Code и остановить ее на этой строке? Если да, то какие изменения мне нужно внести в проект, чтобы это заработало?

Комментарии:

1. Хорошие вопросы!!!

2. @WhitehorseJJ итак, вы смогли воспроизвести проблему?

Ответ №1:

Щелкните значок отладки на панели действий, чтобы открыть представление отладки, затем щелкните значок шестеренки, чтобы настроить файл launch.json, выбрав Chrome / Firefox: Запуск в качестве среды. Замените содержимое сгенерированного launch.json соответствующей конфигурацией:

введите описание изображения здесь

 {
  "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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}
  

Спасибо.

Комментарии:

1. Не устраняет проблему. Точка останова не достигнута. Хотя это решает проблему пути для Index.vue при использовании .scripts

2. Действительно, наличие той же самой проблемы и точки останова просто игнорируется при загрузке Debug с этой конфигурацией.