自学内容网 自学内容网

调试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 文件!


原文地址:https://blog.csdn.net/exlink2012/article/details/142495432

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!