+
+
+
+
+
+ `;
+ }
+
+ 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 0000000000..e4b1c5c3ff
--- /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 5b8baf3899..72b9795a2c 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 813cc014e7..de7ec5777c 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")}
+
+