JavaScript Debuggers / Unit Testing Frameworks

[Mr. Analog]

I was just reading about a new JavaScript debugging plug-in for Eclipse so I'm going to start a thread here for JavaScript debugging tools:

Firebug:
http://getfirebug.com

The premier and best supported JavaScript development platform
Includes breakpoints, runtime debugging, JavaScript console, logging and much more
Lets you interactively inspect elements on the webpage
Only available in Firefox
IE8, Safari, and Chrome are beginning to integrate similar functions

Firebug Lite:
http://getfirebug.com/lite.html

Provides a subset of Firebug's features
Includes runtime debugging, a JavaScript console, and logging but no breakpoints or extensions
Available in all browsers
Requires you to modify your webpages to support it

Blackbird:
http://www.gscottolson.com/blackbirdjs/

Attractive and lightweight JavaScript logging
Lets developers log application events on the users computer

Javascript Debug Toolkit (JSDT): (new kid on the block)
http://www.eclipseplugincentral.com/Web_Links-index-req-viewlink-cid-1372.html

Plugs into ECLIPSE
Looks/Acts like the debugger
Only a little bit of script inclusion
Windows only though

Internet Explorer Developer Tools: (old unreliable)
http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

Provides runtime debugging
Lets you interactively inspect elements on the webpage
No breakpoints or JavaScript console
Needs to be refreshed manually if the page changes (gets annoying)

Unit Testing Frameworks!

QUnit:
http://docs.jquery.com/QUnit

An automated unit testing framework for JavaScript
Part of the jQuery library
Works in IE, Firefox, Safari, Chrome, etc.
Simple, easy to read test format
Sparse on the documentation
Already included in many open source projects and the next release of Visual Studio

JSUnit:
http://www.jsunit.net/

The granddaddy of JavaScript unit testing frameworks
It shows its age a little, but it's also well tested and documented

[Darren Dirt]

this is a good "reference" thread.

So I'm adding this -- the typical testing flowchart provided by Bugzilla

http://4.bp.blogspot.com/-NWJ0rxB8yY8/TvLFAWCBbII/AAAAAAAAAp8/0pZu1Xj_omM/s1600/bzLifecycle.png

via http://www.ecmconsultant.net/2011/12/testing-flow-its-need-to-know.html

[Tom]

I think the latest versions of Chrome and Firefox now have integrated JS debugging capabilities.

[Darren Dirt]

Firebug is excellent for step-through debugging of Javascript.

The image I posted above = a flowchart to give some of us an idea of the kind of general procedures the Big Guys do to catch/squash bugs. #shouldersofgiants

[Mr. Analog]

As does internet explorer (press F12!)

[Darren Dirt]

this is a good "reference" thread.

So I'm adding this

pastebin, gisthub-- fine for code snippets/sharing.


But what about one that actually verifies that your code compiles too?

http://ideone.com/

What is ideone?
Ideone is something more than a pastebin; it's an online compiler and debugging tool which allows
to compile and run code online in more than 40 programming languages.   

How to use ideone?
Choose a programming language, enter your source code and input data into text boxes. Then check or uncheck run code (whether to execute your program) and private (whether not to list your code in the recent codes page) checkboxes, click the submit button and watch your snippet being executed.   

[Thorin]

ideone sounds cool.  Better check the license agreement, though, since you are essentially showing them your code and they may well say that they're allowed to do anything they want with it.  I would suggest against putting company proprietary code in there at least until you've thoroughly read through the license agreement.

Same warning might apply to pastebin, but pastebin isn't solely aimed at source code, whereas ideone appears to be.

Still, a cool idea if they don't use it to steal people's code.

[Mr. Analog]

Under the Performance Testing category we have JMeter

http://jmeter.apache.org/

Apache JMeter may be used to test performance both on static and dynamic resources (files, Servlets, Perl scripts, Java Objects, Data Bases and Queries, FTP Servers and more). It can be used to simulate a heavy load on a server, network or object to test its strength or to analyze overall performance under different load types. You can use it to make a graphical analysis of performance or to test your server/script/object behavior under heavy concurrent load.

We use this on our project and it's a great way to visualize usage stats, especially when you can't just get 50+ users banging on your test environment whenever you want

Great for performance tuning, particularly coupled with database performance analysis (like SQL Performance Monitor or CPU counters).

[Darren Dirt]

ideone sounds cool.  Better check the license agreement, though, since you are essentially showing them your code and they may well say that they're allowed to do anything they want with it.  I would suggest against putting company proprietary code in there at least until you've thoroughly read through the license agreement.

Same warning might apply to pastebin, but pastebin isn't solely aimed at source code, whereas ideone appears to be.

Still, a cool idea if they don't use it to steal people's code.

I think it's ideal for pieces of code that you are either pointing someone else to that BREAK (so they can learn WHY it doesn't work) or else for your own often-reused snippets that are "just right", and you don't care if others benefit from your "perfectly elegant, elegantly perfect" code that does That One Thing Perfectly. Ego boost, even.

[Darren Dirt]

this is a good "reference" thread.

So I'm adding this -- tips for avoiding "polluting" the global namespace in Javascript

http://www.movable-type.co.uk/scripts/namespaces.html



also, PHP has a TON of string/array manipulation functions, including stuff like SHA1 hashing; here's a place where they've implemented all of those entirely in Javascript (grab what you need, learn some tricks from the source code)
http://phpjs.org/



downloadable source (full, not minimal-ized/obfuscated)
http://phpjs.org/packages/view/3772/name:b48ae719bfec0c52bb4022699e44d304


found via http://www.tools4noobs.com/online_php_functions/sha1/