Web前端开发所用的调试工具

2019独角兽企业重金招聘Python工程师标准>>>

Web前端开发中，为编写高效的HTML/CSS/JavaScript，优化Web前端性能，不可避免要分析HTTP请求头和响应头，调试HTML/CSS/JavaScript。这时候，我们就需要用到一些Web前端的开发调试工具。以下的工具，是Web前端工程师最常用的：

1.FireBug
2012年以前，火狐狸几乎是所有前端开发者最喜欢的浏览器，基于FireFox的插件FireBug成了Web前端工程师开发调试网页的首选利器。

2.Chrome Developer Tools
自从2011年FireBug的开发者J.Barton跳槽到Google，负责开发Chrome Developer Tools后，Chrome Developer Tools就有了本质性的变化。于是，Web前端开发工程师最喜欢的浏览器又变成了Chrome，Chrome Developer Tools也就顺理成章成为开发调试网页的不二利器了。

3.Fiddler 2
FireBug和Chrome Developer Tools虽好，只是分别针对FF和Chrome，那么有没有针对所有浏览器或者针对HTTP协议的调试工具呢？那就是Fiddler 2了。

这些工具都提供了种类繁多的功能，要完全掌握并非易事。初学者打开一看，密密麻麻的，往往有无从下手的感觉。其实呢，工具的使用很简单，无它，唯手熟尔。初学者有无从下手的感觉，是因为不了解工具背后的原理而已。

要熟练使用这些工具，咱们还得从基础着手。个人认为，以下是熟练使用这些工具的前提：
1）HTTP协议的基础知识。去下载一本《HTTP协议权威指南》，仔细研读吧。
2）浏览器解析原理。渲染引擎、JS引擎的工作流程、重绘、重排相关知识。
3）CSS规范。去W3C网站看CSS官方规范。
4）HTML/CSS/JavaScript优化知识。去下载《高性能网站建设指南》、《高性能网站建设进阶指南》、《高性能JavaScript编程》等基本性能优化的书全面阅读实践。
5）Restful Web Services架构原理。用搜索引擎查查咋回事，好好理解一下。
6）JSON
7）......

后续学习中，我们将一步一步将上述内容融入课程中。

转载于:https://my.oschina.net/xiaojichao/blog/137305