Webstorm+Chrome 调试Vue项目

前言

在项目开发中,Debug模式是非常有必要的，后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要单独去配置一些东西,

所以这里整理自己搭建成功的过程分享出来。可能不同的Webstorm版本会导致效果不一样，所以这里先列出我的版本。

Webstorm版本: 2018.3.4

一、新建Vue项目

为了演示一个完整的示例,所以从创建项目开始，这里通过 vue脚手架命令 开始创建一个项目

 vue init webpack debug-vue

如果运行成功就会创建一个名称为 debug-vue 的vue项目,我们通过 WebStorm 打开这个项目并运行,启动命令

npm run dev

启动成功后查看页面

这就代表这个项目运行成功,这里我们在代码添加一个按钮,等下我们通过点击这个按钮来查看Debug模式是否能够成功到打的断点处。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>首页</h2>
    <button @click="testMethods">测试bug断点</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    testMethods: function () {
      alert("你点我我就跳出来")
    }
  }
}
</script>

改好之后，再来查看页面 就变成这样了

很明显可以看出，当点击这个按钮会弹出一个框，说明绑定点击事件成功。

二、WebStorm配置

1、设置调试器端口

2、 添加调试配置

这样Webstorm就配置好了。

三、测试

第一步 先在指定代码中添加一个断点,然后启动项目

第二步 启动项目，命令

npm run dev

启动成功后

第三步 启动上面配置的调试按钮

第四步 测试

很完美的断点打过来了,在展示一个完整的请求过程

补充

如果你的不成功，那你就试一试其他人说得,步骤要比上面多几步 WebStorm+Chrome插件JetBrains IDE Support进行实时调试

说明：他这里多加了一个chrome插件，但我是没有加就可以成功的，如果上面的不行可以考虑加个插件试一试,因为谷歌下载插件需要FQ，所以这里也找了个不用FQ

就可以下的JetBrains IDE Support

别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(34)