Vue JavaScript Debug в Intellij IDEA, PHPStorm или WebStorm

В одной из предыдущий статей была описана настройка отладки xDebug в IDEA (PHPStorm). Но какое же современное web приложение без JavaScript? Поэтому полезно будет описать и настройку отладки frontend части.

Создание проекта

Начнем с простого. Просту создадим новое приложение через create-vue.

~ % cd ~/projects                                     
~/projects % npm init vue@3

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-dbg-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /home/igor/projects/vue-dbg-project...

Done. Now run:

  cd vue-dbg-project
  npm install
  npm run lint
  npm run dev

Затем перейдем в папку vue-dbg-project и выполним npm install для установки пакетов и npm run dev для запуска сервера в dev режиме:

~/projects % cd vue-dbg-project 
~/projects/vue-dbg-project
 % npm install

added 165 packages, and audited 166 packages in 13s

34 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
~/projects/vue-dbg-project
 % npm run dev

> vue-dbg-project@0.0.0 dev
> vite


  VITE v3.1.3  ready in 239 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Как мы видим приложение доступно по адресу http://localhost:5173 . Но после проверки этот сервер необходимо отключить, так как мы будем запускать его в IDEA.

Откроем папку vue-dbg-project в IDEA (PHPStorm, WebStorm). Нам понадобится настроить 2 вещи:

  • Конфигурацию запуска npm сервера
  • Конфигурацию запуска отладки Javascript Debug

Конфигурация запуска npm сервера в IDEA (PhpStorm)

Откроем в главном меню Run -> Edit Configurations. В появившемся окне через кнопку с плюсом добавим новую конфигурацию с типом npm:

Настройка npm dev сервера

Здесь нужно обязательно выбрать пути к node интерпретатору и npm, если они не определились (у вас будут, конечно, отличаться), а также выбрать значения в выпадающих списках Command и Scripts. Для проекта, который создавался через create-vue, здесь будут значения run и dev, что сооветствует команде npm run dev (которую мы запускали ранее).

После сохранения в панели инструментов появится название, которое вы задали при настройке и рядом зеленая кнопка пуска.

Панель инструментов перед запуском npm run dev

После нажатия в специальной секции внизу отобразится результат с URL, по которому доступно приложение.

Результат запуска npm run dev

Конфигурация запуска отладки Javascript Debug в IDEA (PHPStorm)

Снова откроем в главном меню Run -> Edit Configurations. В появившемся окне через кнопку с плюсом добавим новую конфигурацию с типом JavaScript Debug:

Конфигурация для запуска отладки JavaScript

Здесь важно, чтобы URL совпадал с тем, что был выдан на предыдущем шаге. Браузер должен быть Chrome или на его основе. И теперь после сохранения в панели инстументов появится выбор нового пункта.

Панель инструментов перед запуском отладки JavaScript

После нажатия на кнопку с зеленым жуком откроется браузер. Но чтобы увидеть, что отладка запустилась необходимо добавить точку останова.

Добавление точки останова

Внесем небольшие изменения в код src/views/AboutView.vue:

<template>
  <div class="about">
    <div>
      <h1>This is an about page</h1>
      <div>
        A: {{a}}
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

const a = ref(0)

onMounted(()=> {
  setInterval(() => {
    console.log(a.value)
    a.value++
  }, 5000)
})

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

Так у нас будет переменная-счетчик, которая увеличивает свое значение каждые 5 секунд и отображается на странице About. Установите точку останова на строку console.log(a.value) кликнув по полю слева от строки. И после того, как там появится красная точка нажмите на кнопку с зеленым жуком (если не сделали этого ранее). Затем перейдите по ссылке about на странице и через несколько секунд в нижней части среды разработки появится отладочная информация и кнопки для пошаговой отладки.

Результат запуска отладки JavaScript с точкой останова

По окончании отладки с помощью кнопки с красным квадратом можно выключить либо запуск отладчика либо dev сервер вместе с ним.

Настройка для проекта в Docker

Тут возникает 2 вопроса. Первый — как бы избежать запуска двух скриптов (нажатия двух кнопок) при отладке? Второй — а как быть, если проект в docker? Как говорится, 7 бед — один ответ. Если у нас проект в докере, то первый скрипт у нас уже запущен там и выполняется пока контейнеры запущены. Тоесть с докером все даже упрощается. Отличие лишь в том, что при настройке Javascript Debug в поле URL необходимо ввести не localhost, а именно тот URL (и порт, если он не стандартный), под которым доступен проект для вас локально.

Отладка без среды разработки

Иногда может понадобится отладка JavaScript Vue приложения, когда под рукой нет среды разработки. Есть только браузер. На сегодняшний день браузеры умеют очень широкий инструментарий для отладки frontend. И пошаговая отладка JavaScript здесь не исключение. Рассмотрим как ее запустить на примере Chrome.

  • Запустите dev сервер нашего тестового приложения (см. выше) через npm run dev
  • Откройте в браузере полученный URL и перейдите по ссылке About
  • Откройте панель разработчика и перейдите там на вкладку Sources
  • В дереве исходного кода найдите файл src/views/AboutView.vue и поставьте в нем точку останова на строке console.log(a.value)
  • Через несколько секунд выполнение программы подойдет к выделенной строке и вы увидите картину похожую на ту, что мы имели в IDEA
Отладка JavaScript в браузере

Кроме этого напомню про вкладку Vue, которая также имеет много полезных инструметов для отладки.

Вкладка Vue

Полезные ссылки

Leave a Reply

Ваш адрес email не будет опубликован.