Anyway to Hide developer tool section? in the HA frontend

Configuration
21

Got it to work (kind of hacky but can be toggled from chrome dev tools (yea exposing the variable isn’t the best but it works))

put:

frontend:
  extra_html_url:
    - /local/hide_toolbar.html

In your configuration.yaml then paste the following code in <config directory>/www/hide_toolbar.html

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script>

  function hide_toolbar() {
    var elem = document.querySelector('home-assistant');
    var shadow_1 = elem.shadowRoot.querySelector("home-assistant-main");
    var shadow_2 = shadow_1.shadowRoot.querySelector("app-drawer-layout");
    var shadow_3 = shadow_2.querySelector("iron-pages");
    var shadow_4 = shadow_3.querySelector("partial-cards");
    var shadow_5 = shadow_4.shadowRoot.querySelector("ha-app-layout");
    var shadow_6 = shadow_5.querySelector("app-header");
    var shadow_7 = shadow_6.querySelector("app-toolbar");
    var shadow_8 = shadow_7.querySelector("ha-menu-button");
    shadow_8.style.display = 'none';
    // run $.exposed.shadow_8.style.display = 'block' to enable it again
    $.exposed = {
      shadow_8: shadow_8
    }
  }
  if (window.addEventListener)
    window.addEventListener("load", hide_toolbar, false);
  else if (window.attachEvent)
    window.attachEvent("onload", hide_toolbar);
  else window.onload = hide_toolbar;
</script>

Restart HA and might need to do a shift+F5 to get chrome to clear the cache

edit: formatting

2 Likes
22

Nice, thanks for sharing, unfortunately I can find the perfect solution yet, but currently I have “sort of” hiding the hass main page completely(xxx:8123 page and disable frontend) instead I use TileBoard as frontend browsing and controlling stuff(nginx etc to hide the 8123 page) ^^

23

Your welcome! Hopefully some people find this useful, trying it on lovelace and mobile, so far it looks like mobile has a different structure

24

Hi,

i tried the steps dev bar does not seem to go away

thanks

25

Seems like some DOM structure has changed, got it working in 0.84.6 with

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <style>
    app-toolbar{
      visibility: hidden !important;
      height:0px !important;
    }
    </style>
  <script>
  
    function hide_toolbar() {
      var elem = document.querySelector('home-assistant');
      var shadow_1 = elem.shadowRoot.querySelector("home-assistant-main");
      var shadow_2 = shadow_1.shadowRoot.querySelector("app-drawer-layout");
      var shadow_3 = shadow_2.querySelector("app-drawer");
      var shadow_4 = shadow_3.querySelector("ha-sidebar");
      var devtools = shadow_4.shadowRoot.querySelectorAll('div')[1];
      devtools.style.display = 'none'
      // run $.exposed.devtools.style.display = 'block' to enable it again
      $.exposed = {
        devtools: devtools
      }
    }
    if (window.addEventListener)
      window.addEventListener("load", hide_toolbar, false);
    else if (window.attachEvent)
      window.attachEvent("onload", hide_toolbar);
    else window.onload = hide_toolbar;
  </script>

In my case is for a demo site that I want to promote but I don’t want to give access to the developer section.
However this solution is not very secure, someone knowing the internal of HA can just type /dev-service into the URL and get to those.

I believe the appropriate solution when user roles come into HA

Thanks!

1 Like