Dockable developer tools (F12)

[Sh1d0w]

Did you search for similar issues before submitting this one?

Yes

Describe the issue you encountered:

As a web developer which main browser currently is Brave I find using the developer tools (F12) frequently to inspect the webpage HTML and console output. Currently pressing F12 brings up the developer tools as a separate window. Chrome has option to attach the developer tools to the related window or even the tab you are inspecting. Brave does not have that option, making it pain switching between IDE and the browser window if you want to continiously inspect and observe the opened page.

Expected behavior:

Brave should allow attaching the developer tools (F12) in the relevant tab frame that was inspected.

• Platform (Win7, 8, 10? macOS? Linux distro?):
  All
• Brave Version:
  All
• Steps to reproduce:
  1. Open a webpage
  2. Press F12
  3. Observe the result
• Screenshot if needed:

Chrome:

Brave:

- Any related issues:

[Sh1d0w]

From electron docs:

https://github.com/electron/electron/blob/master/docs/api/web-contents.md#contentsopendevtoolsoptions

contents.openDevTools([options])

    options Object (optional)
        mode String - Opens the devtools with specified dock state, can be right, bottom, undocked, detach. 
        Defaults to last used dock state. In undocked mode it's possible to dock back. In detach mode it's not.

For some reason it does not work if this option is changed in Brave here:

https://github.com/brave/browser-laptop/blob/master/js/components/frame.js#L450

This feature was introduced here:

electron/electron#5094

I wonder if you guys altered this behaviour in your electron fork?

cc @bbondy @bsclifton

[bbondy]

I'd love to have this too by the way.

Currently upstream hardcodes detach always for webviews. I'm not sure why but I've tried removing that condition and it didn't work. It would be awesome if you figure out why they did that and a fix though.

https://github.com/electron/electron/blob/46b257944113bba1c1258c485757bef421a5e110/atom/browser/api/atom_api_web_contents.cc#L944

[Sh1d0w]

@bbondy Here is the response from the issue I've rised with electron guys:

It is not possible with what we have now, in Chromium the webview is implemented as a 
browser plugin, and the docked devtools is implemented as native view, there is no 
way to mix them up.

Seems like this is not doable unfortunately :(

[bbondy]

It's do-able but they just don't plan to support it. Re-opening.

[Edward-Castle]

This is the only thing preventing me from switching to Brave for good.

[lednhatkhanh]

Please support this! Vivaldi has the same problem tho

[getsetbro]

+1

[mrgoos]

Hi,
Any news on that?

[rloechner]

+1

[sahas-]

+1

[JoaoFOliveira]

+1

[NikolaiSzabados]

+1

[thynquest]

That functionnality should be implemented a long time ago !
+1

[lekhnath]

This feature is a must have.

[zackeryfretty]

+1

[erangeles]

Guys, if you want this browser to gain traction enabling developers ease of access is a key. Please please enable this feature.

[webhipster]

+1 Yup, just installed and uninstalling. Come on guys, you can do it! We believe in you!

[rjdp]

@mohsinbhaai read the comments above, also this no way to talk to people around here, nobody owes you anything, you've got to learn how to get around with people in open source projects :)

[remcovanessen]

glad I scrolled to the bottom as I was about to ditch Brave.... hoping it will be available soon!

[simon-hayden]

I was mostly chuffed with Brave after 24hrs. Not having dockable dev tools is a deal breaker, though, so am pleased this is (almost) here.

[ghost]

Updated to the latest build of Brave. Hoping to see this included in the next version. As others have mentioned it would drastically make web developers more enthusiastic about Brave.

[sergiotapia]

On latest version is it still not up @HankHouser

[dwiyatci]

[bsclifton]

@sergiotapia @HankHouser if you (or anyone else reading this) are willing to try an experimental build, you can download our latest release here:
https://github.com/brave/brave-browser/releases

brave-core is basically our developer channel now. We're slowly phasing out browser-laptop in favor of it 😄

[jonschr]

This is what I've been waiting for for like two years to switch over to Brave. Thanks! Looks fantastic.

[sergiotapia]

Downloading now @bsclifton

Alright, works awesome! Goodbye Chrome good riddance!!!

[apswak]

@bsclifton writing to you live from my "Brave-Browser-Dev"...thank you! Took 10 seconds to get all my chrome preferences/settings, and looks great! Look forward to the full release, in the meantime... literally no reason for chrome anymore 🥇

[sergiotapia]

@bsclifton I don't mind using a browser on the edge. Will this update itself though as new releases come out? I do mind manually updating

[bsclifton]

@sergiotapia great question - I confirmed with @RyanJarv that the builds do indeed auto-update 😄 👍

[davidapple]

Google Chrome have just updated their browser to a new design. Not to everyone's taste. Good time to switch to Brave but it's a shame the dev tools are not integrated into a stable release. It's amazing that there is a development version with dockable dev tools but when will be next stable release be?

[bsclifton]

@davidapple per our release schedule, we're expecting to be stable and on the release channel by mid-October 😄

[forresthardin]

Good god I need this. Thanks Brave devs

[Mrs-Jaydot]

I'm completely new to Brave, loving it, but I need this too, can't wait! Thanks!!

[rjdp]

It's out, here you go https://brave.com/download .. chromium based now . .. Thanks a lot Brave team.

[thynquest]

On the chromium version I don' t see some features which existed previously.. like the "Show tab preview on hover" or "Clear the following data types when I close Brave".. is it normal ?
btw VERY NICE JOB brave team !

[cndouglas]

@thynquest Those features have not been re-implemented yet, but they are planned. See brave/brave-browser#275 and brave/brave-browser#492

[thynquest]

Ok thank you for the answer and again very nice job guys.. keep going !!

[arobbins]

Just wanted to say, now that this is fixed I'm officially moving from Chrome to Brave. Thanks Brave team for addressing!

[davidapple]

Brilliant, thanks. Time to delete Google Chrome.

[davidmoradi]

Download Brave Beta and you will have Dockable developer tools 🚀
https://brave.com/download-beta/

[Jacalz]

No need to download the beta when it’s already in stable and that has been the case for quite some time now 👌

[simon-hayden]

No need to download the beta when it’s already in stable and that has been the case for quite some time now 👌

@Jacalz, afraid not - developer tools currently only available as seperate window in stable.

[Jacalz]

Then you must be using the old muon based version or have some other issue, I have 0.57.18 and I can successfully open devtools attached to the window on both windows and MacOS 😬

[sjlehn]

@simon-hayden Make sure you actually have the current stable release (Version 0.57.18). Someone I was helping needed to re-download it because it didn't auto-update to the Chromium version.

[simon-hayden]

@sjlehn Thank you so much. Seems that I was in the same situation, with v0.25 not updating.

@Jacalz Thanks for alerting us to this! I imagine there are lots of people in the situation I have been, thinkin the old version would update to latest stable releases.

Also, for others finding this, the new version on macOS is "Brave Browser" (vs. previously "Brave"), so make sure you are launching the new application as well.

[Jacalz]

You are welcome and I believe that they are planning to update users of the muon version to he new version soon in the very near future. They have been waiting to have a rock solid update from the old version to the new 😅 @simon-hayden