Инструменты разработчика

Chrome DevTools и аналогичные инструменты в других браузерах позволяют в реальном времени исследовать поведение timeago.js: состояние таймеров, обновления DOM, потребление памяти.

Chrome DevTools: вкладка Elements

Когда timeago.js управляет DOM-элементом, изменения textContent видны в реальном времени:

  1. Открыть Elements.
  2. Найти <time datetime="...">.
  3. Правый клик → Break on → Subtree modifications.
  4. При следующем обновлении timeago DevTools остановит выполнение на строке кода, изменившей DOM.

Chrome DevTools: вкладка Sources

Установить breakpoint внутри timeago.js для понимания внутреннего потока:

  1. Sources → нажать Ctrl+P → ввести timeago.
  2. Найти функцию format или обработчик таймера.
  3. Поставить breakpoint → перезагрузить страницу.

Увидеть стек вызовов: какой компонент вызывает format и с какими аргументами.

Chrome DevTools: Performance

Запись активности таймеров:

  1. Performance → Record.
  2. Подождать 30-60 секунд.
  3. Stop.
  4. Найти в треке Main → Timer Fired — это таймеры timeago.js.
  5. Кликнуть на событие → в Bottom-up посмотреть время выполнения.

Нормальная картина: Timer Fired появляется каждые 10-60 секунд, занимает < 1 мс.

Тревожная картина: Timer Fired каждые 100 мс, или Forced Reflow после каждого обновления.

Chrome DevTools: Memory

Проверка на утечки:

  1. Memory → Heap snapshot → Take snapshot (назовём Snapshot 1).
  2. Смонтировать и размонтировать компонент с timeago 10 раз.
  3. Take snapshot (Snapshot 2).
  4. Переключить на режим Comparison → Snapshot 2 vs Snapshot 1.
  5. Отфильтровать HTMLTimeElement в строке поиска.

Если # New > 0 — элементы не удаляются, cancel не вызывается.

Chrome DevTools: Console — диагностика в реальном времени

// Выполнить в консоли
(function() {
  let count = 0;
  const elements = document.querySelectorAll('[datetime]');

  elements.forEach(el => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(m => {
        if (m.type === 'characterData') {
          console.log(`Update #${++count}: "${m.oldValue}" → "${m.target.textContent}"`);
        }
      });
    });
    observer.observe(el, { characterData: true, subtree: true });
  });

  console.log(`Watching ${elements.length} time elements`);
})();

React DevTools

  1. Установить React DevTools расширение.
  2. Открыть DevTools → вкладка Components.
  3. Выбрать компонент TimeAgo.
  4. В Hooks видны текущие значения useState (если используются).
  5. Profiler → Record — зафиксировать ре-рендеры компонента.

Что искать: частота ре-рендеров, причина рендера (props change, hook change).

Vue Devtools

  1. Установить Vue Devtools расширение.
  2. Открыть DevTools → Vue.
  3. Найти компонент TimeAgo.
  4. Наблюдать за реактивными данными в реальном времени.
  5. Timeline → Component Events — видеть жизненный цикл.

Lighthouse

npx lighthouse http://localhost:3000 --view --preset=desktop

Что проверять:

  • Total Blocking Time (TBT) — таймеры timeago не должны блокировать основной поток.
  • Cumulative Layout Shift (CLS) — обновления textContent не должны сдвигать макет.
  • Time to Interactive (TTI) — инициализация render не должна задерживать интерактивность.

Performance Observer в коде

// Добавить в приложение для постоянного мониторинга
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'measure' && entry.name.startsWith('timeago')) {
      console.log(`${entry.name}: ${entry.duration.toFixed(2)}ms`);
    }
  }
});

observer.observe({ entryTypes: ['measure'] });

// В обёртке format:
performance.mark('timeago-format-start');
const result = format(date, locale);
performance.mark('timeago-format-end');
performance.measure('timeago-format', 'timeago-format-start', 'timeago-format-end');

Node.js отладка (для SSR)

node --inspect app.js

Открыть chrome://inspect в Chrome → RemoteTarget → app.js → Inspect.

В SSR-контексте убедиться, что render не вызывается на сервере. В Node.js нет document — вызов бросит ReferenceError.

Custom DevTools Extension

Для больших проектов можно создать хелпер, который выводит статистику в консоль:

window.__timeagoDebug = {
  elements: () => document.querySelectorAll('[datetime]').length,
  values:   () => Array.from(document.querySelectorAll('[datetime]'))
                    .map(el => ({ datetime: el.getAttribute('datetime'), text: el.textContent })),
  check:    () => {
    const els = document.querySelectorAll('[datetime]');
    const invalid = Array.from(els).filter(el => !el.textContent?.trim());
    if (invalid.length) {
      console.warn(`${invalid.length} time elements without text`);
    } else {
      console.log(`All ${els.length} time elements have text`);
    }
  },
};

// Использование в консоли браузера
__timeagoDebug.check();
__timeagoDebug.values();
Оглавление