Отладка в VS Code

Каждое приложение достигает отметки, когда становится необходимо разбираться в ошибках, от больших до малых. В этом рецепте мы исследуем несколько возможностей для пользователей VS Code, кто хочет отлаживать приложения в браузере.

Этот рецепт покажет как отлаживать приложения Vue CLI в паре с VS Code при их запуске в браузере.

Примечание: Этот рецепт охватывает Chrome и Firefox. Если знаете как настроить отладку VS Code с другими браузерами, поделитесь своими знаниями (см. в конце страницы).

Подготовка

Убедитесь что у вас установлен VS Code и выбранный браузер, а также установлена последняя версия соответствующего расширения отладчика:

Установите и создайте проект с помощью vue-cli, следуя инструкциям по установке в руководстве Vue CLI. Перейдите в каталог новосозданного приложения и откройте VS Code.

Отображение исходного кода в браузере

Перед тем, как вы сможете отлаживать ваши компоненты Vue из VS Code, вам необходимо обновить сгенерированную конфигурацию Webpack для генерации sourcemaps. Мы делаем это, чтобы отладчик имел возможность сопоставлять код в сжатых файлов со строками в оригинальных. Это гарантирует, что вы можете отлаживать приложения даже после того, как все ваши ресурсы были оптимизированы с помощью Webpack.

Если вы используете Vue CLI 2, установите или обновите свойство devtool в файле config/index.js:

devtool: 'source-map',

Если вы используете Vue CLI 3, установите или обновите свойство devtool в файле vue.config.js:

module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}

Запуск приложение из VS Code

Нажмите на значок отладки в панели действий (узкая боковая панель слева) чтобы открыть представление “Отладка”, затем нажмите на значок шестерёнки, чтобы настроить файл launch.json, выберите Chrome/Firefox: Launch в качестве окружения. Замените содержимое сгенерированного launch.json указанной ниже конфигурацией:

Добавление конфигурации Chrome

{
"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. Установите точку останова в файле src/components/HelloWorld.vue на строке 90 где функция data возвращает строку.

    Breakpoint Renderer

  2. Откройте свою любимую консоль в корневом каталоге приложения и запустите его с помощью Vue CLI:

    npm start
  3. Перейдите в режим отладки, выберите конфигурацию ‘vuejs: chrome/firefox’, затем нажмите F5 или зелёную кнопку для старта.

  4. Ваша точка останова должна быть достигнута, когда новый экземпляр браузера откроет http://localhost:8080.

    Breakpoint Hit

Альтернативные варианты

Vue Devtools

Существуют и другие методы отладки, различающиеся по сложности. Самый популярный и простой из них — использовать Vue.js devtools для Chrome и для Firefox. Главное из преимуществ работы с инструментами разработки (devtools) состоит в том, что они позволяют вам в реальном времени менять свойства данных и сразу видеть изменения на странице. Другим важным преимуществом является возможность отладки во времени (time travel debugging) для Vuex.

Devtools Timetravel Debugger

Обратите внимание, если на странице используется production/минифицированная сборка Vue.js (как например, стандартная ссылка на CDN), то проверка инструментов разработки по умолчанию отключена и поэтому панель Vue не будет отображаться в инструментах разработчика. Если вы переключитесь на неминифицированную версию, вам может потребоваться обновить страницу, чтобы увидеть изменения.

Vuetron

Vuetron — действительно хороший проект, который расширяет часть идей vue-devtools. В дополнение к обычным принципам работы с инструментами разработки вы сможете:

Vuetron Hierarchy

Использование выражения Debugger

Примеры выше предоставляют отличные рабочие варианты для отладки. Однако, есть и альтернативный вариант, когда вы просто можете использовать нативное выражение debugger прямо в вашем коде. Если вы выберите этот путь, важно не забыть удалить эти выражения после окончания отладки.

<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
const hello = 'Hello World!'
debugger
this.message = hello
}
};
</script>

Благодарности

Этот рецепт был основан на примере Kenneth Auchenberg, который доступен здесь.