🧪 開發工具

階段： 原型設計

這最終將成為瀏覽器的開發工具，以便更好地除錯應用程式。目前，它是一組工具，可以更好地瞭解應用程式的狀態。

qwik/json

Qwik 會將應用程式的狀態序列化至 <script type="qwik/json"> 標籤中。這讓您能夠透過查看 DOM 來檢查應用程式的狀態。但遺憾的是，該格式不太易於閱讀。以下步驟描述如何將 JSON 解析為更易讀的格式。

1. 開啟瀏覽器的開發者工具。
2. 在 主控台 中執行以下 JavaScript 程式碼

import("https://qwik.dev.org.tw/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），我們可以確定特定物件被序列化的原因。同樣，我們也可以看到是否可以重構程式碼以防止序列化該物件。