From 191250a66a2af33d0a4a631cf9fb006bc294af3b Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 24 Oct 2023 03:57:36 -0700
Subject: [PATCH] Fix complex attribute display in devtools (#18371)

---
 .../developer-tools/state/developer-tools-state.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts
index 8a77150e45..6265b89f1e 100644
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -13,6 +13,7 @@ import {
   HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
+import { dump } from "js-yaml";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { escapeRegExp } from "../../../common/string/escape_regexp";
@@ -513,12 +514,23 @@ class HaPanelDevState extends LitElement {
       });
   }
 
+  private _formatAttributeValue(value) {
+    if (
+      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
+      (!Array.isArray(value) && value instanceof Object)
+    ) {
+      return `\n${dump(value)}`;
+    }
+    return Array.isArray(value) ? value.join(", ") : value;
+  }
+
   private _attributeString(entity) {
     const output = "";
 
     if (entity && entity.attributes) {
       return Object.keys(entity.attributes).map(
-        (key) => `${key}: ${entity.attributes[key]}\n`
+        (key) =>
+          `${key}: ${this._formatAttributeValue(entity.attributes[key])}\n`
       );
     }