Debugging Quasar Framework Applications Using Visual Studio Code (VS Code) Editor

Hello,

I was recently assigned and trained to work on future sprints for an existing project using Quasar Framework/Vue as Front-End and ASP.NET Core API as the back-end. Given that the project has been established for a couple of years now and has been significantly updated by the developer/architect in the US, learning through this involves sharing is caring, debugging and stepping through the code itself. With the goal at hand, I did some research on how to debug Quasar projects using the Visual Studio Code editor. After a few hours, I managed to debug the application based from the provided steps below.

1. Create a launch.json file if you have not do so. To create a launch.json file, click the Debug button on the left side of the editor and click 'create a launch.json file' link.

This will create a launch.json file inside .vscode folder.

2. Replace the configurations object properties in the launch.json file with the settings below. Make sure to change the port of the url given that 8080 has already been used by the system.

	{
		// Use IntelliSense to learn about possible attributes.
		// Hover to view descriptions of existing attributes.
		// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
		"version": "0.2.0",
		"configurations": [
			{
				"type": "chrome", 
				"request": "launch",
				"name": "Quasar App: chrome",
				"url": "http://localhost:5000", //original port is 8080
				"webRoot": "${workspaceFolder}/src",
				"breakOnLoad": true,
				"trace": true,
				"sourceMapPathOverrides": {
				  "webpack:///src/*": "${webRoot}/*"
				}
			}
		]
	}

3. Open package.json and enable the devtool with source-map value inside build object in quasar.conf.js file.

      build: {
		  //...

		  // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
		  extendWebpack(cfg) {
			// ...
		  },

		  // this is a configuration passed on
		  // to the underlying Webpack
		  devtool: 'source-map'
     },  

4. Set breakpoint(s) in your components or pages script section codes.
5. Run the project by executing the command 'quasar dev' in your vs code terminal. This will open the default page of your project in a web browser.
6. Start debugging the project by pressing F5 or click the Start Debugging (F5) button in the Run and Debug window.

7. You should be able to step-through the codes with breakpoints.

Cheers!