show object properties in the details of the log viewer

This commit is contained in:
Bruno Windels 2021-02-23 21:00:15 +01:00
parent 0cbf6008a2
commit 61adca3b10
2 changed files with 11 additions and 2 deletions

View file

@ -47,6 +47,7 @@
aside .values li span { aside .values li span {
word-wrap: ; word-wrap: ;
word-wrap: anywhere; word-wrap: anywhere;
padding: 4px;
} }
aside .values { aside .values {
@ -63,7 +64,7 @@
aside .values span.value { aside .values span.value {
width: 70%; width: 70%;
display: block; display: block;
padding-left: 10px; white-space: pre-wrap;
} }
aside .values li { aside .values li {

View file

@ -52,6 +52,14 @@ main.addEventListener("click", event => {
} }
}); });
function stringifyItemValue(value) {
if (typeof value === "object" && value !== null) {
return JSON.stringify(value, undefined, 2);
} else {
return value + "";
}
}
function showItemDetails(item, parent, itemNode) { function showItemDetails(item, parent, itemNode) {
const parentOffset = itemStart(parent) ? `${itemStart(item) - itemStart(parent)}ms` : "none"; const parentOffset = itemStart(parent) ? `${itemStart(item) - itemStart(parent)}ms` : "none";
const expandButton = t.button("Expand recursively"); const expandButton = t.button("Expand recursively");
@ -68,7 +76,7 @@ function showItemDetails(item, parent, itemNode) {
t.ul({class: "values"}, Object.entries(itemValues(item)).map(([key, value]) => { t.ul({class: "values"}, Object.entries(itemValues(item)).map(([key, value]) => {
return t.li([ return t.li([
t.span({className: "key"}, normalizeValueKey(key)), t.span({className: "key"}, normalizeValueKey(key)),
t.span({className: "value"}, value+"") t.span({className: "value"}, stringifyItemValue(value))
]); ]);
})), })),
t.p(expandButton) t.p(expandButton)