How to use Webstorm and Chrome to debug Vue projects

Preface

In project development, Debug mode is very necessary. Debug mode is very convenient for the backend IDEA tool, but for the frontend WebStorm, if Debug mode is enabled, some things need to be configured separately.

So here I organize the process of successful construction and share it. Different Webstorm versions may result in different results, so here is my version first.

Webstorm version: 2018.3.4

1. Create a new Vue project

In order to demonstrate a complete example, start by creating a project. Here, we use the vue scaffolding command to create a project.

vue init webpack debug-vue

If the run is successful, a Vue project named debug-vue will be created. We open this project through WebStorm and run it, starting the command

npm run dev

View the page after successful startup

This means that the project runs successfully. Here we add a button to the code. We will click this button later to see if the Debug mode can successfully reach the breakpoint.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Home</h2>
    <button @click="testMethods">Test bug breakpoint</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    testMethods: function () {
      alert("Click me and I'll pop up")
    }
  }
}
</script>

After the change, check the page again and it will look like this

It is obvious that when you click this button, a box will pop up, indicating that the click event is bound successfully.

2. WebStorm Configuration

1. Set the debugger port

2. Add debug configuration

Webstorm is now configured.

3. Testing

first step

First add a breakpoint in the specified code, then start the project

Step 2

Start the project, command

npm run dev

After successful startup

Step 3

Start the debug button configured above

Step 4

test

The above is the details of how to use Webstorm and Chrome to debug Vue projects. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!