Debugging techniques

Отладка компонентов Stencil требует понимания внутренней работы фреймворка, а также особенностей взаимодействия с браузером и инструментами разработчика. Stencil использует виртуальный DOM, компоненты изолированы друг от друга, а жизненный цикл управляется фреймворком, что создаёт специфические сценарии для отладки.

Использование браузерных инструментов разработчика

Консоль и инспектор элементов остаются основными средствами.

  • Компоненты Stencil рендерятся как обычные DOM-элементы, но их Shadow DOM может быть изолирован. Для просмотра внутренних элементов необходимо раскрыть shadow root в панели Elements.
  • Для проверки состояния компонентов стоит выводить значения свойств и состояния через console.log внутри методов жизненного цикла или обработчиков событий.

Breakpoints в DevTools позволяют остановить выполнение кода на конкретной строке. Особенно полезно ставить точки остановки в методах жизненного цикла:

  • componentWillLoad
  • componentDidLoad
  • componentShouldUpdate
  • componentWillUpdate
  • componentDidUpdate

Методы жизненного цикла и их диагностика

Stencil предоставляет ряд хуков, с помощью которых можно отслеживать изменения состояния и пропсов:

  • @Prop() — проверка входных данных. Значения свойств можно логировать при изменении.
  • @State() — позволяет отслеживать внутреннее состояние компонента. Изменения автоматически инициируют повторный рендер, поэтому логирование внутри сеттеров состояния помогает выявлять нежелательные обновления.
  • @Watch() — декоратор, реагирующий на изменения конкретного свойства. В сочетании с консольными выводами он помогает определить, какие изменения триггерят рендер.

Пример диагностики с @Watch():

@Watch('count')
watchCount(newValue: number, oldValue: number) {
  console.log(`count изменился с ${oldValue} на ${newValue}`);
}

Встроенный механизм Dev Server

Stencil Dev Server предоставляет горячую перезагрузку и подробные сообщения об ошибках в консоли браузера.

  • HMR (Hot Module Replacement) позволяет моментально видеть изменения без полной перезагрузки страницы.
  • Ошибки рендера компонента отображаются с указанием строки исходного TypeScript-кода благодаря source maps.

Использование stencil CLI для диагностики

CLI предоставляет команды для выявления проблем:

  • stencil build --dev — компиляция в режиме разработки с максимальными проверками.
  • stencil build --docs-json — генерация JSON с информацией о компонентах, полезно для анализа структуры проекта.
  • stencil test --spec — запуск тестов и выявление проблем при взаимодействии компонентов.

Логирование и временные метки

Для сложных компонентов полезно использовать консольное логирование с временными метками:

console.log(`[${new Date().toISOString()}] Component updated`, this.myState);

Это помогает понять последовательность изменений и выявить неожиданные рендеры.

Работа с Shadow DOM и стилями

Особенность Stencil — использование Shadow DOM по умолчанию:

  • Элементы внутри shadow root могут быть недоступны через обычный CSS селектор.
  • Для временной отладки можно отключить shadow DOM с помощью shadow: false в декораторе компонента.
  • Использование ::part() и ::slotted() упрощает диагностику стилей и слотов.

Интеграция с браузерными профайлерами

Performance tab в DevTools позволяет анализировать время рендера:

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

Memory tab помогает выявить утечки:

  • Проверка удаления компонентов и освобождения памяти.
  • Мониторинг наблюдателей и таймеров, которые могут оставаться активными после удаления компонента.

Тестирование и юнит-тесты

Stencil тесно интегрируется с Jest. Тесты помогают отлавливать ошибки до запуска в браузере:

  • Модульные тесты компонентов проверяют корректность рендера при различных входных данных.
  • Snapshots фиксируют состояние DOM после рендера.
  • Мокирование событий и пропсов позволяет изолировать компонент для диагностики.

Пример базового теста:

import { newSpecPage } from '@stencil/core/testing';
import { MyComponent } from './my-component';

it('рендерит компонент с текстом', async () => {
  const page = await newSpecPage({
    components: [MyComponent],
    html: `<my-component></my-component>`,
  });
  expect(page.root).toEqualHtml(`<my-component>Привет</my-component>`);
});

Советы по структурированию кода для упрощения отладки

  • Разделение логики на функции и отдельные файлы уменьшает сложность отладки.
  • Использование типов TypeScript предотвращает ошибки при присвоении и вызовах свойств.
  • Включение строгого режима компиляции (strict) повышает предсказуемость поведения.

Эти методы позволяют комплексно диагностировать и устранять проблемы в компонентах Stencil, улучшая стабильность и производительность приложений.

Оглавление