Skip to content

Add Property Button to Inspect Sources#528

Open
WizardCM wants to merge 1 commit into
obsproject:masterfrom
WizardCM:inspect-browser-source
Open

Add Property Button to Inspect Sources#528
WizardCM wants to merge 1 commit into
obsproject:masterfrom
WizardCM:inspect-browser-source

Conversation

@WizardCM

@WizardCM WizardCM commented Jun 4, 2026

Copy link
Copy Markdown
Member

Description

Add an "Inspect" button to the Browser Source's Properties window to open Chrome Dev Tools.

image

This ensures feature parity between Browser Sources and Browser Docks (they have the same accessible via the context menu).

Motivation and Context

Extensive research, testing, and rebuilding for #523 by pkv, Lina and myself has determined that Chromium have deprecated the old list page accessible from the Remote Debugging address, and restoring the functionality in any way will be a major maintenance burden going forward. This is due to the HTML file they ship containing a favicon that spans the entire link, assuming the file is shipped at all - CEF purposefully doesn't as part of Chrome Runtime.

Additionally, testing by myself and Warchamp confirms unreliable loading of chrome://inspect - on my machines it can take as long as 3 minutes to be able to even list pages, which is unacceptable.

Therefore, after thinking about how best to serve overlay developers in a meaningful way, rather than some kind of janky workaround using the Remote Debugging /json/list endpoint, ultimately I decided the best solution is the simplest one.

This also means users no longer have to launch OBS with --remote-debugging-port=1234 --remote-allow-origins=http://localhost:1234 to be able to access Dev Tools, improving both security and usability.

How Has This Been Tested?

On Windows 10, open the Properties window for a Browser Source, scroll down, and click Inspect.

Types of changes

  • New feature (non-breaking change which adds functionality)

Checklist:

  • I have read the contributing document.
  • My code has been run through clang-format.
  • My code follows the project's style guidelines
  • My code is not on the master branch.
  • My code has been tested.
  • All commit messages are properly formatted and commits squashed where appropriate.
  • I have included updates to all appropriate documentation.

@WizardCM WizardCM added the kind/enhancement Enhancements are not bugs or new features but can improve usability or performance. label Jun 4, 2026
@tytan652

tytan652 commented Jun 4, 2026

Copy link
Copy Markdown
Contributor

For Linux, guarding this behind a more recent version of CEF is required.

Only Wayland testing since CEF is already good with X11.

With the PR as is

Non-flatpak (bugged, crash at some point):
Screenshot From 2026-06-04 16-13-55

Flatpak (no decoration):
Screenshot From 2026-06-04 16-14-55

CEF 127 is still too dependent on X11 and it really goes wrong.
Flatpak doesn't crash since it does not find an X11 server (which also explain the lack of decoration).

With CEF 148 and also #523 #517

Non-flatpak:
Screenshot From 2026-06-04 16-26-49

Flatpak:
Screenshot From 2026-06-04 16-23-14

CEF 148 (with the chrome runtime) seems to be fine

@WizardCM

WizardCM commented Jun 5, 2026

Copy link
Copy Markdown
Member Author

Huh, that's weird. I'll version gate it.

@WizardCM WizardCM force-pushed the inspect-browser-source branch from ab6f504 to 1b2ae11 Compare June 5, 2026 08:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

kind/enhancement Enhancements are not bugs or new features but can improve usability or performance.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants