Javascript 开发必备的一些工具

JavaScript在现代Web开发中起着关键作用;像jQuery,MooTools的,Prototype等JS库显著的提高了我们的开发效率。然而,随着富互联网应用(RIA)的迅速普及,编写强大而可靠的JavaScript的需求不断上升。

无论你是一个JavaScript新手还是经验丰富的开发人员,您使用的工具有直接影响您的工作效率。由于开源运动,拥有强大的工具,并不意味着你必须花多少钱,其实你甚至可能不会需要花费什么。这里是一个真正有用的免费工具为JavaScript开发人员的清单。

Testing

  • JSLint – The JavaScript Verifier
    JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.
  • JsUnit
    JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript. It is essentially a port of JUnit to JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and multiple machines running different OSs.
  • YUI Test
    YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions.
  • Obtrusive JavaScript Checker
    Available as a Firefox extension, Greasemonkey user script, as well as a Ubiquity command; Obtrusive JavaScript Checker is a tool to traverse through all elements in a web page, and when it finds a HTML element with inline events (which is bad, JavaScript should be unobtrusive), it highlights it with a red border.
  • Crosscheck
    Crosscheck is an open source testing framework for verifying your in-browser JavaScript. It helps you ensure that your code will run in many different browsers such as Internet Explorer and Firefox, but without needing installations of those browsers.
  • JSLitmus
    JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests.
  • JavaScriptMVC’s Test Plugin
    Testing library for JavaScriptMVC that provides event simulation, unit testing, Ajax fixtures, and a console.

Debugging

  • Javascript Debug Toolkit
    JavaScript Debug Toolkit is a an eclipse plugin to debug JavaScript cross browser,it can debug JavaScript in IE,Firefox,Safari,Chrome,Opera and even in mobile browser.
  • Firebug
    One of the post popular web developer tool – Firebug is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. It provides JavaScript logging and debugging console with useful features such as AJAX requests logging, JavaScript interpreter, DOM explorer and more. You can use Firebug Lite in IE, Opera, and Safari.
  • Venkman
    Venkman provides a powerful JavaScript debugging environment for Gecko-based browsers. The debugger is available as an add-on for Firefox & Mozilla. Venkman is both a graphic and a console debugger. Features such as breakpoint management, call stack inspection, and variable/object inspection are available from the user interface and from console commands, letting you work in the way you are most accustomed to.
  • NitobiBug
    NitobiBug is a browser-based JavaScript object logger and inspection tool – similar to Firebug. NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications.
  • DamnIT
    DamnIT is a free service that emails you when a user encounters a JavaScript error in your web page.
  • JS Bin
    JS Bin is an online  web application specifically designed to help JavaScript developers test code snippets within some context, and debug the code collaboratively. JS Bin allows you to online edit and test JavaScript and HTML code. Once you’re done you can save, and send the URL to a peer for review or help.
  • Blackbird
    A lot of JavaScript developers simply use alert() to show various messages in order to debug their code. Blackbird offers a simple way to log messages in JavaScript and an attractive console to view and filter them.

HTTP Monitoring

  • Fiddler
    Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data.
  • TamperData
    TamperData is a Firefox extension to track and modify http/https requests. You can use it for security testing of Web based applications and tracking request/responses.
  • Live HTTP Headers
    Allows you to view HTTP headers of a page while browsing. You can use Live HTTP Headers for debugging web application, find out which kind of web server the remote site is using, and see cookies sent by remote site.

Documentation

  • jGrouseDoc
    jGrouseDoc allows generation of API documentation from the comments in the source code. The tool allows you to document all the necessary constructs that you might need – not only functions and variables, but also classes, interfaces, namespaces, packages and others. And it does not matter at all which JavaScript frameworks are being used – you can document your code the way you want it, not the way it is being imposed by a framework or a tool.
  • JSDoc Toolkit
    A documentation generator for JavaScript. Written in JavaScript; it automatically generates template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.

Compression

  • Online Javascript Compression Tool
    An online JavaScript compressor that allows you to compress your JavaScript files using a few different compression algorithms like JSMin and Packer. Compressed JavaScript files are ideal for production environments since they typically reduce the size of the file by 30-90%.  Most of the filesize reduction is achieved by removing comments and extra whitespace characters that are not needed by web browsers or visitors.
  • Scriptalizer
    An Online tool that combines multiple JavaScript files into one.
  • Dojo ShrinkSafe
    A Java command line utility that allows you to reduce the size, and therefore latency, of JavaScript by browsers. Instead of brittle regular expressions, the Dojo compressor is based on Rhino, a JavaScript engine from the Mozilla project. Being based on a real parse stream, the Dojo compressor can get a better idea for the context of a token (variable name, etc.) than the regular-expression based tools.
  • YUI Compressor
    The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

Formatting

  • JavaScript Beautifier
    This beautifier can process your messy or compacted JavaScript, making it all neatly and consistently formatted and readable.

Editors & IDE

  • Aptana Studio
    Aptana Studio is a complete web development environment that provides JavaScript code completion and debugging, HTML/CSS/JavaScript code assist, and support for all the leading Ajax libraries. Aptana Studio even provides code assist for any JavaScript in your page – including your own!
  • Komodo Edit
    Komodo Edit is a free – open source editor that provides auto complete, call tips, multi-language file support, syntax coloring, syntax checking, Vi emulation, Emacs key bindings, and more. One of the most useful feature is ability to extend Komodo Edit. You can find numerous extensions useful for JavaScript developers (e.g., JSLint plugin for KomodoVenkman JavaScript Debugger, etc).
  • Spket IDE
    Spket IDE is powerful toolkit for JavaScript and XML development. The powerful editor for JavaScript, XUL/XBL and Yahoo! Widget development. The JavaScript editor provides features like code completion, syntax highlighting and content outline that helps developers productively create efficient JavaScript code. Spket IDE is free for non-commercial use.

Other Tools

  • Google’s AJAX APIs Playground
    The AJAX API Playground is loaded with samples for Google JavaScript APIs (Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries and Earth, etc) that you can edit and run to help you explore what Google’s APIs have to offer. There are also save and export features. The save feature allows you to hold onto an edited sample so you can continue working on it later, while export lets you modify a sample and publish the code to a permanent URL.
  • QuirksMode – Compatibility Tables
    Most popular source to check compatibility status of major web browsers for CSS2, CSS3, DOM Core, DOM HTML, DOM CSS, DOM Events and CSS Object Model View.
  • HTML to JavaScript Convertor
    The HTML to JavaScript convertor takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.
  • Glimmer
    Glimmer is a desktop application that allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. It allows you to easily create interactive experiences like rotating photo-galleries/mastheads,drop-down navigation, hover effects, or custom animations.
  • jQuery Function Builder
    You can use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.
  • JavaScript Regex Generator
    An online tools for creating regular expression

Other Browser Extensions

  • Web Developer Extension For Firefox, Flock & Seamonkey
    The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools including ability to validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, testing web forms, change XHTML on-the-fly, inspect HTTP headers information, etc.
  • Opera Dragonfly
    Opera Dragonfly is a cross device, cross platform debugging environment for the Opera browser—debug JavaScript, inspect and edit CSS and the DOM, and view any errors on your mobile or computer.
  • Developer Toolbar For IE6/7
    The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages

Cheat Sheets

发布者

Rolf

伪文艺IT攻城师,热爱前端,热爱互联。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[喜欢] [嘻嘻] [奋斗] [问号] [鼓掌] [泪] [酷] [强] [耶] [握手] [心] [给力] [神马] [围观] [奥特曼] more »