You can connect your SvelteKit app to Chrome DevTools with just one command to see the status, headers, payload, and latency of all API requests.

For this guide, we’ll use a simple SvelteKit app as an example. The app has one page (+page.svelte) and one API handler (routes/api/hello/+server.ts).

<!-- +page.svelte -->
<script>
  let message = "";

  async function getMessage() {
    const res = await fetch("/api/hello");
    const data = await res.json();
    message = data.message;
  }
</script>

<main>
  <h1>Trigger a GET request with the button.</h1>
  <button on:click="{getMessage}">Make API call</button>
  <h2>{message}</h2>
</main>

// routes/api/hello/+server.ts
let count = 0;

export function GET(): Response {
  count++;
  return new Response(
    JSON.stringify({
      message: `Called ${count} ${count === 1 ? "time" : "times"}.`,
    }),
    { headers: { "Content-Type": "application/json" } }
  );
}

To get started, download the latest version of Subtrace using the following command:

curl -fsSLO "https://subtrace.dev/download/latest/$(uname -s)/$(uname -m)/subtrace"
chmod +x ./subtrace

Build and start your server using Subtrace:

npm install
npm run build
./subtrace run -- npm run dev

Open the subt.link URL in your browser to get to the Subtrace dashboard. Go to localhost:5173 and make some requests to the server to see them show up in realtime on the Subtrace dashboard!

You can find the complete source code for this example here.

Next.jsFastAPI