可以手动或通过代码刷新chrome dev工具监视表达式吗？

Question

看看https://developer.chrome.com/devtools/docs/tips-and-tricks#favorite-expression

如果我没有设置任何断点，那么我必须手动点击监视表达式面板中的刷新图标。如果我可以输入一些调试代码来更新监视表达式而不必进入调试模式，那将是很好的。

这样的事情：

// some update function
setInterval(function() {
    console.refresh();
}, 1000);

Answer 1

更新

结帐Live Expressions。这些与Watch Expressions类似，期望它们在控制台中并且实时更新。

原始

wOxxOm's hack for displaying the average FPS of a Performance recording给了我灵感，说明我们如何能够解决这个问题的解决方案：

1. 打开DevTools。
2. 点击来源标签打开来源面板。您可以导航到其他面板，但在运行下面的代码之前，您必须至少打开一次来源。我将解释为什么你 以后会这样做。
3. Undock your DevTools window。
4. 关注DevTools窗口，然后按 Control + Shift + J （Windows，Linux）或 Command + 选项 + J （Mac）。另一个DevTools窗口打开了。第二个窗口正在检查您的第一个DevTools窗口。这是有效的，因为DevTools本身只是一个Web应用程序。

5. 在第二个DevTools窗口中，在控制台中运行此代码：

   let id;
   UI.panels.sources._watchSidebarPane.widget().then(ui => {
       id = setInterval(() => {
           ui._refreshButton.element.click();
       }, 1000);
   });
   

我们基本上只是设置一个计时器来点击＆＃34;刷新观看表达式＆＃34;按钮每秒。

以下是黑客行动的一个例子：https://youtu.be/w-3rqFhziQ4

您在运行代码之前 打开来源面板的原因是因为UI.panels对象仅包含您已打开的面板。如果您未打开来源，则UI.panels.sources的引用将不确定。