---
title: "\U0001F9EA Devtools"
contributors:
  - mhevery
updated_at: '2023-10-04T22:54:35Z'
created_at: '2023-10-02T23:27:01Z'
---

# 🧪 Devtools

**Stage:** `prototyping`

This will eventually become Devtools for your browser to better debug application. For now it is a collection of utilities to better understand the state of your application.

## `qwik/json`

Qwik serializes the state of the application into `<script type="qwik/json">` tag. This allows you to inspect the state of the application by looking at the DOM. Unfortunately the format is not very human readable. These steps describe how to parse the JSON into a more readable format.

1. Open the browser's developer tools.
2. In the `Console` run this JavaScript

```javascript
import("https://qwik.dev/devtools/json/");
```

3. The script will parse the `qwik/json` and will return a much more human readable format.

Most of the resulting output should be self explanatory. But we provide few high level points here to get you oriented. (This is not meant to be a complete documentation of the output.)

- `objs`: These are the objects in the system which have been serialized.
- `ctx`: A set of `QContext` objects.
- `refs`: A set of `QRef` objects.
- `sub`: A set of `QSubscription` objects.
- `QContext`: Represents a state which Qwik had to serialize for a given component. This includes `props` for the component as well as a set of `Task` objects which the component may need to execute.
- `QRef`: If an element has a listener, than a `QRef` collects the listeners as well as any objects which the listener may have captured.

The way to think about Qwik serialization is that Qwik wants to serialize minimal amount of information. For this reason it only serializes objects which are reachable from either `QContext` or from `QRef`. This means that if you have an object which is not reachable from either of these two, then it will not be serialized. This is a good thing, because it means that Qwik will not serialize the entire application state, but only the state which is reachable from the component which is being rendered.

The flip side is that if you see an object being serialized and you think it should not be you can trace it backwards to see why it is being serialized. For this purpose all objects include a `__backRef` property which points to the object which is causing any object to be retained. By tracing the objects references back to their roots (which should be `QContext` or `QRef`) we can determine which a particular object is being serialized. Similarly we can see if we can refactor our code to prevent serialization of said object.
