调试vue build之后的js文件
调试 dist
目录下的 JavaScript 文件可以按照以下步骤进行:
1. 确保 Source Maps 正常生成
确认你的构建配置中已启用 Source Maps,确保 .map
文件与构建后的 .js
文件位于同一目录。
2. 启动一个本地服务器
使用本地服务器来服务 dist
目录,这样浏览器可以正确处理文件路径。例如,可以使用 http-server
:
npm install -g http-server
http-server dist
3. 打开 Chrome DevTools
- 在浏览器中打开你的应用程序(例如
http://localhost:8080
)。 - 使用
F12
打开 Chrome DevTools。
4. 导航到 Sources 面板
- 在 DevTools 中,转到“Sources”标签页。
- 你应该能看到项目的文件结构,包括原始的
.vue
文件和生成的 JavaScript 文件。
5. 设置断点
- 找到生成的 JavaScript 文件或相应的
.map
文件,点击行号设置断点。 - 刷新页面,调试器将在断点处暂停,你可以检查变量、调用堆栈等。
6. 调试
- 使用调试工具的功能(如步进、监视变量等)进行调试。
确保你的浏览器没有缓存老版本的文件,必要时可以清除缓存。通过这些步骤,你应该能顺利调试 dist
目录下的 JS 文件!