diff --git a/src/App.svelte b/src/App.svelte
index 81c530d..897d371 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -75,7 +75,7 @@
 				<Route path="/"><Highlights /></Route>
 				<Route path="/settings"><Settings /></Route>
 				<Route path="/debug">
-					<Lazy component={import('src/components/Debug.svelte')} />
+					<Lazy component={import('src/components/debug/Debug.svelte')} />
 				</Route>
 			</Route>
 		</Main>
diff --git a/src/components/Debug.svelte b/src/components/Debug.svelte
deleted file mode 100644
index ca5e67f..0000000
--- a/src/components/Debug.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script context="module">
-	import { log, settings } from 'src/stores'
-</script>
-
-<script>
-	$: values = Object.entries($settings)
-</script>
-
-<div class="wrapper">
-	<pre>Current version build time: {import.meta.env.VITE_VERSION}</pre>
-
-	<h4><pre>LocalStorage.settings:</pre></h4>
-	<ul>
-		{#each values as [key, value] (key)}
-			<li>
-				<code>
-					{key}: {JSON.stringify(value)}
-				</code>
-			</li>
-		{/each}
-	</ul>
-	<h4><pre>Log:</pre></h4>
-	<ul>
-		{#each $log as message, i (i)}
-			<li>
-				<code>
-					{decodeURI(message)}
-				</code>
-			</li>
-		{/each}
-	</ul>
-</div>
-
-<style>
-	.wrapper {
-		padding: 1em;
-	}
-	code {
-		margin: 0;
-		height: 1em;
-	}
-	ul {
-		list-style-type: '- ';
-	}
-	ul li {
-		line-height: 1;
-	}
-</style>
diff --git a/src/components/debug/Debug.svelte b/src/components/debug/Debug.svelte
new file mode 100644
index 0000000..4806c44
--- /dev/null
+++ b/src/components/debug/Debug.svelte
@@ -0,0 +1,29 @@
+<script context="module">
+	import ObjectPrint from 'src/components/debug/ObjectPrint.svelte'
+
+	import { cache, log, settings } from 'src/stores'
+</script>
+
+<div class="wrapper">
+	<pre>Current version build time: {import.meta.env.VITE_VERSION}</pre>
+
+	<ObjectPrint name="LocalStorage.settings" object={$settings} />
+	<ObjectPrint name="LocalStorage.cache" object={$cache} />
+	<ObjectPrint name="API call log" object={$log.map((e) => decodeURI(e))} />
+</div>
+
+<style lang="scss">
+	.wrapper {
+		padding: 1em;
+
+		& :global(ul) {
+			list-style-type: '- ';
+		}
+
+		& :global(code) {
+			margin: 0;
+			height: 1em;
+			overflow-wrap: anywhere;
+		}
+	}
+</style>
diff --git a/src/components/debug/ObjectPrint.svelte b/src/components/debug/ObjectPrint.svelte
new file mode 100644
index 0000000..ba79850
--- /dev/null
+++ b/src/components/debug/ObjectPrint.svelte
@@ -0,0 +1,45 @@
+<script>
+	/** Could be any object. Single values, arrays and objects are supported */
+	export let object = []
+	/** Leave empty to hide */
+	export let name = ''
+
+	$: object_is_array = is_array(object)
+	$: object_entries = Object.entries(object)
+	$: object_is_empty =
+		(object_is_array && object.length === 0) ||
+		(is_object(object) && object_entries.length === 0)
+
+	function is_object(o) {
+		return o instanceof Object
+	}
+	function is_array(o) {
+		return o instanceof Array
+	}
+</script>
+
+<div class:hidden={object_is_empty}>
+	<h4 class:hidden={name === ''}><pre>{name}</pre></h4>
+	<ul>
+		{#each object_entries as [key, value] (key)}
+			<li class:is-array={object_is_array}>
+				<code class:hidden={object_is_array}>{key}:</code>
+
+				{#if is_object(value)}
+					<svelte:self object={value} />
+				{:else}
+					<code>{JSON.stringify(value)}</code>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.is-array {
+		list-style-type: circle;
+	}
+	.hidden {
+		display: none;
+	}
+</style>