常用的前端调试工具

时间:2021-06-04 11:00:09

 

 

在做前端开发时,我们需要用到一些调试工具用来调试我们的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文件的压缩和解压缩

常用的前端调试工具