ie 8 developer tools totally rock

written by gorbett on Saturday, April 05 2008

in case you have been living in a box, ie 8 beta has been released and is a must-have for web developers and designers. first, it is totally rocking a standard compliant browser out of the box (or web). that means that some of the sites you may have developed prior to ie 8 may have to be reworked to be standards compliant. you will be surprised to see how many sites are not there yet (including some of our own properties). don't worry though... ie 8 has a much needed "Emulate IE7" button that you will find you are turning on for most of your browsing.

besides having all kinds of great new features (activities, webslices, etc.), it includes some crazy cool developer tools that soon became part of my design and development experience.

here is an example. i have been working on a cool new project (this is really what i do in my spare time... nice life... i know) modifying some already cool html, css, and xaml code. however, i wanted to make some real adjustments to not only functionality, but design. it turns out that it can get pretty complicated in design when you are dealing with hundreds of nested css tags.

well, the magic comes in when you launch the ie 8 developer tools and realize just how much power there is in using them on a site. i am not even going to get into the javascript debugging built into the tools (yah... real javascript debugging with an immediate window and all). you can read all about that here.

i was struggling with div positioning and size on the site i am working on and found just how easy it is to find where elements are and what they are set to. so i put the ie 8 developer tools to use. simply click on the developer tools icon in the upper right corner and click the arrow cursor in the developer tools toolbar and select an element in the browser window. see below all the information that is given to me, including what style was affecting the layout i needed to change. sweet!

but it gets even better. you can actually change html values right in the developer tools window and watch your site modify in real-time. that is way cool. say a width attribute in your html is 800px and it is not looking right. right within the developer tools, you can change the value and watch the width change as you make changes to the value. super sweet!

 

so if you are a developer and/or a designer looking to make site design and development easier, i highly recommend downloading ie 8 to both check your sites for standards compliance  and take advantage of the new developer tools included in the install. and remember, you always have the "Emulate IE7" button.

Similar Posts

  1. launching briangorbett.com... the design part
  2. launching briangorbett.com... the dev part
  3. mysearchoff – rate your favorite search engine

Post a comment

Options:

Colors