inspect() with {focus: false} -- omitFocus hint

#433676513 Filed 2025-07-23 Accepted

Summary

Feature Request

Allow inspect(element, {focus: false}) in the Console Utilities API to select a DOM node in the Elements panel without switching focus to the Elements panel. The node is selected for the next time the panel is opened.

Motivated by React DevTools wanting to update the Elements panel selection without activating a new tab.

Interactive Test

Open DevTools Console and run the commands below, or use the buttons.

★ Target Element ★

Console Commands to Copy-Paste

1. Default inspect -- focuses Elements panel

This should switch you to the Elements panel and select the node.

inspect(document.querySelector('#sample-target'))

2. inspect with {focus: false} -- no panel switch

This should select the node in Elements but NOT switch panels. Open Elements panel manually afterwards to verify the node is selected.

inspect(document.querySelector('#sample-target'), {focus: false})

3. Verify with inner node

Same test with a different element to confirm selection updates.

// First: select outer target without focus
inspect(document.querySelector('#sample-target'), {focus: false})

// Then: select inner span without focus
inspect(document.querySelector('#inner-node'), {focus: false})

// Now open Elements panel -- #inner-node should be selected

Expected Behavior

`inspect(el)` -- default

Elements panel opens and the node is focused/selected. This is the existing behavior.

`inspect(el, {focus: false})` -- new

The node is selected in the Elements panel tree, but DevTools does NOT switch to the Elements tab. The Console (or whichever panel is active) stays in focus. When you manually switch to Elements, the node is already selected.

Implementation

V8 (v8-console.cc)

Parses the second argument as an options object, extracts focus, and sends omitFocus hint via Runtime.inspectRequested CDP event.

CL: 7575861

DevTools Frontend (RuntimeModel.ts)

Extracts omitFocus from hints and passes it to Common.Revealer.reveal(object, omitFocus).

The DOMNodeRevealer then calls revealAndSelectNode with {showPanel: true, focusNode: !omitFocus}.

CL: 7575526