fix: open DevTools to the Right Instead of Detaching

[6cobi]

Description:
This PR addresses Issue #22, where the DevTools window was detaching instead of docking to the right panel when inspecting elements. The issue was caused by webContents.openDevTools({ mode: "right" }) not applying correctly.

Changes Made:

• Explicitly ensure that webContents is correctly targeted for the main browser window and webviews.
• Ensure that DevTools open only if they are not already open.

Steps to Test:

1. Run the application.
2. Right-click on any element and select "Inspect".
3. Verify that DevTools open in the right panel instead of detaching.
4. Test the behavior in both the main window and any webview instances.

Screenshot

[akhileshthite]

Thanks for the PR.

DevTools incorrectly target the main Electron window (file://) instead of the webview's content (e.g., https://peersky.p2plabs.xyz).

Ensure DevTools open for the webview's webContents instead of the main window index.html.

[6cobi]

Hi,

I've spent a couple more hours trying to resolve this.
I looked at PRs from other projects, such as:
electron/electron#17168
Here, I tried reloading, adding a timeout/delay, and closing DevTools before opening them, but none of these approaches worked.

I also checked the demo of the Electron Documentation using devtool for webview but failed to:
https://github.com/electron/electron/blob/00fc8066de5c6617769567ec0369f10a271426f8/docs/api/web-contents.md

Additionally, I logged the method that checks if DevTools are open, and it returns false, even though DevTools aren’t actually opening. I also tried using a preload script, but I still couldn’t see the actual DevTools.

From what I’ve tested, this seems to be a known issue with webviews in Electron. Based on responses from some developers who had similar issues and AI tools, most people end up using either "undocked" or "detach" mode as a workaround.
I've also posted a question in Electron's Discord help forum and hope to get some guidance soon.

I would really appreciate any help or insights you could provide. Thank you in advance!

[akhileshthite]

Hi,

I've spent a couple more hours trying to resolve this. I looked at PRs from other projects, such as: electron/electron#17168 Here, I tried reloading, adding a timeout/delay, and closing DevTools before opening them, but none of these approaches worked.

I also checked the demo of the Electron Documentation using devtool for webview but failed to: https://github.com/electron/electron/blob/00fc8066de5c6617769567ec0369f10a271426f8/docs/api/web-contents.md

Additionally, I logged the method that checks if DevTools are open, and it returns false, even though DevTools aren’t actually opening. I also tried using a preload script, but I still couldn’t see the actual DevTools.

From what I’ve tested, this seems to be a known issue with webviews in Electron. Based on responses from some developers who had similar issues and AI tools, most people end up using either "undocked" or "detach" mode as a workaround. I've also posted a question in Electron's Discord help forum and hope to get some guidance soon.

I would really appreciate any help or insights you could provide. Thank you in advance!

Ah, I see.
Thanks for your efforts, I truly appreciate it.

It might be worth checking how Agregore is handling DevTools:
https://github.com/AgregoreWeb/agregore-browser/blob/617e9f6968694ca6d72c0edaa79067fa5c186f16/app/actions.js#L113

https://github.com/AgregoreWeb/agregore-browser/blob/617e9f6968694ca6d72c0edaa79067fa5c186f16/app/actions.js#L160