经常使用的前端调试工具

在作前端开发时，咱们须要用到一些调试工具用来调试咱们的HTML、CSS或者JS代码，俗话说预先善其事必先利其器，这里我给你们推荐几款比较经常使用的前端调试工具。

一、Chrome的开发者工具

这是我如今用的最多的一个浏览器调试工具，在通过了几个版本的更新，其调试功能也日渐强大。在打开Chrome后能够经过点击“F12”功能键、“Ctrl+Shift+I”或者“Ctrl+Shift+J”打开开发者工具。也能够经过工具 - 开发者工具 打开。

二、firefox插件Firebug

这是我在Chrome浏览器出现以前经常使用的调试工具，在Chrome出来以后就不多使用了，能够在firefox浏览器 - 添加附件 - 搜索firebug - 安装，而后在firefox浏览器的右上角会有个虫子的图标，那个就是firebug了。除此以外，firefox也内置了开发者的工具，能够以下图中的按钮打开开发者工具。

 

三、IE的开发者工具

某些内部应用的项目都是对IE有较好的支持的，因此这里也顺带提一下IE其实也是有对应的调试工具的，在以前的IE版本中内置的调试工具是至关的丑陋的（我记得是这样的），那目前IE11的调试工具功能也是比较强大，一样能够经过F12打开。

四、IETest，IE浏览器版本切换工具

在开发Web项目的时候，常常会碰到须要在不一样的IE版本中检查完成的网页是否能正常展示，这时就须要IETest帮咱们模拟网页在IE5.五、IE六、IE七、IE八、IE9以及IE10等浏览器中的兼容性，让咱们看一下辛苦作好的CSS样式或网站版面是否能够在各个主要浏览器正常显示。

五、Emmet

emmet算是HTML/CSS开发中的神器，若是作前端开发确定会被emmet强大的功能吸引，他使用了仿CSS选择器的语法来生成代码，大大提升了HTML/CSS代码编写的速度，对多种文本编辑器都有较好的支持，下载地址：http://www.emmet.io

 

六、JSON格式校验工具

JSON的使用愈来愈平凡，对JSON格式的校验也是很常见的，推荐2个比较方便的JSON校验工具，一个是在线的网站

https://jsonformatter.curiousconcept.com/

另一个是Notepad++ 的Json Viewer插件

 

七、JS压缩和解压缩工具

如今的不少JS插件都是采用min压缩格式提供的，以提升其网络传输速度，但问题来了，咱们有时须要查看被压缩的js文件的源码，而另外一些时候咱们又须要将咱们写的js文件进行压缩，这里提供几种方式：

在线的压缩解压缩工具：

http://tool.oschina.net/jscompress

http://tool.css-js.com/

本地的，我一直是使用notepad++的一个JSTool工具来实现的，该工具能很容易的实现对JS文件的压缩和解压缩