Open developer tools in same tab

[arxpoetica]

It'd be great if there was some way to have developer tools open in the same tab instead of a separate one. I find switching back and forth between tabs to be really tedious. Is there any way to do this?

[porsager]

Unfortunately not currently. What I usually do is pull the dev tools tab out into it's own window and arrange them next to each other. I've been playing around trying to embed them in the same window, but it unfortunately breaks because it starts a recursive loop by feeding all it's own events to itself. If only chrome would allow multiple connections to the same tab, the built in dev tools could be used instead.

One idea I still haven't tested out fully yet is to embed the page in an iframe and isolate dev tools events from that iframe, filtering out the other ones, but I think it might be a long shot.

I do plan on making wright independent of chrome so that you only need chrome if you want the hot reload features. When that works you could use the regular dev tools.

[arxpoetica]

I think you're last point might be hitting on something...as in, I think I'm missing part of the picture here. Why is there a secondary dev tools built in to wright in the first place?

Can't I just use dev tools like normal? Sorry for the n00b questions. Promise I'm trying to be helpful. 👍

[porsager]

Not a n00b question at all, ask away, any feedback is welcome ;)

Wright makes use of Chromes DevTools protocol to do it's thing with hot reloading, which is done through a websocket connection at a tab-specific link. If the built in dev tools is opened while wright is connected on the websocket, chrome will close the connection because it only supports a single connection at a time. The reason wright can open dev tools in another tab is because it proxies the requests through it's own websocket connection. There is an open chrome issue for this, but for some reason they closed for comments, but starring it might get their attention some day ;) https://bugs.chromium.org/p/chromium/issues/detail?id=129539

[arxpoetica]

I think I'm getting it. May I offer a couple alternatives?

1. do what livereload does and attach the socket through a chrome extension? [see attached image] or an app?
2. Alternately, this seems like something the new (and awesome!) Headless Chrome could handle? https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md https://developers.google.com/web/updates/2017/04/headless-chrome

Thoughts? Or am I way off target?

I starred Chrome the issue you detailed.

[porsager]

Hi @arxpoetica Sorry for getting back this late, but in the mean time some very good news came out :)

From chrome 61 and onwards it will be possible to open dev tools in the same windows because chrome fixed the issue I linked above.

I'm hoping to match the release with a v. 1.0 release of wright that removes all the chrome dev tools websocket proxying.

I'll keep this issue open to track it ;)

[porsager]

Hi @arxpoetica The 1.0 release is out which uses the built in chrome dev tools, so everything should be nicer now ;) Let me know how it works out for you..

[arxpoetica]

I may have something specific to test it on coming up—I'll try and remember to give this a try.