Enhance debugging functionality and update Makefile for development

Author: tacxou

Makefile

@@ -24,7 +24,7 @@ dev:
 		-p $(APP_PORT):3000 \
 		-p 24678:24678 \
 		-v $(CURDIR):/data \
-		$(IMGNAME)
+		$(IMGNAME) yarn dev
 
 prod:
 	docker run --rm -it \

src/components/appbar/RightButtons.vue

@@ -34,10 +34,15 @@ const badgesValues = ref({
 })
 
 const auth = useAuth()
-const { debug } = useDebug()
+
 // console.log(auth)
 const buttons = [
-
+  {
+    icon: 'mdi-bug',
+    name: 'Debug',
+    color: 'warning',
+    action: toggleDebug,
+  },
   {
     icon: 'mdi-logout',
     name: 'Déconnexion',
@@ -65,4 +70,16 @@ async function syncAll() {
   await identityStateStore.fetchSyncedCount()
 }
 
+async function toggleDebug() {
+  const route = useRoute()
+  const router = useRouter()
+
+  const query = { ...route.query }
+  query.debug = /true|on|yes|1/i.test(query.debug) ? 0 : 1
+
+  await router.replace({
+    query,
+  })
+}
+
 </script>

src/composables/useDebug.ts

@@ -1,6 +1,9 @@
 export function useDebug() {
   const route = useRoute()
-  const debug = process.env.NODE_ENV === 'development' || /yes|true|1|on/.test(`${route.query.debug}`)
+
+  const debug = computed(() => {
+    return /yes|true|1|on/.test(`${route.query.debug}`)
+  })
 
   return { debug }
 }