docs: improve usage guide

Author: webfansplz

docs/guide/index.md

@@ -36,32 +36,19 @@ Install or upgrade your Vite to the beta version 13+:
 }
 ```
 
-Install the required DevTools plugin for both client modes:
+Install the required DevTools package:
 
 ```bash
 pnpm add -D @vitejs/devtools
 ```
 
-Vite DevTools supports two client modes: embedded and standalone. You can choose the mode in your Vite config.
+Vite DevTools has two client modes. Configure one mode at a time.
 
-Use embedded mode:
+### Standalone mode
 
-```ts [vite.config.ts] twoslash
-import { DevTools } from '@vitejs/devtools'
-import { defineConfig } from 'vite'
+The DevTools client runs in a standalone window (no user app).
 
-export default defineConfig({
-  plugins: [
-    DevTools(),
-  ],
-  build: {
-    rolldownOptions: {
-      devtools: {}, // enable devtools mode
-    },
-  }
-})
-```
-Or use standalone mode:
+Configure `vite.config.ts`:
 
 ```ts [vite.config.ts] twoslash
 import { defineConfig } from 'vite'
@@ -73,19 +60,45 @@ export default defineConfig({
 })
 ```
 
-Run a Vite build to generate Rolldown build metadata. In standalone mode, DevTools also starts a local server to host the client after the build completes.
+Run:
 
 ```bash
 pnpm build
 ```
 
+After the build completes, open the DevTools URL shown in the terminal.
 
-If you're using embedded mode, start your app and open the DevTools panel in the browser:
+### Embedded mode
+
+The DevTools client runs inside an embedded floating panel.
+
+Configure `vite.config.ts`:
+
+```ts [vite.config.ts] twoslash
+import { DevTools } from '@vitejs/devtools'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    DevTools(),
+  ],
+  build: {
+    rolldownOptions: {
+      devtools: {}, // enable devtools mode
+    },
+  }
+})
+```
+
+Run:
 
 ```bash
+pnpm build
 pnpm dev
 ```
 
+Then open your app in the browser and open the DevTools panel.
+
 ## What's Next?
 
 Now that you have Vite DevTools set up, you can: