Vue-CLI 3.x | WebStorm + Chrome插件调试 Vue 2.x

STEP1:  vue.config.js中配置Webpack选项

Vue-CLI 3.x | WebStorm + Chrome插件调试 Vue 2.x

STEP2: Chrome网上应用商店中搜索"JetBrains IDE Support" 并下载

Vue-CLI 3.x | WebStorm + Chrome插件调试 Vue 2.x

STEP3: WebStorm中进行配置

Run > Edit Configurations > Javascript Debug, 填入地址的URL,选择浏览器,点击Apply。

Vue-CLI 3.x | WebStorm + Chrome插件调试 Vue 2.x

STEP4: WebStorm中设置断点,并在浏览器插件中**

在JetBrains IDE Support图标上点击 “Insepect In WebStorm”;触发断点时见下图。

Vue-CLI 3.x | WebStorm + Chrome插件调试 Vue 2.x

Vue-CLI 3.x | WebStorm + Chrome插件调试 Vue 2.x