Bug 255342 - Add live expressions to console
Summary: Add live expressions to console
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: Safari 16
Hardware: All All
: P2 Enhancement
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-04-12 08:43 PDT by Nathan Knowler
Modified: 2024-06-09 17:52 PDT (History)
3 users (show)

See Also:


Attachments
example of watch expressions in devtools (364.75 KB, image/png)
2024-06-09 17:52 PDT, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nathan Knowler 2023-04-12 08:43:39 PDT
The Chromium DevTools console has a feature called “live expressions” which allows developers to set expressions whose value will update real-time. This is very useful for debugging. In Chromium, the expressions are pinned at the top of the console, can be modified, and persist between sessions. For example, a developer can watch `document.activeElement` to see the focused element update real-time. I’ve personally used it while implementing different accessible components to ensure the various attributes and focus was being set on the different elements. I would love to have this feature in the Safari Web Inspector console.

Here is the Chromium DevTools doc for the feature: https://developer.chrome.com/docs/devtools/console/live-expressions/
Comment 1 Radar WebKit Bug Importer 2023-04-19 08:44:20 PDT
<rdar://problem/108262738>
Comment 2 Karl Dubost 2024-06-09 17:52:48 PDT
Created attachment 471633 [details]
example of watch expressions in devtools

Just thinking out lougd.
I wonder if keeping a watch expressions updated would be a goal toward this. 

For example, if I add as a Watch expresssion: 
document.body.getBoundingClientRect().width

It displays as a result the width at the moment I added it, but it doesn't update it if I resize the window.