🧪 Devtools

阶段： 原型设计

这最终将成为您浏览器的 Devtools，用于更好地调试应用程序。目前，它是一组实用程序，可以帮助您更好地了解应用程序的状态。

qwik/json

Qwik 将应用程序的状态序列化为 <script type="qwik/json"> 标签。这使您可以通过查看 DOM 来检查应用程序的状态。不幸的是，该格式不是非常人性化。以下步骤描述了如何将 JSON 解析为更易读的格式。

1. 打开浏览器的开发者工具。
2. 在 控制台 中运行此 JavaScript

import("https://qwik.node.org.cn/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），我们可以确定特定对象被序列化的原因。同样，我们可以查看是否可以重构代码以防止序列化该对象。