vue2_rus

Отладка в VS Code

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

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

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

Подготовка

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

• Debugger для Chrome
• Debugger для Firefox

Установите и создайте проект с помощью 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

Мы предполагаем, что приложение работает на порту 8080. Если это не так (например, если порт 8080 был уже занят и поэтому Vue CLI автоматически выбирает другой порт), не забудьте изменить соответствующим образом конфигурацию.

Нажмите на значок отладки в панели действий (узкая боковая панель слева) чтобы открыть представление «Отладка», затем нажмите на значок шестерёнки, чтобы настроить файл launch.json, выберите Chrome/Firefox: Launch в качестве окружения. Замените содержимое сгенерированного 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. Установите точку останова в файле src/components/HelloWorld.vue на строке 90 где функция data возвращает строку.

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

  npm run serve

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

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

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

Vue devtools

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

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

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

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

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

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

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