-
Notifications
You must be signed in to change notification settings - Fork 345
Closed
Labels
feature-requestRequest for new features or functionalityRequest for new features or functionalityverification-neededVerification of issue is requestedVerification of issue is requestedverifiedVerification succeededVerification succeeded
Milestone
Description
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
canEmulateandsetFocusEmulationto 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.getDomainsto detect if Emulation domain is available - Uses
Emulation.setFocusEmulationEnabledCDP method - Setting is persisted via workspace state
Verification Steps
- make sure you have js debug nightly installed
- 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>
- Start a browser debug session (e.g., "Debug: Open Link" or a Chrome launch config)
- Click on the input field in the debugged page
- Switch focus to VS Code — observe that
document.hasFocus()returnsfalseand the:focusstyle disappears - In the "Run and Debug" sidebar, find the new "Debug Options" panel
- Check "Emulate a focused page"
- Observe that
document.hasFocus()now returnstrueand:focusstyles remain even when VS Code has focus - Stop debugging and start again — verify the setting persists
- Debug a Node.js app — verify the "Debug Options" panel is not shown (no emulation support)
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
feature-requestRequest for new features or functionalityRequest for new features or functionalityverification-neededVerification of issue is requestedVerification of issue is requestedverifiedVerification succeededVerification succeeded
