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


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

调试 css 上线 JavaScript

明智十七年 10 years, 12 months ago

想用未压缩的文件调试:

  • 用fiddler代理到本地的文件,通过调试本地的文件debug
kanloli answered 10 years, 12 months ago

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

MIKU理 answered 10 years, 12 months ago

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

千年组最高 answered 10 years, 12 months ago

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

傳說中的禦姐A answered 10 years, 12 months ago

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

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

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

无数的小明 answered 10 years, 12 months ago

代理。Fiddler。

傲娇女仆酱 answered 10 years, 12 months ago

难道没有 source map 吗?

萝莉捡苹果 answered 10 years, 12 months ago

如果是自己的项目可以,可以在发布的时候生成三份东西
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/

红茶护手霜 answered 10 years, 12 months ago

Your Answer