Add Debugger docs and a couple guides (#4281)

* Add debugger docs. Add guides.

* Add files

5 files changed, 118 insertions, 2 deletions

diff --git a/docs/guides/util/detect-bun.md b/docs/guides/util/detect-bun.md
new file mode 100644
index 000000000..0a2506b5c
--- /dev/null
+++ b/docs/guides/util/detect-bun.md
@@ -0,0 +1,23 @@
+---
+name: Detect when code is executed with Bun
+---
+
+The recommended way to conditionally detect when code is being executed with `bun` is to check for the existence of the `Bun` global.
+
+This is similar to how you'd check for the existence of the `window` variable to detect when code is being executed in a browser.
+
+```ts
+if (typeof Bun !== "undefined") {
+  // this code will only run when the file is run with Bun
+}
+```
+
+---
+
+In TypeScript environments, the previous approach will result in a type error unless `bun-types` is globally installed. To avoid this, you can check `process.versions` instead.
+
+```ts
+if (process.versions.bun) {
+  // this code will only run when the file is run with Bun
+}
+```
diff --git a/docs/guides/util/hash-a-password.md b/docs/guides/util/hash-a-password.md
index 6941bfcfe..61a59aeaf 100644
--- a/docs/guides/util/hash-a-password.md
+++ b/docs/guides/util/hash-a-password.md
@@ -8,7 +8,7 @@ The `Bun.password.hash()` function provides a fast, built-in mechanism for secur
 const password = "super-secure-pa$$word";
 
 const hash = await Bun.password.hash(password);
-// => $argon2id$v=19$m=65536,t=2,p=1$tFq+9AVr1bfPxQdh6E8DQRhEXg/M/SqYCNu6gVdRRNs$GzJ8PuBi+K+BVojzPfS5mjnC8OpLGtv8KJqF99eP6a4
+// => $argon2id$v=19$m=65536,t=2,p=1$tFq+9AVr1bfPxQdh6E8DQRhEXg/M/...
 ```
 
 ---
diff --git a/docs/nav.ts b/docs/nav.ts
index e54a89552..633177ade 100644
--- a/docs/nav.ts
+++ b/docs/nav.ts
@@ -132,6 +132,9 @@ export default {
     page("runtime/configuration", "Configuration", {
       description: `Bun's runtime is configurable with environment variables and the bunfig.toml config file.`,
     }),
+    page("runtime/debugger", "Debugger", {
+      description: `Debug your code with Bun's web-based debugger or VS Code extension`,
+    }),
     page("runtime/framework", "Framework API", {
       disabled: true,
       description:
diff --git a/docs/runtime/debugger.md b/docs/runtime/debugger.md
new file mode 100644
index 000000000..39e396ff8
--- /dev/null
+++ b/docs/runtime/debugger.md
@@ -0,0 +1,90 @@
+---
+name: Debugger
+---
+
+Bun speaks the [WebKit Inspector Protocol](https://github.com/oven-sh/bun/blob/main/packages/bun-vscode/types/jsc.d.ts). For demonstration purposes, consider the following simple web server.
+
+```ts#server.ts
+Bun.serve({
+  fetch(req){
+    console.log(req.url);
+    return new Response("Hello, world!");
+  }
+})
+```
+
+### `--inspect`
+
+To enable debugging when running code with Bun, use the `--inspect` flag. This automatically starts a WebSocket server on an available port that can be used to introspect the running Bun process.
+
+```sh
+$ bun --inspect server.ts
+------------------ Bun Inspector ------------------
+Listening at:
+  ws://localhost:6499/0tqxs9exrgrm
+
+Inspect in browser:
+  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
+------------------ Bun Inspector ------------------
+```
+
+### `--inspect-brk`
+
+The `--inspect-brk` flag behaves identically to `--inspect`, except it automatically injects a breakpoint at the first line of the executed script. This is useful for debugging scripts that run quickly and exit immediately.
+
+### `--inspect-wait`
+
+The `--inspect-wait` flag behaves identically to `--inspect`, except the code will not execute until a debugger has attached to the running process.
+
+### Setting a port or URL for the debugger
+
+Regardless of which flag you use, you can optionally specify a port number, URL prefix, or both.
+
+```sh
+$ bun --inspect=4000 server.ts
+$ bun --inspect=localhost:4000 server.ts
+$ bun --inspect=localhost:4000/prefix server.ts
+```
+
+## Debuggers
+
+Various debugging tools can connect to this server to provide an interactive debugging experience. 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 will look familiar to Safari users.
+
+### `debug.bun.sh`
+
+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 will look familiar to Safari users.
+
+Open the provided `debug.bun.sh` URL in your browser to start a debugging session. From this interface, you'll be able to view the source code of the running file, view and set breakpoints, and execute code with the built-in console.
+
+{% image src="https://github.com/oven-sh/bun/assets/3084745/e6a976a8-80cc-4394-8925-539025cc025d" alt="Screenshot of Bun debugger, Console tab" /%}
+
+Let's set a breakpoint. Navigate to the Sources tab; you should see the code from earlier. Click on the line number `3` to set a breakpoint on our `console.log(req.url)` statement.
+
+{% image src="https://github.com/oven-sh/bun/assets/3084745/3b69c7e9-25ff-4f9d-acc4-caa736862935" alt="screenshot of Bun debugger" /%}
+
+Then visit [`http://localhost:3000`](http://localhost:3000) in your web browser. This will send an HTTP request to our `localhost` web server. It will seem like the page isn't loading. Why? Because the program has paused execution at the breakpoint we set earlier.
+
+Note how the UI has changed.
+
+{% image src="https://github.com/oven-sh/bun/assets/3084745/8b565e58-5445-4061-9bc4-f41090dfe769" alt="screenshot of Bun debugger" /%}
+
+At this point there's a lot we can do to introspect the current execution environment. We can 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 our breakpoint.
+
+{% image src="https://github.com/oven-sh/bun/assets/3084745/f4312b76-48ba-4a7d-b3b6-6205968ac681" /%}
+
+On the right side of the Sources pane, we can see all local variables currently in scope, and drill down to see their properties and methods. Here, we're inspecting the `req` variable.
+
+{% image src="https://github.com/oven-sh/bun/assets/3084745/63d7f843-5180-489c-aa94-87c486e68646" /%}
+
+In the upper left of the Sources pane, we can control the execution of the program.
+
+{% image src="https://github.com/oven-sh/bun/assets/3084745/41b76deb-7371-4461-9d5d-81b5a6d2f7a4" /%}
+
+Here's a cheat sheet explaining the functions of the control flow buttons.
+
+- _Continue script execution_ — continue running the program until the next breakpoint or exception.
+- _Step over_ — The program will continue to the next line.
+- _Step into_ — If the current statement contains a function call, the debugger will "step into" the called function.
+- _Step out_ — If the current statement is a function call, the debugger will finish executing the call, then "step out" of the function to the location where it was called.
+
+{% image src="https://github-production-user-asset-6210df.s3.amazonaws.com/3084745/261510346-6a94441c-75d3-413a-99a7-efa62365f83d.png" /%}
diff --git a/packages/bun-types/globals.d.ts b/packages/bun-types/globals.d.ts
index 8cbaf1447..c7585bbda 100644
--- a/packages/bun-types/globals.d.ts
+++ b/packages/bun-types/globals.d.ts
@@ -740,7 +740,7 @@ interface BlobInterface {
 type BlobPart = string | Blob | BufferSource;
 interface BlobPropertyBag {
   /** Set a default "type". Not yet implemented. */
-  // type?: string;
+  type?: string;
   /** Not implemented in Bun yet. */
   // endings?: "transparent" | "native";
 }