Internet Explorer's Developer Tools (F12) Overview

Developing a web page is not always a simple matter of creating code on your computer, uploading it to the server and it works.  The interaction of your page, CSS stylesheets, javascript code (sometimes yours, sometimes external) and the framework of other files that may wrap around your code often produce odd results that you need to debug within the browser itself to figure out.  Until browser-based developer tools like Microsoft's F12 Developer Tools or Firebug came along, all you could do was view the source of your page and stare until you went cross-eyed.  Now that these tools exist, by all means use them!  I plan to write a series of posts about developer tools, starting with this overview of Microsoft's F12 Developer Tool.

jsFiddle - A site for debugging

Sometimes you just need an environment where you can put together your HTML, CSS and javascript without having to build a server, install different javascript libraries, build your page and all that... you just want to see how this fragment of code would work.  Or you need to show another developer how a certain bit of jQuery or CSS works and you don't have a site they can access.  Maybe you can't get it working, and want to ask your favorite support forum for help?  There are many sites out there which can help, including one that I use for many of my posts here on jUntangled as well as when I'm helping other members of Experts-Exchange with questions they have.  I heard good things about jsFiddle for this purpose, and signed up for a free account there.  Here's what I found...