Intensive reading of the Vue official document series 🎉

A prerequisite for

Debug the vue. js application generated by the Vue CLI in VScode.

  1. Install the Chrome
  2. Install Vscode
    1. Install the Chrome based Debugger extension: Debugger for Chrome
    2. inActivity Bar, click onDebuggerGenerated based onChrome çš„ launch.jsonConfiguration file.

For your specific environment, modify the following: launch.json file, noting that the port number in the URL is the same as the port number of your application.

{
    "version": "0.2.0"."configurations": [{"type": "chrome"."request": "launch"."name": "vuejs: chrome"."url": "http://localhost:8082/"."webRoot": "${workspaceFolder}/src"."breakOnLoad": true."sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"}}]}Copy the code
  1. Configure the Vue projectvue.config.js.
module.exports = {
    devServer: {
      port: 8082,},configureWebpack: {
      devtool: 'source-map'}},Copy the code

The key here is source-map, which maps your project’s source code to the code that has been processed by the build tool so that it can record the debugging steps in the browser and then project them into Vscdoe.

Note: If the source code does not map correctly to the processed code, it may cause the location of the breakpoint to drift, or the red breakpoint to become a transparently invalid breakpoint.

  1. Finally, you need to be in VscodeActivity BarYour configuration item is found in:vuejs: chromeAnd finally click the green start button.

Debug Typescript projects

If your Vue project uses TypeScript, the directory structure under the Webpack :// protocol may change, causing breakpoints to be unhit, drift, and so on.

One solution is to change the configuration of: sourceMapPathOverrides:

"sourceMapPathOverrides": {
    "webpack:///./src/*":"${webRoot}/*",}Copy the code

Forcibly fix breakpoint drift

Very simple, very rough, if really can not solve the breakpoint drift very well, then directly in the source code to add debugger.

alternative

  1. Use Vue matchingVue-devtoolsTool for debugging.
  2. manualdebugger.

Extension – Debug Vue in WebStorm

  1. First, make sure your project is configureddevtool:"source-map".
  2. Execute the NPM script to start the project.
  3. Click on “Edit Configurations” and open the popover below to add additions.

Note that in step 4, you need to enter the URL to start your project.

  1. Click OK to save the configuration.
  2. Finally, go back to the first step, select the debug configuration, and click the “Debug” button on the right.