---
title: Debugging Bun with the web debugger
sidebarTitle: Web debugger
mode: center
---

Bun speaks the [WebKit Inspector Protocol](https://github.com/oven-sh/bun/blob/main/packages/bun-inspector-protocol/src/protocol/jsc/index.d.ts). To enable debugging when running code with Bun, use the `--inspect` flag. Consider the following web server.

```ts server.ts icon="/icons/typescript.svg"
Bun.serve({
  fetch(req) {
    console.log(req.url);
    return new Response("Hello, world!");
  },
});
```

---

Run the file with the `--inspect` flag.

This starts a WebSocket server on port `6499` (pass `--inspect=<port>` to use a different port). Debugging tools connect to this server to introspect the running Bun process.

Bun hosts a web-based debugger at [debug.bun.sh](https://debug.bun.sh). It is a modified version of WebKit's [Web Inspector Interface](https://webkit.org/web-inspector/web-inspector-interface/), which looks familiar to Safari users.

```sh terminal icon="terminal"
bun --inspect server.ts
```

```txt
--------------------- Bun Inspector ---------------------
Listening:
  ws://localhost:6499/204e4940-4a8b-4ebc-8fee-1c66926bbc21
Inspect in browser:
  https://debug.bun.sh/#localhost:6499/204e4940-4a8b-4ebc-8fee-1c66926bbc21
--------------------- Bun Inspector ---------------------
```

---

Open the provided `debug.bun.sh` URL in your browser to start a debugging session. From this interface, you can view the source code of the running file, view and set breakpoints, and execute code with the built-in console.

<Frame>
  ![Screenshot of Bun debugger, Console
  tab](https://github.com/oven-sh/bun/assets/3084745/e6a976a8-80cc-4394-8925-539025cc025d)
</Frame>

---

Next, set a breakpoint. Open the Sources tab, which shows the code from earlier, and click line number `3` to set a breakpoint on the `console.log(req.url)` statement.

<Frame>
  ![screenshot of Bun debugger](https://github.com/oven-sh/bun/assets/3084745/3b69c7e9-25ff-4f9d-acc4-caa736862935)
</Frame>

---

Then visit [`http://localhost:3000`](http://localhost:3000) in your browser to send an HTTP request to the server. The page hangs because the program is paused at the breakpoint you set.

Note how the UI has changed.

<Frame>
  ![screenshot of Bun debugger](https://github.com/oven-sh/bun/assets/3084745/8b565e58-5445-4061-9bc4-f41090dfe769)
</Frame>

---

Use the console at the bottom to run arbitrary code in the context of the program, with full access to the variables in scope at the breakpoint.

<Frame>
  ![Bun debugger console](https://github.com/oven-sh/bun/assets/3084745/f4312b76-48ba-4a7d-b3b6-6205968ac681)
</Frame>

---

The right side of the Sources pane lists the local variables in scope; drill down to see their properties and methods. The screenshot shows the `req` variable.

<Frame>
  ![Bun debugger variables panel](https://github.com/oven-sh/bun/assets/3084745/63d7f843-5180-489c-aa94-87c486e68646)
</Frame>

---

The buttons in the upper left of the Sources pane control the program's execution.

<Frame>
  ![Bun debugger controls](https://github.com/oven-sh/bun/assets/3084745/41b76deb-7371-4461-9d5d-81b5a6d2f7a4)
</Frame>

---

Here's what each control flow button does.

- _Continue script execution_ — runs the program until the next breakpoint or exception.
- _Step over_ — continues to the next line.
- _Step into_ — if the current statement contains a function call, steps into the called function.
- _Step out_ — if the current statement is a function call, finishes executing it, then steps out of the function to the location where it was called.

<Frame>
  ![Debugger control buttons cheat
  sheet](https://github-production-user-asset-6210df.s3.amazonaws.com/3084745/261510346-6a94441c-75d3-413a-99a7-efa62365f83d.png)
</Frame>
