可以手动或通过代码刷新 chrome 开发工具手表表达式吗？

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. 打开开发者工具。
2. 点击来源标签打开来源面板。您可以导航到其他面板，但在运行以下代码之前，您必须至少打开一次Sources。稍后我会解释为什么你必须这样做。
3. Undock your DevTools window。
4. 聚焦您的 DevTools 窗口，然后按 Control+Shift+J（Windows、Linux）或 Command +选项+J (Mac)。另一个 DevTools 窗口打开。第二个窗口正在检查您的第一个 DevTools 窗口。之所以可行，是因为 DevTools 本身只是一个网络应用。

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

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

我们基本上只是设置了一个计时器，每秒点击一次“刷新观察表达式”按钮。

以下是实际中的 hack 示例：https://youtu.be/w-3rqFhziQ4

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