gh-obsproject/obs-browser
Watch
1
0
Fork
You've already forked obs-browser
 0
Code Issues 37 Pull requests 13 Releases 15 Wiki Activity

Add Property Button to Inspect Sources #528

Open
WizardCM wants to merge 1 commit from WizardCM/inspect-browser-source into master
pull from: WizardCM/inspect-browser-source
merge into: gh-obsproject:master
Conversation 5 Commits 1 Files changed 3 +23
WizardCM commented 2026-06-04 08:54:24 -05:00 (Migrated from github.com)

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.
### Description Add an "Inspect" button to the Browser Source's Properties window to open Chrome Dev Tools. <img width="398" height="201" alt="image" src="https://github.com/user-attachments/assets/54624f7e-5b3b-4857-86e9-d09b134f6739" /> 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](https://github.com/chromium/chromium/blob/0cacfd015bc849186d70b11856f72e1b175c432b/content/shell/resources/shell_devtools_discovery_page.html#L40) 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: - [x] I have read the [**contributing** document](https://github.com/obsproject/obs-studio/blob/master/CONTRIBUTING.md). - [x] My code has been run through [clang-format](https://github.com/obsproject/obs-studio/blob/master/.clang-format). - [x] My code follows the project's [**style guidelines**](https://github.com/obsproject/obs-studio/blob/master/CODESTYLE.md) - [x] My code is not on the master branch. - [x] My code has been tested. - [x] All commit messages are properly formatted and commits squashed where appropriate. - [x] I have included updates to all appropriate documentation.
Warchamp7 (Migrated from github.com) reviewed 2026-06-04 08:54:24 -05:00
tytan652 commented 2026-06-04 09:29:17 -05:00 (Migrated from github.com)

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

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): <img width="1920" height="1080" alt="Screenshot From 2026-06-04 16-13-55" src="https://github.com/user-attachments/assets/3e75f9f0-56dd-4e16-9502-f3be6f59fb8f" /> Flatpak (no decoration): <img width="1920" height="1080" alt="Screenshot From 2026-06-04 16-14-55" src="https://github.com/user-attachments/assets/536cb13e-3894-4096-bcba-59f3200f5ccd" /> 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: <img width="1920" height="1080" alt="Screenshot From 2026-06-04 16-26-49" src="https://github.com/user-attachments/assets/c97418ad-3787-4bde-96fd-e306376feaf1" /> Flatpak: <img width="1920" height="1080" alt="Screenshot From 2026-06-04 16-23-14" src="https://github.com/user-attachments/assets/a7c719c6-2ad4-4244-af81-a1f063a3df40" /> CEF 148 (with the chrome runtime) seems to be fine
WizardCM commented 2026-06-05 03:15:16 -05:00 (Migrated from github.com)

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

Huh, that's weird. I'll version gate it.
PatTheMav (Migrated from github.com) reviewed 2026-08-21 10:16:50 -05:00
PatTheMav (Migrated from github.com) left a comment

During my testing it seems like the inspect window is another avenue for OBS to potentially crash on shutdown due to race conditions between CEF and OBS itself (crash originates in BrowserShutdown()).

It's probably not an issue with this PR per-se, but it means we're adding another avenue for people to potentially end up with unclean shutdowns.

During my testing it seems like the inspect window is another avenue for OBS to potentially crash on shutdown due to race conditions between CEF and OBS itself (crash originates in `BrowserShutdown()`). It's probably not an issue with this PR per-se, but it means we're adding _another_ avenue for people to potentially end up with unclean shutdowns.
PatTheMav (Migrated from github.com) reviewed 2026-08-21 10:24:18 -05:00
obs-browser-source.cpp
@ -430,0 +433,4 @@
[](CefRefPtr<CefBrowser> cefBrowser) {
CefWindowInfo windowInfo;
windowInfo.bounds.width = 900;
windowInfo.bounds.height = 700;
PatTheMav (Migrated from github.com) commented 2026-08-21 10:24:19 -05:00

Is there any logic behind those values or were those just randomly chosen?

Is there any logic behind those values or were those just randomly chosen?
This pull request is broken due to missing fork information.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin 'WizardCM/inspect-browser-source:WizardCM/inspect-browser-source'
git switch 'WizardCM/inspect-browser-source'

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch 'master'
git merge --no-ff 'WizardCM/inspect-browser-source'
git switch 'WizardCM/inspect-browser-source'
git rebase 'master'
git switch 'master'
git merge --ff-only 'WizardCM/inspect-browser-source'
git switch 'WizardCM/inspect-browser-source'
git rebase 'master'
git switch 'master'
git merge --no-ff 'WizardCM/inspect-browser-source'
git switch 'master'
git merge --squash 'WizardCM/inspect-browser-source'
git switch 'master'
git merge --ff-only 'WizardCM/inspect-browser-source'
git switch 'master'
git merge 'WizardCM/inspect-browser-source'
git push origin 'master'
Sign in to join this conversation.
Reviewers
No reviewers
Warchamp7
Labels
Clear labels   
area/accessibility
Improves accessibility of the program

  
area/dependency
Issue is in external library or dependency, not OBS itself

  
Confirmed

   
Crash Report

   
Delayed
Merging has been delayed due to an issue

  
Design Issue
There is an issue with incorporating this pull request's design. It may take some time to finalize.

  
Duplicate

   
Feedback required
Issue does not contain enough information or is missing the template

  
Good first issue
New to contributing to OBS? Start here!

  
kind/bug
Categorizes issue or PR as related to a bug.

  
kind/cleanup
Non-breaking change which makes code smaller or more readable

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

  
platform/linux

   
platform/macos

   
platform/windows

   
priority/high
This is an important PR

  
Question

   
Request for Comments
More feedback & discussion is requested

  
Seeking Other Contributors
This PR needs help from any other developers who are willing to give a crack at this code

  
Seeking Testers

   
Won't Fix / By Design
No labels
area/accessibility
area/dependency
Confirmed
Crash Report
Delayed
Design Issue
Duplicate
Feedback required
Good first issue
kind/bug
kind/cleanup
kind/enhancement
platform/linux
platform/macos
platform/windows
priority/high
Question
Request for Comments
Seeking Other Contributors
Seeking Testers
Won't Fix / By Design
Milestone
Clear milestone
No items
No milestone
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
gh-obsproject/obs-browser!528
No description provided.