possible to refresh chrome dev tools watch expressions manually or by code?

Question

Taking a look at 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.

Something like this:

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

Answer 1

update

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

original

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. 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.

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

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.