經常使用的前端調試工具

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