Vite Vanilla example for Automatic Workspace Folders

This is a trivial Vanilla TypeScript project to illustrate the use of the vite-plugin-devtools-json plugin for Vite. Checkout the documentation on how to set up Google Chrome (Canary) to enable the feature. Follow the steps below to try it out.

Installation

Checkout and setup the example via:

git clone http://github.com/bmeurer/automatic-workspace-folders-vanilla
cd automatic-workspace-folders-vanilla
npm install
npm run dev

Afterwards open http://localhost:5173/ in your Google Chrome (Canary), open DevTools, and reveal the Workspace tab in the Sources panel. If you set up everything correctly, you'll see an folder row labeled automatic-workspace-folders-vanilla with a Connect button next to it. Once you've clicked Connect, Chrome will ask you to grant permission to the folder via a browser permission prompt. You need to click Allow here.

If everything went well, you'll now be able to use the project folder as part of your Workspace and edit files from your project directly within DevTools, and also persist changes that you made during debugging to your project source.