docs: add solid devtools option (#8189)

Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/en/guides/integrations-guide/solid-js.mdx

@@ -6,7 +6,8 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
 category: renderer
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Since from '~/components/Since.astro';
 
 This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [SolidJS](https://www.solidjs.com/) components.
 
@@ -98,6 +99,42 @@ To use your first SolidJS component in Astro, head to our [UI framework document
 * 💧 client-side hydration options, and
 * 🤝 opportunities to mix and nest frameworks together
 
+## Configuration
+
+### devtools
+
+<p><Since pkg="@astrojs/solid-js" v="4.2.0" /></p>
+
+You can enable [Solid DevTools](https://github.com/thetarnav/solid-devtools) in development by passing an object with `devtools: true` to your `solid()` integration config and adding `solid-devtools` to your project dependencies:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install solid-devtools
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add solid-devtools
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add solid-devtools
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+import solid from '@astrojs/solid';
+
+export default defineConfig({
+  // ...
+  integrations: [solid({ devtools: true })],
+});
+```
+
 ## Options
 
 ### Combining multiple JSX frameworks