在做前端開發時，我們需要用到一些調試工具用來調試我們的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文件的壓縮和解壓縮