webstorm debug vue项目

webstorm debug

• vueconfig.js 中 devtool 开发环境下设置为 source-map
• npm run dev 将项目跑起来（假设项目运行在 http://localhost:9528）
• 点击edit configurations，新建一个debug配置项

• 点击 +,新建一个配置，选择 JavaScript Debug,可以为你的配置项起一个名字比如 debug, url中选择你项目运行的域名和端口，然后保存配置

• 然后以 debug 的模式运行刚刚保存的 debug配置(即选中刚刚新建的debug配置，然后点击绿色的小虫子按钮)，此时会自动打开一个新的 Chrome标签，然后在webstorm代码中打上断点就可以调试了

chrome debug

• 在 source面板中找到源码，打上断点调试即可