怎么使用webstorm来调试vue中js代码

在浏览器中调试js代码很不舒服，所以查阅了各位前辈的博客，再此记录一下：

1. 生成项目，我的项目中的package.json入下图：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/cli": "^3.3.0",
    "axios": "^0.18.0",

2. 使用webstorm打开项目，点击terminate，输入命令 npm run serve 或者 yarn serve

 

3. 添加一个js的运行配置

 

4. 点击debug，会打开一个新的chrome窗口

找到我们的项目中的js脚本，添加一个断点，然后在浏览器中操作，当运行到断点后，可以查看断点出的变量的值

其他语言debug时，都是一键式，但是vue这个debug，需要分2步来，就是步骤2和步骤3

另外，断点和运行到光标处很好用，但是那个step over，无法运行到下一条语句，总是进入到一个奇怪的代码页面，不知道为什么。