在做前端开发时，我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码，俗话说预先善其事必先利其器，这里我给大家推荐几款比较常用的前端调试工具。
1、Chrome的开发者工具
这是我现在用的最多的一个浏览器调试工具，在经过了几个版本的更新，其调试功能也日渐强大。在打开Chrome后可以通过点击“F12”功能键、“Ctrl+Shift+I”或者“Ctrl+Shift+J”打开开发者工具。也可以通过工具 - 开发者工具 打开。
2、firefox插件Firebug
这是我在Chrome浏览器出现之前常用的调试工具，在Chrome出来之后就很少使用了，可以在firefox浏览器 - 添加附件 - 搜索firebug - 安装，然后在firefox浏览器的右上角会有个虫子的图标，那个就是firebug了。除此之外，firefox也内置了开发者的工具，可以如下图中的按钮打开开发者工具。
3、IE的开发者工具
某些内部应用的项目都是对IE有较好的支持的，所以这里也顺带提一下IE其实也是有对应的调试工具的，在之前的IE版本中内置的调试工具是相当的丑陋的（我记得是这样的），那目前IE11的调试工具功能也是比较强大，同样可以通过F12打开
4、IETest，IE浏览器版本切换工具
在开发Web项目的时候，经常会碰到需要在不同的IE版本中检查完成的网页是否能正常展现，这时就需要IETest帮我们模拟网页在IE5.5、IE6、IE7、IE8、IE9以及IE10等浏览器中的兼容性，让我们看一下辛苦做好的CSS样式或网站版面是否可以在各个主要浏览器正常显示。
5、Emmet
emmet算是HTML/CSS开发中的神器，如果做前端开发肯定会被emmet强大的功能吸引，他使用了仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，对多种文本编辑器都有较好的支持，下载地址：http://www.emmet.io
6、JSON格式校验工具
JSON的使用越来越平凡，对JSON格式的校验也是很常见的，推荐2个比较方便的JSON校验工具，一个是在线的网站
https://jsonformatter.curiousconcept.com/
另外一个是Notepad++ 的Json Viewer插件
7、JS压缩和解压缩工具
现在的很多JS插件都是采用min压缩格式提供的，以提高其网络传输速度，但问题来了，我们有时需要查看被压缩的js文件的源码，而另一些时候我们又需要将我们写的js文件进行压缩，这里提供几种方式：
在线的压缩解压缩工具：
http://tool.oschina.net/jscompress
http://tool.css-js.com/
本地的，我一直是使用notepad++的一个JSTool工具来实现的，该工具能很容易的实现对JS文件的压缩和解压缩
