在 Sources 中观察变量

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

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

调试程序的手表部分

添加变量

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

“添加到监控列表”按钮

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

监控列表中的未定义变量

更新变量

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

“刷新观察变量”按钮

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

已更新正在观察的变量

移除变量

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

要从监控列表中移除的悬停变量