🧪 开发工具

阶段: 原型

这将最终成为浏览器中用于更好地调试应用程序的开发工具。目前它是一组工具，用于更好地了解应用程序的状态。

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），我们可以确定为什么会序列化特定的对象。同样，我们可以看看是否可以重构我们的代码以防止序列化该对象。