• Tags , ,         
  • 2018-03-13  11:29:19        
  • 117 °C    

    Chrome DevTools允许您在整个应用程序中轻松查看多个变量。观察源代码中的变量可以让您离开控制台,并专注于改进代码。

    Sources(源文件)面板提供了在应用程序中跟踪监视变量的功能。它位于调试器侧边栏的Watch窗格。通过利用此功能,您不需要重复地将对象日志输出到控制台中。

    添加变量

    要将变量添加到监视列表中,请使用点击Watch(监视)窗格标题栏上右侧的Add expression(添加表达式)图标(愚人码头注:展开Watch(监视)窗格才会出现该按钮)。这将打开一个内联输入框,您可以在输入框中输入要监视的变量名称。输入完毕,按Enter键,即可将其添加到列表中。

    监视器将显示添加时变量的当前值。如果变量未设置或找不到,值将显示为<Not Available>

    更新变量

    变量值会随着应用程序的运行而改变。监视列表不是变量的实时视图,除非您逐步执行。当您使用断点逐步执行时,监视列表中的值将自动更新。要手动重新检查列表中的变量,请点击Watch(监视)窗格标题栏上右侧的Refresh(刷新)按钮(愚人码头注:展开Watch(监视)窗格才会出现该按钮)。

    当请求刷新时,重新检查当前应用程序状态。每个跟踪监视项将使用当前值进行更新。

    删除变量

    保持你正在跟踪监视的变量最少,这样可以更快的执行,您可能需要从跟踪监视的列表中删除变量。可以把将鼠标移到在变量上,然后单击右侧显示的Delete watch expression删除图标。

    说明

    翻译自:https://developers.google.com/web/tools/chrome-devtools/javascript/watch-variables

     

    本文内容来自:Chrome DevTools在Sources(源文件)面板中跟踪监视变量– Break易站


    —Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)

     
    转载请保留页面地址:https://www.breakyizhan.com/chromeconsole/2125.html