Bug 255342

Summary:

Add live expressions to console

Product:

WebKit

Reporter:

Nathan Knowler <nathan>

Component:

Web Inspector

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Enhancement

CC:

inspector-bugzilla-changes, karlcow, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

All

OS:

All

Attachments:

Description	Flags
example of watch expressions in devtools	none

Nathan Knowler

Reported 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/

Attachments
example of watch expressions in devtools (364.75 KB, image/png) 2024-06-09 17:52 PDT, Karl Dubost	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2023-04-19 08:44:20 PDT

<rdar://problem/108262738>

Karl Dubost

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

Note You need to log in before you can comment on or make changes to this bug.