一个项目上线后,发现 JS 或者 CSS bug 了,该如何进行调试?

发布于 2022-08-31 20:14:50 字数 59 浏览 41 评论 0

此项目的 JS 和 CSS 经过压缩,直接使用 chrome 调试工具看到是乱码,请问这个该怎么办?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

浴红衣 2022-09-07 20:14:51

想用未压缩的文件调试:

  • 用fiddler代理到本地的文件,通过调试本地的文件debug
厌倦 2022-09-07 20:14:51

难道没有 source map 吗?

黒涩兲箜 2022-09-07 20:14:51

这时候就需要 .map 文件了,有些压缩工具同时导出 .map 文件,提供从压缩文件到源文件的索引。chrome 开发者工具支持通过 .map 映射到源文件的行,从而进行 debug。

美人骨 2022-09-07 20:14:51

+1 简单的查看在chrome控制台 sources选项下面查看页面的底部栏有个 {} ,点击以后,哗啦~

已下线请稍等 2022-09-07 20:14:50

如果是自己的项目可以,可以在发布的时候生成三份东西
1. 源代码,比如 app.js
2. 压缩后的代码,比如 app.min.js
3. Sourcemap文件,比如app.js.map,这个文件保存了 2->1 映射

在Chrome等现代浏览器中你可以开启Sourcemap功能,这样你调试app.min.js的时候就像调试app.js一样方便

参考文章:

阮一峰的博文
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
英文
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

云巢 2022-09-07 20:14:50

代理。Fiddler。

人间不值得 2022-09-07 20:14:50

只是简简单单的文件压缩,可以直接控制台查看的。在source面板中找到对应的文件,点击{}就还原了。

初与友歌 2022-09-07 20:14:50

前面说的那些方法大多只能处理压缩的文件,无法处理混淆后的文件。

刚出炉的一片文章:使用 charlesproxy 的 map local 功能,这个功能可以在当前环境中用你的本地文件替代你的线上文件。

http://blog.icodeu.com/?p=709

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文