#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
с этой конфигурацией.