google-chrome-devtools - 可以手动或通过代码刷新 Chrome 开发工具监视表达式吗？

Question

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

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

像这样的东西:

// 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 给了我灵感，让我知道我们如何一起破解这个问题的解决方案:

打开开发者工具。

单击 Sources 选项卡打开 Sources 面板。您可以导航到其他面板，但在运行以下代码之前，您必须至少打开 Sources 一次。我稍后会解释为什么你必须这样做。

Undock your DevTools window 。

聚焦您的 DevTools 窗口，然后按 Control+Shift+J(Windows、Linux)或 Command+Option+J(Mac)。另一个 DevTools 窗口打开。第二个窗口正在检查您的第一个 DevTools 窗口。这是有效的，因为 DevTools 本身只是一个 Web 应用程序。

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

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

我们基本上只是设置一个计时器来每秒单击“刷新监视表达式”按钮。

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

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