如何在 WebStorm 中调试 Vue 代码

前言

• Vue.js 是一个流行的前端框架，而 WebStorm 是一个强大的 IDE，它为 Vue 开发者提供了丰富的功能，包括代码补全、实时预览和调试工具。当我们在使用 WebStorm 开发 Vue 项目时，最关键中的一步是学会如何使用 WebStorm 断点调试我们的 Vue 代码，下面我们来看看在 WebStorm 中调试 Vue.js 代码的详细步骤。

详细步骤

Vue 项目添加 devtool

• 首先第一步在Vue 项目添加 devtool 配置。

// 在vue.config.js文件中添加devtool设置
module.exports = {
 configureWebpack: {
   devtool: 'source-map'
 }
}

添加 JavaScript Debug

点击Edit Configurations

添加 JavaScript Debug

Debug 配置

• URL：填写待调试项目运行时的域名和端口号
• Browser：选择调试运行的浏览器，默认即可

运行项目进行调试

• 第一步运行我们的待调试项目，比如 npm run dev 或 npm run serve，项目运行后，注意检测生成的访问 URL 和我们 JavaScript Debug 配置是否一致。
• 第二步使用 Debug 模式运行我们的 JavaScript Debug ，如果配置正常，这时候会自动打开我们配置的 URL ，比如上文中提到的 http://172.30.8.245:8080/。

个人简介

👋 你好，我是 Lorin 洛林，一位 Java 后端技术开发者！座右铭：Technology has the power to make the world a better place.

🚀 我对技术的热情是我不断学习和分享的动力。我的博客是一个关于Java生态系统、后端开发和最新技术趋势的地方。

🧠 作为一个 Java 后端技术爱好者，我不仅热衷于探索语言的新特性和技术的深度，还热衷于分享我的见解和最佳实践。我相信知识的分享和社区合作可以帮助我们共同成长。

💡 在我的博客上，你将找到关于Java核心概念、JVM 底层技术、常用框架如Spring和Mybatis 、MySQL等数据库管理、RabbitMQ、Rocketmq等消息中间件、性能优化等内容的深入文章。我也将分享一些编程技巧和解决问题的方法，以帮助你更好地掌握Java编程。

🌐 我鼓励互动和建立社区，因此请留下你的问题、建议或主题请求，让我知道你感兴趣的内容。此外，我将分享最新的互联网和技术资讯，以确保你与技术世界的最新发展保持联系。我期待与你一起在技术之路上前进，一起探讨技术世界的无限可能性。

📖 保持关注我的博客，让我们共同追求技术卓越。