Skip to content

Add "Emulate a focused page" feature #2315

@hediet

Description

@hediet

This adds support for Chrome DevTools' "Emulate a focused page" feature to the VS Code JavaScript debugger.

Problem

When debugging web applications, the debugged page may lose focus to VS Code, causing focus-dependent behaviors (:focus styles, document.hasFocus(), focus event handlers) to not work as expected. Chrome DevTools has an "Emulate a focused page" option that solves this.

Solution

  • Add new DAP custom requests canEmulate and setFocusEmulation to control focus emulation via CDP's Emulation domain
  • Create a new "Debug Options" tree view (jsDebugOptions) that appears when debugging browser targets
  • Allow users to toggle focus emulation with a checkbox that persists across debug sessions
  • Only show the option for targets that support emulation (browser pages, not Node.js)

Implementation Details

  • Uses Schema.getDomains to detect if Emulation domain is available
  • Uses Emulation.setFocusEmulationEnabled CDP method
  • Setting is persisted via workspace state

Verification Steps

  • make sure you have js debug nightly installed
  1. Create a simple HTML file with focus-dependent behavior:
    <input id="test" onfocus="console.log('focused')" onblur="console.log('blurred')" />
    <style>input:focus { outline: 3px solid blue; }</style>
    <script>setInterval(() => console.log('hasFocus:', document.hasFocus()), 2000);</script>
  2. Start a browser debug session (e.g., "Debug: Open Link" or a Chrome launch config)
  3. Click on the input field in the debugged page
  4. Switch focus to VS Code — observe that document.hasFocus() returns false and the :focus style disappears
  5. In the "Run and Debug" sidebar, find the new "Debug Options" panel
  6. Check "Emulate a focused page"
  7. Observe that document.hasFocus() now returns true and :focus styles remain even when VS Code has focus
  8. Stop debugging and start again — verify the setting persists
  9. Debug a Node.js app — verify the "Debug Options" panel is not shown (no emulation support)

Image

Metadata

Metadata

Labels

feature-requestRequest for new features or functionalityverification-neededVerification of issue is requestedverifiedVerification succeeded

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions