Favorite Web Development Tools

As a developer or tester, it is important to be comfortable with your development and testing environments. Everyone has their favorite tools that improve productivity, simplify complex problems, or just make development a little bit more enjoyable. For some, it is something as small as a script, others an application or plugin. As purveyors of fine SaaS web applications, we at Genius.com are no different. Each of the tools mentioned in this post comes highly recommended by at least one member of the Genius.com development or QA teams. I’ve included a brief description of the tool, followed by quotes from Geniuses expressing their love for these little life savers.

firebugFirebug Plugin for Firefox:

Firebug by far received the most love from the Developer as well as the Quality Assurance camps. No doubt because it is an invaluable asset in debugging and prototyping client side changes. Here is what the engineers said:

My Favorite tool for developing Selenium scripts is Firebug. Firebug allows me to inspect any UI element and find its ID/name/class quickly on the fly. I need to look for the ID’s, names etc so that Selenium can uniquely identify UI elements on a page and execute commands on those elements.

My favorite tool is Firebug. It helps me view and debug network activity like Ajax requests, CSS, HTML & JavaScript. Also it really helps with inspecting elements to build XPATH expressions for Selenium.

Firebug. My three favorite features are:

1.      Being able to look through the generated HTML source of a page.  This is particularly useful to see what HTML is produced by JS frameworks such as ExtJS and to be able to modify the page’s HTML and CSS on the fly without needing to modify your source files for every change.

2.      The ability to see what gets sent to the server and what is returned for AJAX calls.  This makes debugging AJAX-heaving applications much easier.

3.      Being able to call console.log() from the JS.

It’s also been interesting to see other Add-Ons such as FireDiff and Firefinder, which are designed specifically to add functionality to Firebug.  This seems like a very promising direction for Firebug’s development.

Firebug, which is invaluable, allowing you to find the markup for visual components and read interactions with the server.

I can’t really remember how life was pre-Firebug, nor can I imagine the level of complexity our code now has without a tool like FireBug for tracing through code, and debugging. It really helps with insight into the inner workings of the JS code, and makes debugging a breeze.

tamper_data_getting_data2Tamper Data Plugin for Firefox:

Tamper Data is one of those great little plugins to have in your tool box. Tamper Data is used to modify live HTTP/HTTPS headers and POST parameters. Great for tracing connections and web security testing in general.

Tamper data is very useful for manipulating data sent to the server, as well as just monitoring all traffic between the client & server.

 

webdeveloperWeb Developer Plugin for Firefox:

The Web Developer Plugin for Firefox is one of the handiest plugins. It handles the basics of everything from clearing session cookies to editing CSS styles and much more.  

This is great for front-end work. It allows quick and convenient access to a variety of handy things including resizing the window to a standard size, highlighting specific HTML element types, performing HTML/CSS validation, and viewing the generated source of the currently-displayed state of the page.

xpatherXPather plugin for Firefox:

XPather is another plugin for the beloved Firefox web browser. This particular plugin allows for the browsing and inspection of the HTML/XML/*ML DOM, on inspection of an element a customizable XPath is generated. XPather also allows for XPath testing and evaluation, pattern matching, and much more.

Xpather is a DOM inspector which saves a lot of time than me navigating manually nodes into a tree looking for an element.  XPather is great especially when an UI element  does not have unique ID, name, class etc. One disadvantage of using xpaths is that it makes your Selenium test scripts run slowly.

osoft_1490922690php-logoFirefox PHP Custom Search:

As PHP developers, we very often find our browsers pointed to php.net to read up on the official PHP documentation. It can be tedious to constantly type out the URL, so why not point that handy little search box to the right of the URL bar to php.net? You can!

Firefox Custom search for php.net gets me access to the php reference manual way faster.

 
smart-keywords-2Firefox Keywords:

If you are like me and have many search engines that you use regularly (php.net, IMDB, Wikipedia, etc…), then changing your search box to ease the  use  of a particular engine just isn’t going to do the trick. That is where Firefox’s keywords come into play. You can create a custom shortcut and have  Firefox search using that engine given a textual shortcut in the URL bar. 

Being able to search Google, Google code, Perl docs, Perl modules, or PHP docs quickly is an absolute necessity.  Having quick access to these (open tab, keyword (g|gcs|pd|pm|php), query) means quick responses and no loss of train-of-thought.

fiddlerFiddler:

Fiddler is a great network monitoring application that allows for inspection and modification of HTTP(S) traffic, including setting break points and script data manipulation. Perfect for monitoring/modifying data from any browser.

Great for debugging AJAX responses from IE. Firebug will occasionally have problems displaying the result of a request when doing things like uploading files in forms, but I have never had any such trouble with Fiddler.

 
viiconThe vi Plugin for the Eclipse IDE:

The venerable Unix editor vi has come to Eclipse! The vi plugin for Eclipse brings many of the features of the vi(m) editor to the Eclipse IDE, great for those vi crazed developers out there. 

The vi Plugin for Eclipse is what makes the editor worth it to me. As an avid vim user, I’d have a very difficult time using Eclipse without it. Well worth the cost.

ViPlugin is the most invaluable for me.  Editing without vi commands is slow, inefficient and error prone.  Eclipses lacking of vi (or even Emacs) commands built-in is a huge oversight.

vimdiffvimdiff:

Another great tool for those vi(m) junkies out there. Vimdiff allows for the opening of up to three files at once. Each in their own split screen with  the differences between them highlighted for ease of inspecting changes and moving them from one version to another.
 

Eclipse’s built-in diff editor is difficult to read thanks to very light shades used to highlight changes.  Coupling vimdiff with Subversion makes figuring out what I’ve changed easy.

ivy-lierre Ivy:

Ivy is a dependency management tool for Java based projects under the umbrella of the Apache Software Foundation. Ivy handles many aspects of dependency management(resolving, reporting, tracking, and recording). Ivy is a standalone tool, but is also very tightly integrated with Apache Ant making use of Ant tasks for its dependency resolution and reporting.

Without it, I’d have to put much more work into dealing with dependencies, especially when it comes time to upgrade a big library like JAX-WS that has a lot of transitive dependencies. (As a system administrator, library dependencies are bad enough during an initial install, but it’s even more unpleasant during upgrades when you never know what might depend on an old version of a library.) It’s quite satisfying to add a dependency or two and watch Ivy figure out every required library, download the relevant jars and place them in the proper classpath.

 
csseditlogoCSSEdit:

Quite popular amongst Mac web developers, CSSEdit takes a lot of the heavy lifting out of CSS development. With syntax highlighting, keyword completion, and a great WYSIWYG style editor with live preview, it is fantastic to instantly see your changes on the page you are working on. All held together in a very pretty interface CSSEdit has won several design awards, including the Apple Design Award in 2007.

Clean, fast, GUI for style tags, validation

  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Twitter
  • Google Bookmarks
  • DZone
  • HackerNews
  • LinkedIn
  • Reddit