可能刷新chrome开发工具观察表达式手动或代码

Question

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

如果我没有设置任何断点，那么我必须手动单击watch expressions面板中的刷新图标。如果我可以放入一些调试代码来更新watch表达式，而不必进入调试模式，那就太好了。

像这样:

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

Answer 1

update

查看Live Expressions。这些类似于观察表达式，除了它们在控制台中并且它们实时更新。

原来

wOxxOm为显示性能记录的平均FPS的hack给了我灵感，我们如何一起破解这个问题的解决方案:

开放DevTools
1. 。
2. 单击Sources选项卡打开Sources面板。您可以导航到其他面板，但是必须在运行下面的代码之前至少打开一次Sources。稍后我会解释为什么要这样做。
卸载你的DevTools窗口
3. 聚焦你的DevTools窗口，然后按Control+Shift+J (Windows, Linux)或Command+Option+J (Mac)。打开另一个DevTools窗口。第二个窗口正在检查您的第一个DevTools窗口。这是因为DevTools本身只是一个web应用。

4. 在第二个DevTools窗口中，在控制台:

   中运行以下代码

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

我们实际上只是设置了一个计时器，每秒点击"Refresh Watch Expressions"按钮。

下面是一个实际的hack示例:https://youtu.be/w-3rqFhziQ4

在运行代码之前，您必须打开Sources面板的原因是因为UI.panels对象只包含您已经打开的面板。如果不打开Sources，对UI.panels.sources的引用将是未定义的。