npm create svelte@latest
npx svelte-add@latest tailwindcss
pnpm i tailwindcss@latest -D
const config = {
// ...
vitePlugin: {
inspector: true
},
}
The debugger can be enabled using Meta + Shift
(Ctrl + Shift on windows)
{
"version": "2.0.0",
"tasks": [
{
"label": "Run dev server on startup",
"type": "shell",
"command": "npm run dev",
"windows": {
"command": "npm run dev"
},
"presentation": {
"reveal": "always",
"panel": "new"
},
"runOptions": { "runOn": "folderOpen" }
}
]
}
If you want your website to automatically open, edit the dev script in your package.json to this
svelte-kit dev --open
run npm --node-options --inspect run dev
and open the devtools in the browser, you should have a small node icon at the top left where you can attach to the debugger