When performing a Service Call from the developer tools, most of the time I also want to monitor a related event.
However, I can’t just click on the Developer Tools tab title to open that tab in a new window. nor right click and “Open in new window”.
The same is true for other lovelace panels - I have quite a few subtabs/panels on some of them and I can’t CTRL+CLICK to open the panel in another window…
Yep, I try to do this all the time. Good one
Yes, I know now that it doesn’t work, so I just duplicate the tab now. Voted!
The technical answer is that browsers only have this behavior for native anchor elements (i.e. <a href=...>...</a>), and anchors aren’t used in all navigation elements. Part of the reason is performance so that the entire pages is not refreshed each time you change tabs. Unfortunately, the solution that has anchors + good performance is currently terrible for accessibility because of limitations in the underlying Material Design components.
There is a GitHub issue on the topic with links to other issues.
The good news is that Google’s Material 3 components look to be handling this better, but that has yet to be released.
Summary
Enable Right Click in Developer Tools Heading
YAML STATES SERVICES TEMPLATE EVENTS STATISTICS ASSIST
Often I’m in Developer tools in one window, say Template & I need to check the state or the state name or I need to reload a template Yaml Config, rather than going back & forth in the tab history or having to open developer tools again & select the required tab, it would be nice to just be able to right click on the developer tool heading & select open in new tab.
Any update on the issue restricting this from before?
It’s not possible without a full rewrite of the UI, making this very unlikely to ever happen.
Anyways, you can check the progress in the previous link that steve posted.
You’re mixing up two things here. Using links and loading a new page instead of intercepting the click and dynamically change the current page would instead have a horrible responsiveness. However, using links and intercepting the click would work fine. This is, for example, what HA and this forum do with their sidebar. When you click any links there, there is no page reload but javascript handles loading the target, yet the <h href=... is still there, so the browser knows those are links and can open them in new browser tabs/windows.
The issue is that the <paper-tab> elements are not wrapped in an <a>. If this was handwritten/manually generated html, adding a wrapping <a> that’s styled to not change the rendering would be trivial. As this is library-generated, how much control the programmers have to inject extra code, I can only guess. And that guess is that wrapping the whole tab-bar would be easy and wrapping individual tab headers hard.
What should be easy would be applying the change after the fact. Going over those nicely selectable elements with some js and wrapping them looks like a 3-line job. The tabs on the dashboards link to “./0”, “./1”, etc., the ones in the dev tool to their page-name. However, doing that is more a job for Tampermonkey…
PS: My tip to the thread starter would be to open the new windows on the sidebar items. It’s one click more to get to the desired tab, but it’s the shortest available route at the moment.
You’re right. I don’t remember exactly what I meant since it was a while ago, but probably just that care needs to be taken to make sure that the browser doesn’t handle it as it normally would.
And that would break keyboard control and accessibility per the issue I referenced, so it shouldn’t be done.
