docs: mention @vitejs/devtools/client/inject for explicit devtools client injection (#266)

Author: webfansplz

docs/guide/index.md

@@ -110,6 +110,18 @@ pnpm dev
 
 Then open your app in the browser and open the DevTools panel.
 
+#### Projects without an HTML entry
+
+The embedded DevTools client is usually injected through Vite's `transformIndexHtml` hook. If your app does not start from an HTML entry, keep the `DevTools()` plugin enabled and import the client injector manually in your client entry instead:
+
+```ts twoslash
+import '@vitejs/devtools/client/inject'
+```
+
+This loads the same DevTools client that would normally be added to `index.html`. Put it in a browser entry such as `main.ts` or `entry.client.ts`, not in server-only files or shared SSR entry files.
+
+If your project does have an HTML entry, avoid importing `@vitejs/devtools/client/inject` in addition to the HTML injection, as that would inject the client twice and create duplicate dock elements.
+
 #### Building with the App
 
 You can also generate a static DevTools build alongside your app's build output by enabling the `build.withApp` option:

packages/core/src/node/plugins/injection.ts

@@ -7,6 +7,7 @@ export function DevToolsInjection(): Plugin {
   return {
     name: 'vite:devtools:injection',
     enforce: 'post',
+    apply: 'serve',
     transformIndexHtml() {
       const fileUrl = process.env.VITE_DEVTOOLS_LOCAL_DEV
         ? normalize(join(dirDist, '..', 'src/client/inject/index.ts'))