Better Support for Debugging Config

[Danielku15]

Description

As a developer using Vite I want to be able to debug my code in vite.config.ts via VSCode so I can troubleshoot any problems in plugins or other code snippets added in the file.

I start the debugging by adding debugger; statements and then launch vite via:

• using vite commands in the JavaScript Debug Terminal
• Opening the package.json and hit debug on the inline hint

Suggested solution

Vite currently deletes the temporary node_modules/.vite-temp/vite.config.ts.timestamp-.... file after it was loaded:

vite/packages/vite/src/node/config.ts

Lines 1999 to 2012 in c9e086d

	const tempFileName = nodeModulesDir
	? path.resolve(
	nodeModulesDir,
	`.vite-temp/${path.basename(fileName)}.${hash}.mjs`,
	)
	: `${fileName}.${hash}.mjs`
	await fsp.writeFile(tempFileName, bundledCode)
	try {
	return (await import(pathToFileURL(tempFileName).href)).default
	} finally {
	fs.unlink(tempFileName, () => {}) // Ignore errors
	}
	}
	// for cjs, we can register a custom loader via `_require.extensions`

It would be great if Vite would detect that a debugger is currently attached and keep the file in this case.

According to this StackOverflow Post this could be achieved by checking whether there is a inspector url defined (works fine for me in VSCode). But also to check for some special node argvs is a potential candidate.

My proposal would be to use something like:

import inspector from 'inspector';

function isInDebugMode() {
    const argv = process.execArgv.join();
    return inspector.url() !== undefined || argv.includes('inspect') || argv.includes('debug') || process.env.VITE_KEEP_CONFIG;
}

Alternative

1. Only add an environment variable. (a bit less convienient as you have to remember to set it every time).
2. Add a config key which can be filled by the user to keep the transpiled config.
3. Ensure (somehow?) that sourcemaps are working and breakpoints can be set in the original file directly. Currently source maps are generated but they do not work for VS Code Debugging.

Additional context

nodejs/node#9617

vite/packages/vite/src/node/config.ts

Lines 1999 to 2012 in c9e086d

	const tempFileName = nodeModulesDir
	? path.resolve(
	nodeModulesDir,
	`.vite-temp/${path.basename(fileName)}.${hash}.mjs`,
	)
	: `${fileName}.${hash}.mjs`
	await fsp.writeFile(tempFileName, bundledCode)
	try {
	return (await import(pathToFileURL(tempFileName).href)).default
	} finally {
	fs.unlink(tempFileName, () => {}) // Ignore errors
	}
	}
	// for cjs, we can register a custom loader via `_require.extensions`

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hi-ogawa]

Can you try #19110 (comment)?

[Caaalabash]

Can you try #19110 (comment)?

It works for me

[Danielku15]

I can also confirm that it works. Maybe a candidate to add some info about this in the docs?

The CONFIG LOADING box seems like a good candidate to leave a remark:
https://vite.dev/config/#configuring-vite