WebStorm + Chrome 调试 Vue 项目

一、安装Chrome插件

JetBrains IDE Support

二、设置插件监听端口和WebStorm Debugger端口一致

JetBrains IDE Support 端口

WebStorm + Chrome 调试 Vue 项目_第1张图片

File --> Settings --> Build,Execution,Deployment --> Debugger

WebStorm Debugger 端口

WebStorm + Chrome 调试 Vue 项目_第2张图片

三、 WebStorm设置JavaScript Debug

设置debug端口和项目开发端口一致(根据自己的项目端口设置

设置项目 src  Remote URL  webpack:///src

WebStorm + Chrome 调试 Vue 项目_第3张图片

四、先运行项目,在运行debug

npm run dev 运行项目,项目运行成功之后在运行 debug

WebStorm + Chrome 调试 Vue 项目_第4张图片

五、Debug 效果

项目文件中打断点,现在就可以调试啦 ε≡٩(๑>₃<)۶ 一心向学

WebStorm + Chrome 调试 Vue 项目_第5张图片

WebStorm + Chrome 调试 Vue 项目_第6张图片

你可能感兴趣的:(Vue,Idea,JavaScript,westorm,vue,debugger)