Debug option to enable logging server calls

src/fake_data/provide_hass.ts

@@ -271,6 +271,7 @@ export const provideHass = (
     },
     dockedSidebar: "auto",
     vibrate: true,
+    debugConnection: false,
     suspendWhenHidden: false,
     moreInfoEntityId: null as any,
     // @ts-ignore

src/panels/developer-tools/debug/developer-tools-debug.ts

@@ -0,0 +1,52 @@
+import { CSSResultGroup, LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import "./ha-debug-connection-row";
+
+@customElement("developer-tools-debug")
+class HaPanelDevDebug extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  protected render() {
+    return html`
+      <div class="content">
+        <ha-card
+          .header=${this.hass.localize(
+            "ui.panel.developer-tools.tabs.debug.title"
+          )}
+          class="form"
+        >
+          <div class="card-content">
+                  <ha-debug-connection-row
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                  ></ha-debug-connection-row>
+        </ha-card>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .content {
+          padding: 28px 20px 16px;
+          display: block;
+          max-width: 600px;
+          margin: 0 auto;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "developer-tools-debug": HaPanelDevDebug;
+  }
+}

src/panels/developer-tools/debug/ha-debug-connection-row.ts

@@ -0,0 +1,50 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-settings-row";
+import "../../../components/ha-switch";
+import type { HaSwitch } from "../../../components/ha-switch";
+import type { HomeAssistant } from "../../../types";
+import { storeState } from "../../../util/ha-pref-storage";
+
+@customElement("ha-debug-connection-row")
+class HaDebugConnectionRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public narrow!: boolean;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize(
+            "ui.panel.developer-tools.tabs.debug.debug_connection.title"
+          )}
+        </span>
+        <span slot="description">
+          ${this.hass.localize(
+            "ui.panel.developer-tools.tabs.debug.debug_connection.description"
+          )}
+        </span>
+        <ha-switch
+          .checked=${this.hass.debugConnection}
+          @change=${this._checkedChanged}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private async _checkedChanged(ev: Event) {
+    const debugConnection = (ev.target as HaSwitch).checked;
+    if (debugConnection === this.hass.debugConnection) {
+      return;
+    }
+    this.hass.debugConnection = debugConnection;
+    storeState(this.hass);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-debug-connection-row": HaDebugConnectionRow;
+  }
+}

src/panels/developer-tools/developer-tools-router.ts

@@ -49,6 +49,10 @@ class DeveloperToolsRouter extends HassRouterPage {
         tag: "developer-tools-assist",
         load: () => import("./assist/developer-tools-assist"),
       },
+      debug: {
+        tag: "developer-tools-debug",
+        load: () => import("./debug/developer-tools-debug"),
+      },
     },
   };
 

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -1,9 +1,14 @@
+import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import type { ActionDetail } from "@material/mwc-list";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-menu-button";
+import "../../components/ha-button-menu";
+import "../../components/ha-icon-button";
+import "../../components/ha-list-item";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant, Route } from "../../types";
 import "./developer-tools-router";
@@ -34,6 +39,16 @@ class PanelDeveloperTools extends LitElement {
           <div class="main-title">
             ${this.hass.localize("panel.developer_tools")}
           </div>
+          <ha-button-menu slot="actionItems" @action=${this._handleMenuAction}>
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>
+            <ha-list-item>
+              ${this.hass.localize("ui.panel.developer-tools.tabs.debug.title")}
+            </ha-list-item>
+          </ha-button-menu>
         </div>
         <paper-tabs
           scrollable
@@ -85,6 +100,14 @@ class PanelDeveloperTools extends LitElement {
     }
   }
 
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        navigate(`/developer-tools/debug`);
+        break;
+    }
+  }
+
   private get _page() {
     return this.route.path.substr(1);
   }

src/state/connection-mixin.ts

@@ -73,6 +73,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         translationMetadata,
         dockedSidebar: "docked",
         vibrate: true,
+        debugConnection: false,
         suspendWhenHidden: true,
         enableShortcuts: true,
         moreInfoEntityId: null,
@@ -84,7 +85,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
           target,
           notifyOnError = true
         ) => {
-          if (__DEV__) {
+          if (__DEV__ || this.hass?.debugConnection) {
             // eslint-disable-next-line no-console
             console.log(
               "Calling service",
@@ -109,7 +110,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
             ) {
               return { context: { id: "" } };
             }
-            if (__DEV__) {
+            if (__DEV__ || this.hass?.debugConnection) {
               // eslint-disable-next-line no-console
               console.error(
                 "Error calling service",
@@ -146,22 +147,22 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         ) => fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init),
         // For messages that do not get a response
         sendWS: (msg) => {
-          if (__DEV__) {
+          if (__DEV__ || this.hass?.debugConnection) {
             // eslint-disable-next-line no-console
             console.log("Sending", msg);
           }
           conn.sendMessage(msg);
         },
         // For messages that expect a response
         callWS: <R>(msg) => {
-          if (__DEV__) {
+          if (__DEV__ || this.hass?.debugConnection) {
             // eslint-disable-next-line no-console
             console.log("Sending", msg);
           }
 
           const resp = conn.sendMessagePromise<R>(msg);
 
-          if (__DEV__) {
+          if (__DEV__ || this.hass?.debugConnection) {
             resp.then(
               // eslint-disable-next-line no-console
               (result) => console.log("Received", result),

src/translations/en.json

@@ -5562,6 +5562,13 @@
             "no_match": "No intent matched",
             "language": "[%key:ui::components::language-picker::language%]"
           },
+          "debug": {
+            "title": "Debug tools",
+            "debug_connection": {
+              "title": "Debug connection",
+              "description": "Observe requests to the server and responses from the server in browser console."
+            }
+          },
           "events": {
             "title": "Events",
             "description": "Fire an event on the event bus.",

src/types.ts

@@ -230,6 +230,7 @@ export interface HomeAssistant {
   suspendWhenHidden: boolean;
   enableShortcuts: boolean;
   vibrate: boolean;
+  debugConnection: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
   defaultPanel: string;
   moreInfoEntityId: string | null;

src/util/ha-pref-storage.ts

@@ -5,6 +5,7 @@ const STORED_STATE = [
   "selectedTheme",
   "selectedLanguage",
   "vibrate",
+  "debugConnection",
   "suspendWhenHidden",
   "enableShortcuts",
   "defaultPanel",