14款優秀的JavaScript調試工具大盤點
JavaScript是一種非常簡單的語言,一般說來任何人都可以在幾小時內掌握它的基本知識。
然而就像其他任何語言一樣,JavaScript存在著一些可以輕易避免的常見錯誤和不好的做法。開發人員喜歡使用這個指令碼語言來改善使用者介面,
不過,調試JavaScript對正在開發web開發人員而言可以說是一項相當痛苦又艱巨的任務。因此我們收集了一些最好的JavaScript調試工具,希望可以幫助你調試腳本,以實現更精確的結果。誠摯地希望這些我們推薦的工具能為你帶來方便,祝你程式設計愉快!
1.Json Formatter & Validator
JSON Formatter是用來協助調試的。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/
譯文連結:http://www.codeceo.com/article/14-javascript-debug-tools.html
英文原文:Best JavaScript Debugging Tools for Developers
翻譯作者:碼農網 – 小峰
官方網站: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/
譯文連結:http://www.codeceo.com/article/14-javascript-debug-tools.html
英文原文:Best JavaScript Debugging Tools for Developers
翻譯作者:碼農網 – 小峰