🧪 Средства разработчика

Stage: prototyping

В конечном итоге это станет Devtools для вашего браузера, что позволит лучше отлаживать приложение. На данный момент это набор утилит для лучшего понимания состояния вашего приложения.

qwik/json

Qwik сериализует состояние приложения в тег <script type="qwik/json">. Это позволяет контролировать состояние приложения, просматривая DOM. К сожалению, формат не очень удобен для восприятия человеком. Эти шаги описывают, как разобрать JSON в более удобный для чтения формат.

1. Откройте в браузере инструменты разработчика.
2. В консоли браузера выполните следующий JavaScript:

import("https://qwik.builder.io/devtools/json/");

3. Скрипт распарсит qwik/json и вернёт гораздо более удобный для человека формат.

Большинство полученных результатов должно быть само собой разумеющимся. Но мы приводим здесь несколько основных положений, которые помогут вам сориентироваться (это не является полной документацией по полученному выводу).

• objs: Это объекты в системе, которые были сериализованы.
• ctx: Набор объектов QContext.
• refs: Набор объектов QRef.
• sub: Набор объектов QSubscription.
• QContext: Представляет собой состояние, которое Qwik должен был сериализовать для данного компонента. Он включает в себя props для компонента, а также набор объектов Task, которые могут потребоваться компоненту для выполнения.
• QRef: Если элемент имеет слушателя, то QRef собирает слушателей, а также любые объекты, которые слушатель мог захватить.

Идея сериализации Qwik заключается в том, что Qwik хочет сериализовать минимальное количество информации. По этой причине он сериализует только те объекты, которые доступны либо из QContext, либо из QRef. Это означает, что если у вас есть объект, который недоступен ни из одного из этих двух объектов, то он не будет сериализован. Это хорошо, поскольку означает, что Qwik будет сериализовать не всё состояние приложения, а только то состояние, которое доступно из компонента, который рендерится.

Обратной стороной этого является то, что если вы видите, что объект сериализуется, а вам кажется, что этого делать не следует, вы можете проследить его в обратном направлении, чтобы понять, почему он сериализуется. Для этого все объекты включают свойство __backRef, указывающее на объект, который является причиной сохранения любого объекта. Прослеживая ссылки на объекты до их корней (которые должны быть QContext или QRef), мы можем определить, какой именно объект сериализуется. Аналогичным образом мы можем посмотреть, можно ли рефакторизовать наш код, чтобы предотвратить сериализацию указанного объекта.