chore: enhance debugging capabilities (#77)

Author: JerryWu1234

.changeset/hungry-stingrays-attack.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/devtools': patch
+---
+
+CHORE: add debug log and format

package.json

@@ -4,7 +4,7 @@
   "description": "Qwik devtools monorepo",
   "scripts": {
     "dev": "pnpm --filter plugin build && MODE=dev pnpm --parallel dev",
-    "playground": "MODE=dev pnpm --filter playground dev",
+    "playground": "MODE=dev DEBUG=qwik:devtools:* pnpm --filter playground dev",
     "build": "tsx scripts/build-devtools.ts",
     "change": "changeset",
     "release": "changeset publish",
@@ -17,7 +17,9 @@
     "@types/node": "^22.10.5",
     "tsdown": "^0.9.6",
     "tsx": "^4.19.2",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "debug": "4.4.3",
+    "@types/debug": "4.1.12"
   },
   "private": true,
   "keywords": [

packages/playgrounds/src/root.tsx

@@ -7,7 +7,6 @@ import {
 } from '@qwik.dev/router';
 import { RouterHead } from './components/router-head/router-head';
 import './global.css';
-import '../../devtools/dist/ui/style.css';
 export default component$(() => {
   /**
    * The root of a QwikRouter site always start with the <QwikRouterProvider> component,

packages/plugin/src/index.ts

@@ -6,8 +6,9 @@ import useCollectHooksSource from './utils/useCollectHooks'
 import { parseQwikCode } from './parse/parse';
 import { startPreloading } from './npm/index';
 import updateConf from './utils/updateConf';
+import {debug} from 'debug'
 
-
+const log = debug('qwik:devtools:plugin');
 export function qwikDevtools(): Plugin[] {
   let _config: ResolvedConfig;
   const qwikData = new Map<string, any>();
@@ -47,7 +48,7 @@ export function qwikDevtools(): Plugin[] {
       if (!preloadStarted) {
         preloadStarted = true;
         startPreloading({ config: _config }).catch((err) => {
-          console.error('[Qwik DevTools] Failed to start preloading:', err);
+          log('[Qwik DevTools] Failed to start preloading:', err);
         });
       }
     }, 
@@ -62,7 +63,7 @@ export function qwikDevtools(): Plugin[] {
             const importLine = `import { ${INNER_USE_HOOK} } from '${VIRTUAL_QWIK_DEVTOOLS_KEY}';\n`
             code = importLine + code
           }else {
-            console.log('importing virtual qwik devtools', VIRTUAL_QWIK_DEVTOOLS_KEY, code);
+            log('importing virtual qwik devtools', VIRTUAL_QWIK_DEVTOOLS_KEY, code);
           }
           code = parseQwikCode(code, {path: id})
         }

packages/plugin/src/inspect/index.ts

@@ -1,6 +1,9 @@
 import fs from 'node:fs/promises'
 import { parseQwikCode } from "../parse/parse";
 import { ServerContext } from "../types";
+import {debug} from 'debug'
+
+const log = debug('qwik:devtools:inspect');
 const codeStringCache = new Map<string, ReturnType<typeof parseQwikCode>>()
 
 function parseCodeWithCache(code: string) {
@@ -41,7 +44,7 @@ export function getModulesContent(ctx: ServerContext) {
             modules
           };
         } catch (error) {
-          console.log(`Failed to transform request for ${pathId}:`, error);
+          log(`Failed to transform request for ${pathId}:`, error);
           return {
             pathId,
             modules: null,
@@ -98,7 +101,7 @@ export function getModulesContent(ctx: ServerContext) {
 
         return []
       } catch (error) {
-        console.error(`Failed to parse qwik code for ${pathId}:`, error);
+        log(`Failed to parse qwik code for ${pathId}:`, error);
         return []
       }
 

packages/plugin/src/npm/index.ts

@@ -3,7 +3,9 @@ import fsp from 'node:fs/promises';
 import { NpmInfo } from '@devtools/kit';
 import { execSync } from 'child_process';
 import path from 'path';
+import {debug} from 'debug'
 
+const log = debug('qwik:devtools:npm');
 // In-memory cache for npm package information
 interface CacheEntry {
   data: any;
@@ -100,17 +102,17 @@ export async function detectPackageManager(
 // Preload dependencies function - moved to module scope
 const preloadDependencies = async (config: any): Promise<any[]> => {
   if (preloadedDependencies) {
-    console.log('[Qwik DevTools] Dependencies already preloaded');
+    log('[Qwik DevTools] Dependencies already preloaded');
     return preloadedDependencies;
   }
 
   if (isPreloading && preloadPromise) {
-    console.log('[Qwik DevTools] Preloading already in progress...');
+    log('[Qwik DevTools] Preloading already in progress...');
     return preloadPromise;
   }
 
   isPreloading = true;
-  console.log('[Qwik DevTools] Starting to preload dependencies...');
+  log('[Qwik DevTools] Starting to preload dependencies...');
 
   preloadPromise = (async () => {
     const startDir = getProjectStartDirFromConfig(config);
@@ -119,7 +121,7 @@ const preloadDependencies = async (config: any): Promise<any[]> => {
     if (!pathToPackageJson) {
       preloadedDependencies = [];
       isPreloading = false;
-      console.log('[Qwik DevTools] No package.json found');
+      log('[Qwik DevTools] No package.json found');
       return [];
     }
 
@@ -163,7 +165,7 @@ const preloadDependencies = async (config: any): Promise<any[]> => {
 
         const fetchedPackages: any[] = [];
 
-        console.log(`[Qwik DevTools] Fetching ${uncachedDependencies.length} packages in parallel...`);
+        log(`[Qwik DevTools] Fetching ${uncachedDependencies.length} packages in parallel...`);
 
         const allBatchPromises = batches.map(async (batch) => {
           const batchPromises = batch.map(async ([name, version]) => {
@@ -253,11 +255,11 @@ const preloadDependencies = async (config: any): Promise<any[]> => {
         preloadedDependencies = allPackages;
         isPreloading = false;
 
-        console.log(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`);
+        log(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`);
 
         return allPackages;
       } catch (error) {
-        console.error('[Qwik DevTools] ✗ Failed to preload dependencies:', error);
+        log('[Qwik DevTools] ✗ Failed to preload dependencies:', error);
         preloadedDependencies = [];
         isPreloading = false;
         return [];
@@ -270,14 +272,14 @@ const preloadDependencies = async (config: any): Promise<any[]> => {
 // Export function to start preloading from plugin initialization
 export async function startPreloading({ config }: { config: any }) {
   const startTime = Date.now();
-  console.log('[Qwik DevTools] 🚀 Initiating dependency preload (background)...');
+  log('[Qwik DevTools] 🚀 Initiating dependency preload (background)...');
 
   // Start preloading in background, don't wait for it
   preloadDependencies(config).then(() => {
     const duration = ((Date.now() - startTime) / 1000).toFixed(2);
-    console.log(`[Qwik DevTools] ⚡ Preload completed in ${duration}s`);
+    log(`[Qwik DevTools] ⚡ Preload completed in ${duration}s`);
   }).catch((err) => {
-    console.error('[Qwik DevTools] ✗ Preload failed:', err);
+    log('[Qwik DevTools] ✗ Preload failed:', err);
   });
 
   // Return immediately, don't block
@@ -305,18 +307,18 @@ export function getNpmFunctions({ config }: ServerContext) {
     async getAllDependencies(): Promise<any[]> {
       // Return preloaded data immediately if available
       if (preloadedDependencies) {
-        console.log('[Qwik DevTools] Returning preloaded dependencies');
+        log('[Qwik DevTools] Returning preloaded dependencies');
         return preloadedDependencies;
       }
 
       // If preloading is in progress, wait for it
       if (isPreloading && preloadPromise) {
-        console.log('[Qwik DevTools] Waiting for preload to complete...');
+        log('[Qwik DevTools] Waiting for preload to complete...');
         return preloadPromise;
       }
 
       // If preloading hasn't started (shouldn't happen), start it now
-      console.log('[Qwik DevTools] Warning: Preload not started, starting now...');
+      log('[Qwik DevTools] Warning: Preload not started, starting now...');
       return preloadDependencies(config);
     },
 

packages/ui/src/components/DevtoolsButton/DevtoolsButton.tsx

@@ -88,7 +88,7 @@ export const DevtoolsButton = component$(({ state }: DevtoolsButtonProps) => {
     <div
       ref={elementRef}
       class={{
-        'fixed flex h-9 w-9 origin-center select-none items-center justify-center rounded-lg border border-border bg-background backdrop-blur-md':
+        'border-border bg-background fixed flex h-9 w-9 origin-center select-none items-center justify-center rounded-lg border backdrop-blur-md':
           true,
         'border-accent/50 bg-background/95 shadow-accent/35 rotate-90 shadow-lg':
           state.isOpen.value && !isDragging.value,

packages/ui/src/components/DevtoolsPanel/DevtoolsPanel.tsx

@@ -48,7 +48,7 @@ export const DevtoolsPanel = component$(({ state }: DevtoolsPanelProps) => {
   return (
     <div
       ref={panelRef}
-      class="fixed bottom-6 right-6 flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 border-border bg-background text-foreground backdrop-blur-lg transition-transform duration-300 ease-in-out"
+      class="border-border bg-background text-foreground fixed bottom-6 right-6 flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 backdrop-blur-lg transition-transform duration-300 ease-in-out"
     >
       <Slot />
     </div>

packages/ui/src/components/Tab/Tab.tsx

@@ -15,7 +15,7 @@ export const Tab = component$<TabProps>(({ state, id, title }) => {
       class={{
         'flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200':
           true,
-        'bg-transparent hover:bg-foreground/5 text-muted-foreground hover:text-foreground':
+        'hover:bg-foreground/5 text-muted-foreground hover:text-foreground bg-transparent':
           state.activeTab !== id,
         'shadow-accent/35 bg-accent text-white shadow-lg':
           state.activeTab === id,

packages/ui/src/components/TabContent/TabContent.tsx

@@ -3,7 +3,7 @@ import { component$, Slot } from '@qwik.dev/core';
 export const TabContent = component$(() => {
   return (
     <div class="flex h-full w-full flex-col space-y-6">
-      <div class="flex items-center justify-between border-b border-border pb-4">
+      <div class="border-border flex items-center justify-between border-b pb-4">
         <Slot name="title" />
       </div>