可以手动或通过代码刷新chrome dev工具监视表达式吗? [英] possible to refresh chrome dev tools watch expressions manually or by code?

问题描述

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

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

If I don't set any breakpoints, then I have to manually click on the refresh icon in the watch expressions panel. It would be nice if I could put in some debugging code to update the watch expressions without ever having to enter debug mode.

类似这样的东西:

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

推荐答案

更新

查看实时表情.这些类似于监视表达式"，希望它们位于控制台中并且可以实时更新.

update

Check out Live Expressions. These are similar to Watch Expressions, expect they're in the Console and they update in real-time.

wOxxOm用于显示Performance录音的平均FPS的黑客手段给了我启发，让我们了解了如何一起破解解决方案这个问题:

wOxxOm's hack for displaying the average FPS of a Performance recording gave me inspiration on how we could hack together a solution to this problem:

1. 打开DevTools.
2. 点击来源标签以打开来源面板.您可以导航到其他面板，但是在运行下面的代码之前，必须至少打开一次 Sources .我将解释为什么您必须稍后再进行此操作.
3. 取消停放您的DevTools窗口.
4. 关注您的DevTools窗口，然后按 Control + Shift + J (Windows，Linux)或 Command + 选项 + J (苹果机).将打开另一个DevTools窗口.第二个窗口正在检查第一个DevTools窗口.之所以可行，是因为DevTools本身只是一个Web应用.

5. 在第二个DevTools窗口中，在控制台中运行以下代码:

1. Open DevTools.
2. Click the Sources tab to open the Sources panel. You can navigate to other panels, but you have to open Sources at least once before running the code below. I'll explain why you have to do this later.
3. Undock your DevTools window.
4. Focus your DevTools window, then press Control+Shift+J (Windows, Linux) or Command+Option+J (Mac). Another DevTools window opens up. This second window is inspecting your first DevTools window. This works because DevTools itself is just a web app.

5. In the second DevTools window, run this code in the Console:

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

我们基本上只是将计时器设置为每秒单击刷新监视表达式"按钮.

We essentially just set a timer to click the "Refresh Watch Expressions" button every second.

以下是实际的黑客攻击示例: https://youtu.be/w-3rqFhziQ4

Here's an example of the hack in action: https://youtu.be/w-3rqFhziQ4

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

The reason you have to open the Sources panel before running the code is because the UI.panels object only contains panels that you've opened. If you don't open Sources, the reference to UI.panels.sources will be undefined.

这篇关于可以手动或通过代码刷新chrome dev工具监视表达式吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！