Add a dev view

Author: TaiSakuma

src/plugins/router.ts

@@ -37,6 +37,11 @@ const routes: RouteRecordRaw[] = [
     name: "dev",
     component: () => import("@/views/dev/DevView.vue"),
   },
+  {
+    path: "/dev/headers",
+    name: "dev-headers",
+    component: () => import("@/views/dev/DevHeadersView.vue"),
+  },
   {
     path: "/scratch",
     name: "scratch",

src/views/dev/DevHeadersView.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="g-container">
+    <pre> {{ headers }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { useDevHeadersQuery } from "@/graphql/codegen/generated";
+
+const query = useDevHeadersQuery({ requestPolicy: "network-only", variables: {} });
+const headers = computed(() => JSON.parse(query.data.value?.dev.headers ?? "null"));
+</script>
+
+<style scoped>
+.g-container {
+  display: grid;
+  height: 100%;
+  place-items: center;
+}
+
+.g-container > div {
+  text-align: center;
+}
+</style>