Web developer essential tools

The tools used in web development are entirely a matter of preferences, but there are some tools which would ease each designer’s work, and here are some I use:

The web developer toolbar

The web developer toolbar can be installed on Firefox and Chrome at the moment, if you haven’t heard of it, then wait no further, it is an essential tool for web developers. Some of its great features are:

– strip pages from their CSS (view as HTML only)
– quickly view all CSS from any page
– one shortcut away from validating your pages on the W3
– quickly disable/enable javascript
– interact with any page by filtering, enabling and disabling HTML elements.

It has tons of fantastic features that saves web developers a tremendous amount of time, it’s my number one tool and I use it on a daily basis.

Code editors

I can’t really start recommending code editors, since it’s something each developer has to test and play with before determining the right one, but I do have some recommendations:

  • don’t use the auto-complete functions, that’s for lazy coders;
  • find an editor which offers support for most known programming languages, thus, having your code displayed in a pleasant manner and easy to edit;
  • don’t use snippets, addons, code blocks or pre-built stuff, most software do not keep count of your document type and you’ll end up with poor written code.

I personally use Notepad++, and as the name implies, it’s just a notepad, but built for code editing. It has recognition of almost all programming languages, their syntax that is. No naive pre-built code blocks and I get to type everything myself which I’m happy of, it keeps my brain fairly active and trained :)
Among the many straight-forward and very useful functionalities, I adore the ability to contract and expand code blocks (i.e. html elements, php functions etc.), it lets you focus one the code areas you want.
You can download it from its official website.

Sadly, it only runs on the Windows platform, but Linux users can still use it running it with WINE. As for Mac users, I’ve done some researches and the best alternatives would be Textmate and Textwrangler.

Compatibility tests in all IE versions

It’s rather difficult to test our designs in the *renowned* versions of Internet Explorer since they haven’t made available to us ways to have more versions installed.
Various contributors and programmers begun making simulators and emulators of certain IE versions, but here are two applications which I found to be most useful:

  • IE Tester
    • A very interesting browser application that can render pages in several most known IE versions, with tab-support for each version, IE Tester can render with the IE engines from version 5.5 to the current one. A very quick way to test and
      debug your (x)HTML and JavaScript.

      • PRO

        • All versions can be opened in the same window with tab-support.
        • CON

          • Crashes from time to time :(
  • IE Collection

    • Brought to you by UTILU, IE Collection literally installs all standalone IE versions on your computer, independently. It includes even version 1.0 to the current one, though I recommend you install from version 5.5 to the current, as previous versions are no longer known to be used and the versions 1 to 3 can’t even understand the web technology we have today. Using IE Collection is probably the best way to test and debug your pages.

      • PRO

        • Installs real standalone internet explorer versions
        • CONS

          • Each version opens individually, ending with many browsers running when testing and debugging.
FireBug – DOM Inspector

A very well built cost-free DOM Inspector by Jamey Boje.
It’s not just an Inspector though, you can interact with your code (HTML, CSS, JavaScript and AJAX), run your code partially to fix errors and they show in an eye-friendly manner, edit the DOM live and much more.
FireBug can help you greatly with your HTML and CSS, but it helps JavaScript and AJAX developers an awful lot more.

There are more tools I use, but the above are essential to me.
Let me know if I’ve missed any other can’t-live-without tools 😛

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

8 thoughts on “Web developer essential tools

  1. i am more of a wysiwyg guy and have been stuck on ie for ever, but now that i am more active in creating content on the web having more than one browser installed is crucial, and picking fireofx with its dev plugins is the logical choice for a primary or secondary dev web browser

    1. Certainly firefox is one of the main browsers we usually focus on, knowing it’s a very good standard-compliant browser, though I still try to debug in all known and used browsers

  2. I’d like to add Vim to the list of editors.You can use GVim for Windows/Linux and MacVim for Mac.
    Very light code editor, but packed full of features.Blazingly fast text navigation commands, lots of plugins available to fill any gaps you may find.
    Sort of difficult to get used to because of it’s modal nature, but once you get the hang of it you’ll be running circles around any other code editor out there.

    1. Thanks for the feedback and suggestion Adrian, I haven’t had the chance to check GVim yet, but be certain I will. If its code editing is modal based, then I can guess it originally comes from linux? 😛 or Windows if I’m wrong. At the moment, consider it added along with your comment. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">