在 Sources 中观察变量

利用 Chrome 开发者工具，您可以轻松地查看整个应用中的多个变量。通过在 Sources 中观察变量，您不必使用控制台，而是可以专注于改进代码。

通过“Sources”面板，您可以观察应用中的变量。它位于调试程序边栏的“watch”部分。使用此功能后，您无需将对象重复记录到控制台。

添加变量

要将变量添加到监控列表，请使用章节标题右侧的添加图标。这将打开一个内嵌输入框，您可以在其中提供要监视的变量名称。填好后，按 Enter 键即可将其添加到列表中。

监视器会在添加变量时向您显示当前值。如果未设置该变量或找不到该变量，其值将显示为 。

更新变量

变量值可能会随着应用的继续运行而发生变化。监控列表不是变量的实时视图，除非您逐步执行。当您使用断点单步执行时，监控的值将自动更新。如需手动重新检查列表中的变量，请按相应部分标题右侧的刷新按钮。

请求刷新时，系统会重新检查当前应用状态。每个观察项都会使用当前值进行更新。

移除变量

为了尽量减少所查看的内容以加快工作速度，您可能需要从观察列表中移除变量。为此，您可以将鼠标悬停在变量上，然后点击右侧的移除图标。