How to fix the issue that often occurs when debugging Vue projects structured with Vite?

I encountered such an issue when debugging a Vue project structured with Vite:

Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/edge-neterror.rollup.js.map: Unsupported protocol "chrome-error:"

After some research, I found the root cause of the issue: the port defined in the node configurations > url in the launch.js file is not as same as the default port for Vite.

So, to resolve this issue, we simply need to ensure the both ports are the same.

If you prefer to using the default port for Vite, just set the url property in the launch.json file to match the URL where your Vite dev server is running. For a default setup, this would be http://localhost:5173, where 5173 is the default port for Vite.

If you wish to use a custom port (e.g., 8080), you need to adjust both your Vite configuration in the package.json file and the launch.json by changing the dev property under the node scripts in the package.json file to include the --port option with your desired port number, like vite --port 8080 and updating the launch.json file's url property to reflect this change, which would be http://localhost:8080.