14款優秀的JavaScript調試工具大盤點

JavaScript是一種非常簡單的語言，一般說來任何人都可以在幾小時內掌握它的基本知識。

然而就像其他任何語言一樣，JavaScript存在著一些可以輕易避免的常見錯誤和不好的做法。開發人員喜歡使用這個腳本語言來改善用戶界面，提供豐富多彩的功能，或者在網站上制作各種互動元素。

不過，調試JavaScript對正在開發web開發人員而言可以說是一項相當痛苦又艱巨的任務。因此我們收集了一些最好的JavaScript調試工具，希望可以幫助你調試腳本，以實現更精確的結果。誠摯地希望這些我們推薦的工具能為你帶來方便，祝你編程愉快！

1.Json Formatter & Validator

JSON Formatter是用來協助調試的。JSON的數據輸出為了節省空間，通常無需換行，所以實際閱讀和理解的時候就會非常的困難。此款小工具有望通過格式化JSON數據，從而使得它能便于我們人腦的閱讀和調試。

官方網站：http://jsonformatter.curiousconcept.com/

2.Debug

Debug是一個小型的用于記錄調試消息的庫。由于它只對console.log周圍進行封裝，所以在Node和瀏覽器上都可以工作。它可以讓你過濾日志輸出而不改變你的源，同時還可以輸出時間差，讓你輕松知道日志信息用了多少時間。

官方網站：http://smalljs.org/logging/debug/

3. JS Hint

JSHint是一款社區驅動工具，用于檢測JavaScript代碼中的錯誤和潛在問題，以及強制執行團隊的編碼約定。它適應性非常好，能輕松適合你需要的特定的編碼規則和環境。

官方網站：http://www.jshint.com/

4.Grunt

Grunt是一款適合JavaScript項目的基于任務的命令行構建工具。它允許你在項目中使用下列預定義的任務：連接文件，使用JSHint驗證文件，使用UglifyJS壓縮文件，使用節點單元運行單元測試，等等。

官方網站：http://gruntjs.com/

5. JS Bin

JS Bin是一款專為協助avaScript和CSS代碼的分支測試片段而設計的web應用程序，在給定環境下，調試代碼進行和諧工作。 JS Bin允許編輯和測試JavaScript和HTML。你如果覺得ok的話，還可以保存并發送URL給小伙伴進行審查或尋求幫助。

官方網站：http://jsbin.com/

6. JavaScript Shell

一個支持JavaScript和DOM的命令行界面。

官方網站：http://www.squarefree.com/shell/

7. JavaScript Debugger

Venkman是Mozilla的JavaScript Debugger的代號。Venkman旨在為Mozilla提供一個基于的瀏覽器的強大的JavaScript調試環境。

官方網站：https://addons.mozilla.org/en-US/firefox/addon/javascript-debugger/

8. JSdt

JavaScript Debug Toolkit是一款允許你在IE、火狐、Safari、chrome、opera、移動IE瀏覽器、手機Opera瀏覽器等瀏覽器上調試JavaScript 的軟件。它適用于所有支持ajax的瀏覽器。

官方網站：https://code.google.com/p/jsdt/

9. DebugBar

Companion.JS是一款適用于IE的JavaScript調試器，它具備很多功能，如詳細的JavaScript錯誤報告、控制API功能的firebug，打開Companion.JS面板的工具欄圖標。

官方網站：http://www.my-debugbar.com/wiki/CompanionJS/HomePage

10.Simple State Manage

Simple State Manage（SSM）是一款適用于響應式網站的輕量級、易于使用的JavaScript狀態管理器。它不需要任何JavaScript框架，就可以用一 種干凈利落的方式處理特定的布局代碼。你也可以定義斷點，并封裝所有的JavaScript在該斷點處執行。一旦到達另一個斷點，SSM將禁用以前所有的 自定義代碼，并觸發新的代碼。此外，該管理器還配備了完整的API、調試器和插件用于支持進一步的擴展。

官方網站：http://www.simplestatemanager.com/

11. Uninson.js

Unison.js是一個很小的腳本（壓縮后小于1KB），只允許我們聲明一次斷點，但是這些斷點既可用于JavaScript也能用于標記。它需 要預處理器，如SASS、LESS和Stylus來執行功能。而且，在后臺，它會使用位于頁面頭部的font-family屬性和標題標簽來存儲信息。它 的調試功能允許你打印斷點以方便查閱。

官方網站：http://bjork24.github.io/Unison/

12.Tutti

Tutti是一款開源Web應用，能讓你在同一時間在多個Web瀏覽器上交互執行JavaScript。使用也非常簡單，你只需要創建一個會話，然 后通過復制粘貼瀏覽器生成的URL，連接到那個房間就可以了。然后，當你執行來自shell的JavaScript命令時，通過技術，如 Socket.IO、Node.js和WebSocket的幫助，該命令就能在每個相連的瀏覽器上被執行。簡單地說，這是一個用于調試 JavaScript和分析瀏覽器間不同的非常方便的資源。

官方網站：http://tutti.tobyho.com/

13.Firebug

Firebug集成了Firefox，當你在瀏覽的時候，大量的開發工具隨時待命。你可以實時地在任何網頁編輯、調試和監控CSS、HTML和JavaScript。

官方網站：https://addons.mozilla.org/en-US/firefox/addon/firebug/

14.Dragonfly

這是一個你可以掌控的完整的工具套件。逐句通過代碼，操作DOM、監控網絡流量、搜索、過濾、等等等等。無論你是開發人員抑或是設計師，Opera Dragonfly都能為你提供全面的工具。

官方網站：http://www.opera.com/dragonfly/