Debugging

Disponible en français

Chrome DevTools MCP

Use chrome-devtools-mcp to let Claude inspect browser state directly.

# Install
pnpm dlx @anthropic-ai/chrome-devtools-mcp

Claude can then:

• Inspect console logs/errors
• View network requests
• Read DOM state
• Check localStorage/cookies
• Debug React component state

Cloudflare

Wrangler Tail (Live Logs)

# Stream live logs from Workers
wrangler tail

# Filter by status
wrangler tail --status error

# Filter by search term
wrangler tail --search "userId"

# JSON output for parsing
wrangler tail --format json

D1 Debugging

# Query D1 directly
wrangler d1 execute DB_NAME --command "SELECT * FROM users LIMIT 5"

# Export for inspection
wrangler d1 export DB_NAME --output dump.sql

# Local D1 (dev)
wrangler d1 execute DB_NAME --local --command "SELECT * FROM users"

Workers Logs (Dashboard)

dash.cloudflare.com → Workers → Your Worker → Logs

• Real-time log stream
• Filter by time/status
• Request traces with timing

Hono

Request Logging Middleware

import { logger } from "hono/logger";

app.use("*", logger());

Custom Debug Middleware

app.use("*", async (c, next) => {
  const start = Date.now();
  await next();
  console.log(`${c.req.method} ${c.req.path} - ${c.res.status} (${Date.now() - start}ms)`);
});

Error Handling

app.onError((err, c) => {
  console.error(`${c.req.method} ${c.req.path}:`, err);
  return c.json({ error: err.message }, 500);
});

Drizzle

Query Logging

import { drizzle } from "drizzle-orm/d1";

const db = drizzle(env.DB, {
  logger: true // logs all queries
});

Custom Logger

const db = drizzle(env.DB, {
  logger: {
    logQuery(query, params) {
      console.log("Query:", query);
      console.log("Params:", params);
    },
  },
});

TanStack Query

DevTools

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Query Logging

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: (err) => console.error("Query error:", err),
    },
    mutations: {
      onError: (err) => console.error("Mutation error:", err),
    },
  },
});

Better Auth

Debug Mode

export const auth = betterAuth({
  logger: {
    disabled: false,
    level: "debug", // error | warn | info | debug
  },
});

Session Inspection

// Server-side
const session = await auth.api.getSession({ headers });
console.log("Session:", session);

// Client-side
const { data } = authClient.useSession();
console.log("Client session:", data);

Network Debugging

Fetch Interceptor (Client)

const originalFetch = window.fetch;
window.fetch = async (...args) => {
  console.log("Fetch:", args[0]);
  const res = await originalFetch(...args);
  console.log("Response:", res.status);
  return res;
};

Environment Tips

# Local dev with remote D1
wrangler dev --remote

# Local dev with local D1
wrangler dev --local

# Check bindings
wrangler whoami
wrangler d1 list