Отладка в DevTools

Работа с IndexedDB в браузере часто сопровождается сложностью наблюдения за состоянием данных и транзакциями. Dexie.js упрощает API, но не убирает необходимость глубокой диагностики. Основной инструмент анализа — встроенные DevTools браузеров Chromium и Firefox, в которых IndexedDB представлена как отдельное хранилище с ограниченной, но полезной визуализацией.

Структура хранилища в панели Application

В Chrome DevTools данные Dexie.js отображаются в разделе:

  • Application → Storage → IndexedDB

Каждая база Dexie соответствует отдельной IndexedDB-базе. Внутри отображаются:

  • object stores (таблицы Dexie)
  • индексы (indexes)
  • записи (records)

Особенности отображения:

  • ключи primary key видны явно
  • вложенные объекты раскрываются частично
  • бинарные данные отображаются как ArrayBuffer или Blob
  • индексы не всегда визуально объясняют реальное поведение запросов Dexie

При этом DevTools не отображает уровень абстракции Dexie — только чистый IndexedDB слой.

Отладочный режим Dexie.js

Dexie предоставляет встроенный механизм расширенного логирования:

Dexie.debug = true;

При включении режима:

  • логируются все операции над базой
  • отображаются транзакции
  • фиксируются запросы к индексам
  • выводятся предупреждения о медленных операциях

В более новых версиях используется расширенный механизм наблюдения:

import Dexie fr om "dexie";

Dexie.debug = "dexie";

Режим позволяет различать:

  • создание транзакций
  • выполнение запросов (where, toArray, get)
  • ошибки транзакций
  • откаты (abort)

Отслеживание транзакций

Dexie строит все операции поверх транзакций IndexedDB. В DevTools напрямую транзакции не видны, поэтому используется логирование:

db.transaction("rw", db.users, async () => {
  await db.users.add({ id: 1, name: "Alex" });
});

Для диагностики важно учитывать:

  • транзакция живёт только пока выполняется async-контекст
  • любая задержка Promise может привести к автоматическому закрытию транзакции
  • ошибки внутри транзакции приводят к автоматическому rollback

Dexie позволяет отслеживать это через глобальные хуки:

db.on("error", (error) => {
  console.error("Dexie error:", error);
});

Инспекция запросов и индексов

DevTools не показывает SQL-подобный план выполнения, но Dexie позволяет косвенно анализировать запросы через логирование.

Пример типичного запроса:

db.users
  .wh ere("age")
  .between(18, 30)
  .toArray();

В режиме Dexie.debug видно:

  • использование индекса age
  • тип range-запроса (lowerBound, upperBound)
  • количество извлечённых записей

Если индекс не используется, Dexie выполняет full scan, что также фиксируется в логах.

Панель Performance и IndexedDB

При анализе производительности важно учитывать взаимодействие Dexie с движком хранения:

  • IndexedDB операции асинхронны, но не потоковые
  • длительные транзакции блокируют внутренние очереди
  • массовые bulkPut или bulkAdd создают нагрузку на storage engine

В DevTools Performance можно наблюдать:

  • Task → IndexedDB Transaction
  • Scripting overhead Dexie callbacks
  • GC-паузы при работе с большими объектами

Особенно заметны:

  • сериализация объектов перед записью
  • десериализация при чтении
  • копирование больших Blob/ArrayBuffer

Типичные ошибки и их диагностика

VersionError

Возникает при несовпадении версии схемы базы:

  • изменение stores без корректного version()
  • попытка открыть старую базу новой схемой

DevTools помогает увидеть:

  • факт обновления базы
  • пересоздание object stores

Dexie логирует это автоматически:

db.version(2).stores({
  users: "id, name"
});

ConstraintError

Возникает при нарушении уникальности ключей:

  • повторный primary key
  • нарушение unique index

В DevTools видно только факт записи, но не причина — диагностика происходит через Dexie:

try {
  await db.users.add({ id: 1 });
} catch (e) {
  console.log(e.name); // ConstraintError
}

QuotaExceededError

Появляется при превышении лимита хранилища браузера.

В DevTools:

  • увеличивается usage storage
  • запись перестаёт фиксироваться

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

db.users.count();

AbortError

Связан с прерыванием транзакции:

  • закрытие вкладки
  • слишком долгая операция
  • конфликт параллельных транзакций

DevTools фиксирует остановку IndexedDB transaction, но причина чаще определяется через лог Dexie.

LiveQuery и отладка реактивных обновлений

При использовании реактивного слоя Dexie:

import { liveQuery } fr om "dexie";

const observable = liveQuery(() => db.users.toArray());

DevTools показывает:

  • повторные обращения к IndexedDB
  • частые перезапросы при изменении данных

Типичная проблема:

  • лишние перерендеры
  • неконтролируемые подписки

Отладка выполняется через анализ частоты запросов в Console и Performance.

Логирование операций Dexie

Для глубокого анализа используется расширенное логирование:

db.on("changes", (changes) => {
  console.log(changes);
});

Позволяет фиксировать:

  • вставки (add)
  • обновления (put)
  • удаления (delete)

Это особенно полезно при:

  • синхронизации состояния приложения
  • отладке кеширования
  • проверке конкурентных изменений

Анализ больших данных

При работе с большими коллекциями DevTools становится ограниченным инструментом. Основные проблемы:

  • обрезка отображаемых записей
  • невозможность сортировки больших store
  • задержка UI при открытии таблиц

Dexie компенсирует это программными инструментами:

  • toArray() с фильтрацией
  • offset/lim it пагинация
  • orderBy с индексами

Поведение промисов в DevTools

Dexie полностью построен на Promise-архитектуре. В DevTools важно учитывать:

  • асинхронные цепочки могут скрывать ошибки
  • неотловленные исключения появляются в Console
  • стек вызовов может быть разорван async-границами

Для диагностики используется:

window.addEventListener("unhandledrejection", (event) => {
  console.error(event.reason);
});

Оптимизация отладки через DevTools

Эффективная диагностика Dexie-запросов обычно опирается на:

  • вкладку Application для структуры данных
  • вкладку Console для Dexie.debug логов
  • вкладку Performance для транзакций
  • вкладку Memory для анализа утечек

Дополнительно важно отслеживать:

  • частоту запросов к IndexedDB
  • размер сериализуемых объектов
  • количество активных транзакций
  • индексную эффективность (через косвенные логи Dexie)

Наблюдение за изменениями схемы базы

Dexie поддерживает версионирование схемы, которое напрямую влияет на состояние IndexedDB:

db.version(3).stores({
  users: "id, email, age"
});

При обновлении:

  • создаётся новая версия базы
  • запускаются миграции
  • старые object stores удаляются или модифицируются

DevTools фиксирует это как пересоздание структуры IndexedDB, что может приводить к временной потере данных при неправильной миграции.

Инструменты косвенной диагностики

Dexie не предоставляет полноценного визуального debugger-а, поэтому используется комбинация методов:

  • логирование через Dexie.debug
  • подписки на db.on("error")
  • анализ IndexedDB в Application tab
  • профилирование транзакций через Performance
  • контроль реактивных потоков через liveQuery

Эта комбинация заменяет отсутствующий встроенный GUI-отладчик и позволяет анализировать поведение базы на уровне браузера и ORM-слоя одновременно.

Оглавление