vue cli debugger

  1. Install the Vue CLI globally using the following command: npm install -g @vue/cli

  2. Create a new Vue project using the Vue CLI: vue create my-vue-app

  3. Change into the project directory: cd my-vue-app

  4. Install the Vue CLI Service as a development dependency: npm install --save-dev @vue/cli-service

  5. Open the project in your preferred code editor.

  6. Add a debug configuration for Vue in the "launch.json" file (located in the ".vscode" folder if it doesn't exist, create one): json { "version": "0.2.0", "configurations": [ { "name": "vuejs: chrome", "type": "chrome", "request": "launch", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/": "${webRoot}/" } } ] }

  7. Start your Vue project in debug mode: npm run serve -- --mode=development

  8. Set breakpoints in your code where you want to debug.

  9. Open the Run view in VS Code and select the Vue debug configuration you added.

  10. Click the green play button or press F5 to start debugging.

  11. Interact with your Vue application, and the debugger will pause at the breakpoints you set.

  12. Use the debugging tools in VS Code to inspect variables, step through code, and analyze the application's behavior.