From 605680a32b43117f4d16e0babad4c71f62e3ad3c Mon Sep 17 00:00:00 2001 From: karwosts Date: Mon, 18 Sep 2023 09:36:18 -0700 Subject: [PATCH 1/3] Debug option to enable logging server calls --- src/fake_data/provide_hass.ts | 1 + .../debug/developer-tools-debug.ts | 52 +++++++++++++++++++ .../debug/ha-debug-connection-row.ts | 50 ++++++++++++++++++ .../developer-tools/developer-tools-router.ts | 4 ++ .../ha-panel-developer-tools.ts | 1 + src/state/connection-mixin.ts | 11 ++-- src/translations/en.json | 7 +++ src/types.ts | 1 + src/util/ha-pref-storage.ts | 1 + 9 files changed, 123 insertions(+), 5 deletions(-) create mode 100644 src/panels/developer-tools/debug/developer-tools-debug.ts create mode 100644 src/panels/developer-tools/debug/ha-debug-connection-row.ts diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index 297f4d4f8c71..111ebf6e3133 100644 --- a/src/fake_data/provide_hass.ts +++ b/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 diff --git a/src/panels/developer-tools/debug/developer-tools-debug.ts b/src/panels/developer-tools/debug/developer-tools-debug.ts new file mode 100644 index 000000000000..6a5aa730cd9d --- /dev/null +++ b/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` +
+ +
+ + +
+ `; + } + + 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; + } +} diff --git a/src/panels/developer-tools/debug/ha-debug-connection-row.ts b/src/panels/developer-tools/debug/ha-debug-connection-row.ts new file mode 100644 index 000000000000..e4b1c5c3ff9b --- /dev/null +++ b/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` + + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.debug.debug_connection.title" + )} + + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.debug.debug_connection.description" + )} + + + + `; + } + + 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; + } +} diff --git a/src/panels/developer-tools/developer-tools-router.ts b/src/panels/developer-tools/developer-tools-router.ts index 5b8baf3899b4..72b9795a2cea 100644 --- a/src/panels/developer-tools/developer-tools-router.ts +++ b/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"), + }, }, }; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 813cc014e7d5..b6f718232d64 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -66,6 +66,7 @@ class PanelDeveloperTools extends LitElement { )} Assist + Debug
>( translationMetadata, dockedSidebar: "docked", vibrate: true, + debugConnection: false, suspendWhenHidden: true, enableShortcuts: true, moreInfoEntityId: null, hassUrl: (path = "") => new URL(path, auth.data.hassUrl).toString(), // eslint-disable-next-line @typescript-eslint/default-param-last callService: async (domain, service, serviceData = {}, target) => { - if (__DEV__) { + if (__DEV__ || this.hass?.debugConnection) { // eslint-disable-next-line no-console console.log( "Calling service", @@ -104,7 +105,7 @@ export const connectionMixin = >( ) { return { context: { id: "" } }; } - if (__DEV__) { + if (__DEV__ || this.hass?.debugConnection) { // eslint-disable-next-line no-console console.error( "Error calling service", @@ -140,7 +141,7 @@ export const connectionMixin = >( ) => 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); } @@ -148,14 +149,14 @@ export const connectionMixin = >( }, // For messages that expect a response callWS: (msg) => { - if (__DEV__) { + if (__DEV__ || this.hass?.debugConnection) { // eslint-disable-next-line no-console console.log("Sending", msg); } const resp = conn.sendMessagePromise(msg); - if (__DEV__) { + if (__DEV__ || this.hass?.debugConnection) { resp.then( // eslint-disable-next-line no-console (result) => console.log("Received", result), diff --git a/src/translations/en.json b/src/translations/en.json index d2fac51d1355..a2c6c8a24b5a 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5528,6 +5528,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.", diff --git a/src/types.ts b/src/types.ts index 09eb6c6e584c..6edb08dfb787 100644 --- a/src/types.ts +++ b/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; diff --git a/src/util/ha-pref-storage.ts b/src/util/ha-pref-storage.ts index eb9b72291438..3b3bb9bff7b1 100644 --- a/src/util/ha-pref-storage.ts +++ b/src/util/ha-pref-storage.ts @@ -5,6 +5,7 @@ const STORED_STATE = [ "selectedTheme", "selectedLanguage", "vibrate", + "debugConnection", "suspendWhenHidden", "enableShortcuts", "defaultPanel", From d2076fb635e7ebda2ca1dcdae8572db0c07c8dea Mon Sep 17 00:00:00 2001 From: karwosts Date: Mon, 18 Sep 2023 09:38:15 -0700 Subject: [PATCH 2/3] sentence case --- src/translations/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/en.json b/src/translations/en.json index a2c6c8a24b5a..3fe91f29cd2d 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5531,7 +5531,7 @@ "debug": { "title": "Debug Tools", "debug_connection": { - "title": "Debug Connection", + "title": "Debug connection", "description": "Observe requests to the server and responses from the server in browser console." } }, From 6def6fded588d8593d8a4c05b90c9f685c8214c7 Mon Sep 17 00:00:00 2001 From: karwosts Date: Tue, 26 Sep 2023 17:55:15 -0700 Subject: [PATCH 3/3] move to overflow menu --- .../ha-panel-developer-tools.ts | 24 ++++++++++++++++++- src/translations/en.json | 2 +- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index b6f718232d64..de7ec5777c11 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/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 {
${this.hass.localize("panel.developer_tools")}
+ + + + ${this.hass.localize("ui.panel.developer-tools.tabs.debug.title")} + + Assist - Debug ) { + switch (ev.detail.index) { + case 0: + navigate(`/developer-tools/debug`); + break; + } + } + private get _page() { return this.route.path.substr(1); } diff --git a/src/translations/en.json b/src/translations/en.json index 3fe91f29cd2d..499794eb6c96 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5529,7 +5529,7 @@ "language": "[%key:ui::components::language-picker::language%]" }, "debug": { - "title": "Debug Tools", + "title": "Debug tools", "debug_connection": { "title": "Debug connection", "description": "Observe requests to the server and responses from the server in browser console."