How to debug the Javascript code of a Vue.js application using Visual Studio Code

This blog post is a short cheat sheet, how to setup Vue.js debugging in Visual Studio Code, when you run the application in a Chrome Browser. I used the example source code of the Cloud Native Starter project.

If you debug a Vue.js application, you usually need two kinds of debugging.

First debug and inspect the frontend page itself: such as HtmlCss and so on.

Second debug the logic of the Javascript code for the application.

First debug and inspect the frontend page it self: such as HtmlCss and so on

That can be easily realized by adding the Vue.js devtools to the Chrome browser, which you find here Vue.js devtools. The image below displays a screen shot of the chrome extension.

The gif below shows an example usage.

Second debug the logic of the Javascipt code of the application.

You can also visit directly the instruction in the Vue.js Debug documentation, but here are the steps I want to note related to that topic.

Step 1: Ensure you have setup a Visual Studio Code workspace

To do that you can also follow the instructions in the Visual Studio Code documentation.

Simplified: Create a folder and save the *.code-workspace file into a folder. The image below shows an example.

Step 2: Add a Debugger for Chrome extension to Visual Studio Code

Debugger for Chrome “Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.”

This will later start a controlled Chrome browser instance

Step 3: Add a debug configuration to the Visual Studio Code workspace

Add a debug configuration to the launch.json file. In the following image you see folder structure used for that example.

Step 4: Configure .vscode/launch.json

This is the content of .vscode/launch.json file. In this case the “url” and “webRoot” are customized, to my application needs.

  • "url": "http://localhost:8080" the URL and PORT of your local Vue.js application
  • "webRoot": "[YOUR_PATH_TO_THE_CODE]/src" the path to the source code of your Vue.js application
{
     "type": "chrome",
     "request": "launch",
     "name": "vuejs: chrome",
     "url": "http://localhost:8080",
     "webRoot": "[YOUR_PATH_TO_THE_CODE]/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
     }
}

Step 4: Create a file called vue.config.js

Create a file called vue.config.js in the root folder of your Vue.js project.

// vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
 module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

The image below shows the vue.config.js file where I used it in the example source code.

Step 5: Change to the debug view and start the debug configuration “vuejs: chrome”

As you see in the give below this will start a controlled Chrome browser instance and invokes the configured URL http://localhost:8080.

Step 6: Now start your Vue.js application and watch the stop at your debug point

In my case I first do an authentication at Keycloak and then content will be loaded from a microservice. In the gif you see in the gif below you see the debug point where I placed it, as .

Summary

It’s awesome that with Vue.js you are able to use two ways for your debugging one to inspect the frontend page itself Html, Css and so on and one for the logic in your Javascript code of your application.



I hope this was useful for you and let’s see what’s next?

Greetings,

Thomas

#vue, #visualstudiocode, #vscode, #javascript, #debug

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.