docs: guide for Chrome DevTools workspace mapping with Vite-Plugin-Devtools-Json

[0xTaneja]

Description

Referred from #2925

Select what type of change this PR introduces:

1. Just code/docs improvement (no functional change).
2. Bug fix (non-breaking change which fixes an issue).
3. New feature (non-breaking change which adds functionality).
4. Breaking change (fix or feature that would cause existing functionality to not work as expected).

This PR adds a new section to the docs that shows Wasp users how to opt-in to Chrome DevTools Automatic Workspace mapping in development, without changing Wasp’s default setup.
Location: web/docs/project/custom-vite-config.md
Section heading: “Chrome DevTools automatic workspace mapping”.

No generator templates or runtime code are touched—this is documentation-only, keeping the default Wasp bundle lean while giving power users an opt-in workflow.

[0xTaneja]

@cprecioso back to business !! PR added , was going to add images and videos but as you said on discord , so made it as a subpart but better
like you have always been guiding me , guide me captain on any change and I will be quick to make it !! 😊

[cprecioso]

Hey @0xTaneja, thanks for the great work!

I tried it out and left some comments, I think it's ready to merge once you solve those.

Just a note for the future, when writing docs, remember to try out what you're writing and checking that it is correct! (It's a lesson I also had to learn myself 😅) I found some places where the instructions were wrong.
I suggested the necessary fixes myself now, because this relies on a development version of Wasp so it's more difficult to test, but remember for the future!

All in all, great work, thanks a bunch Rushab 🙏

[cprecioso]

Should be 3 ###, also changed a bit the name so it is more clear what it accomplishes

Suggested change

	## Chrome DevTools automatic workspace mapping {#devtools-workspace}
	### Editing from the Chrome DevTools {#devtools-workspace}

[cprecioso]

Rewrote it a bit. We tell people want they can accomplish, and what they'll have to do to accomplish it. This way docs are super nice to read! I also added a link to the plugin's page.

Suggested change

	Want edits you make in Chrome DevTools Sources panel to save directly to your project files? You can enable [Chrome DevTools Workspace](https://developer.chrome.com/docs/devtools/workspace/) support in development with the community plugin **vite-plugin-devtools-json** (no Wasp fork required).
	Chrome DevTools support [mapping a page's resources to a folder](https://developer.chrome.com/docs/devtools/workspaces), so any changes you make in the browser reflect back to your files. To enable it, you can add their Vite plugin: [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json).

[cprecioso]

• We have a plugin that lets us write only the TS version and converts it to JS automatically. You just write a normal code block and add the auto-js attribute to it.

• This file is an ES Module, not a CommonJS file, so __dirname is not the recommended way to get the dirname. We should use import.meta.dirname instead.

• We don't require users to add the react() plugin, that should be taken out.

• devtoolsJson is a default export

Suggested change

	<Tabs groupId="js-ts">
	<TabItem value="js" label="JavaScript">
	```js title="vite.config.js"
	import { devtoolsJson } from 'vite-plugin-devtools-json'
	export default {
	plugins: [
	react(), // already present
	devtoolsJson({
	// tell Chrome which folder to map – project root works great
	root: __dirname
	})
	]
	}
	```
	</TabItem>
	<TabItem value="ts" label="TypeScript">
	```ts title="vite.config.ts"
	import { defineConfig } from 'vite'
	import react from '@vitejs/plugin-react-swc'
	import { devtoolsJson } from 'vite-plugin-devtools-json'
	export default defineConfig({
	plugins: [
	react(),
	devtoolsJson({ root: __dirname })
	]
	})
	```
	</TabItem>
	</Tabs>
	```ts title="vite.config.ts" auto-js
	import { defineConfig } from 'vite'
	import devtoolsJson from 'vite-plugin-devtools-json'
	export default defineConfig({
	plugins: [
	devtoolsJson({ root: import.meta.dirname })
	]
	})
	```

[cprecioso]

• Let's make formatting consistent
• The folders are in Sources -> Workspace

Suggested change

	3. Start your app with `wasp start`, open Chrome DevTools → **Sources › Filesystems** and you should see your project automatically mapped. Changes you make in DevTools now save to disk and Vite’s HMR updates the browser instantly.
	3. Start your app with `wasp start`, open **Chrome DevTools → Sources → Workspace** and you should see your project automatically mapped. Changes you make in DevTools now save to disk and Vite's HMR updates the browser instantly.

[cprecioso]

When using npm, this command is usually done with i or install instead of add. And everywhere else in our docs we use i, so let's change it.

Suggested change

	npm add -D vite-plugin-devtools-json
	npm i -D vite-plugin-devtools-json

[cprecioso]

Small nitpick

Suggested change

	The latest version of `vite-plugin-devtools-json` includes Windows, WSL and Docker-desktop path fixes contributed by the Wasp community – make sure you are on ≥ 0.4.0.
	The latest version of `vite-plugin-devtools-json` includes Windows, WSL and Docker Desktop path fixes contributed by the Wasp community – make sure you are on version 0.4.0 or greater.

[0xTaneja]

@cprecioso will be resolved asap!!

[cprecioso]

Hey @0xTaneja are you still on this or should we pick it up from our end? 😊

[0xTaneja]

well @cprecioso will take this by this week as was ill , that's why delayed

[cprecioso]

Oh perfect! Didn't mean to rush! I hope you feel better :)