In my case I first do an authentication at Keycloak and then the content will be loaded from a microservice. Step 5: Change to the debug view and start the debug configuration “vuejs: chrome” ¶Īs you see in the gif below this starts a controlled Chrome browser instance and invokes the configured URL Step 6: Now start your Vue.js application and watch the stop at your debug point ¶ The image below shows the file where I used it in the example source code.
In the following image you see a folder structure used for that example. This start a controlled Chrome browser instance Step 3: Add a debug configuration to the Visual Studio Code workspace ¶Īdd a debug configuration to the launch.json file.
Step 2: Add a Debugger for Chrome extension to Visual Studio Code ¶ĭebugger for Chrome “Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.” Simplified: Create a folder and save the *.code-workspace file into a folder. You can also simply follow the instructions in the Visual Studio Code documentation. Step 1: Ensure you have setup a Visual Studio Code workspace ¶ 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. Second debug the logic of the Javascipt code of the application.
The image below displays a screen shot of the chrome extension. That can be easily realized by adding the Vue.js devtools to the Chrome browser, which you find here Vue.js devtools. First debug and inspect the frontend page it self: such as Html, Css and so on ¶ Second debug the logic of the Javascript code for the application. If you debug a Vue.js application, you usually need two kinds of debugging.įirst debug and inspect the frontend page itself: such as Html, Css and so on. I used the example source code of the Cloud Native Starter project. 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.
0 kommentar(er)
