Инспектирование в DevTools

Haunted — это легковесная библиотека для создания веб-компонентов с использованием реактивного подхода, основанного на хуках, аналогичных React. Несмотря на простоту использования, отладка и инспектирование компонентов требует понимания внутренней структуры виртуального состояния и связей между хуками. DevTools браузера предоставляет инструменты для анализа DOM, но для Haunted необходимо учитывать особенности реактивного механизма.

Структура компонентов Haunted

Компонент Haunted строится на основе функции с хуками состояния:

import { html, component, useState } from 'haunted';

function Counter() {
  const [count, setCount] = useState(0);

  return html`
    <div>
      <p>Счётчик: ${count}</p>
      <button @click=${() => setCount(count + 1)}>Увеличить</button>
    </div>
  `;
}

customElements.define('my-counter', component(Counter));

Ключевые моменты для инспектирования:

  • DOM-компоненты создаются как стандартные Custom Elements, что позволяет использовать document.querySelector и стандартные панели Elements DevTools.
  • Состояние хуков не отображается напрямую в DevTools. Для его отслеживания необходим доступ к внутренним замыканиям компонентов.

Отладка состояния хуков

В Haunted хуки, такие как useState и useReducer, хранятся внутри закрытых областей видимости функции компонента. Для их инспектирования применяются несколько подходов:

  1. Добавление временных логов
console.log(count);

Вывод текущего состояния в консоль позволяет отслеживать изменения на каждом рендере.

  1. Экспонирование состояния через свойства
const Counter = () => {
  const [count, setCount] = useState(0);
  const self = this;

  self.debugCount = count;

  return html`<p>${count}</p>`;
};

После этого в консоли DevTools можно получить текущее значение через:

document.querySelector('my-counter').debugCount
  1. Использование эффектов useEffect для логирования
useEffect(() => {
  console.log('Count updated:', count);
}, [count]);

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

Инспекция DOM и событий

Haunted рендерит шаблон в Shadow DOM по умолчанию, если компонент создаётся через component. Это влияет на:

  • Elements Panel: необходимо раскрывать Shadow Root для просмотра внутренних узлов.
  • Event Listeners: события, привязанные через @event=${handler}, регистрируются на хост-элементе и делегируются через Shadow DOM. Для инспекции событий используйте вкладку Event Listeners и проверяйте наличие событий на host и shadowRoot.

Использование DevTools для Shadow DOM

  1. Включить отображение Shadow DOM в настройках DevTools.
  2. Развернуть элемент <my-counter> и изучить структуру Shadow Root.
  3. Проверять реальные изменения состояния через обновление DOM:
  • Изменение текста <p> после вызова setCount.
  • Активность кнопки и обработчиков событий.

Отладка сложных компонентов

Для компонентов с несколькими хуками или вложенными Haunted-компонентами рекомендуется:

  • Группировка логов по компонентам с помощью именованных функций и префиксов:
useEffect(() => {
  console.log('[Counter] count:', count);
}, [count]);
  • Использование рефов через useRef для доступа к DOM-узлам:
const divRef = useRef();
useEffect(() => {
  console.log(divRef.current);
}, []);
  • Временное добавление публичных методов для вызова внутренних функций:
this.increment = () => setCount(count + 1);

Советы по производительности при инспекции

  • Избегать частых console.log в больших компонентах — может замедлять рендер.
  • Использовать фильтры в консоли DevTools, чтобы видеть только нужные сообщения.
  • Для динамических компонентов с множественными экземплярами применять уникальные идентификаторы для логирования.

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

Существуют плагины для DevTools, расширяющие возможности инспекции веб-компонентов:

  • Open WC DevTools — позволяет видеть Shadow DOM, слои компонентов и отслеживать события.
  • Web Components DevTools — предоставляет визуализацию дерева компонентов, включая хосты и shadowRoot.

Haunted сочетает реактивность с минималистичной архитектурой, что делает инспекцию одновременно простой и требующей внимательного подхода. Основное внимание при отладке уделяется отслеживанию состояния хуков и Shadow DOM, что позволяет эффективно контролировать поведение компонентов и понимать процесс рендеринга.

Оглавление