Internet Explorer 8 – Developer Tools - Debugging HTML and CSS (Includes Profiling)

Introduction - Debugging HTML and CSS is notoriously difficult
The goal of tooling is to give you visibility into the browser so you can inspect your site's HTML and Cascading Style Sheets (CSS) as they exist inside Internet Explorer instead of just the original source.

ASP and PHP
This is particularly helpful with dynamic sites, complex sites, and sites that use frameworks like Active Server Pages (ASP) or PHP.

Viewing the DOM for your site – All inside a rendered browser page
The Primary Content Pane in the tools displays the site's Document Object Model (DOM) tree, which reflects the one maintained by Internet Explorer to represent the site in memory. This way you see exactly the means by which Internet Explorer renders your HTML into a DOM tree.

Mouse or keyboard
You can navigate the tree with the mouse or the keyboard.

Search Element – How to find the specific element
The quickest way to find the node for a specific element on the page is to use the Select Element by Click feature.  Use this feature to select an element on the page and the tools will automatically select the corresponding tree node.  An alternative method is to use the Search box.

Summary

How to Sync HTML in the browser with Developer Tools

To modify HTML or CSS within the browser you need to tell Developer Tools which piece of html you wish to modify. 

Many HTML and CSS developer tools operate on individual elements in a Web page. To select an element, either highlight it in the HTML tab or click the Select Element by Click button on the Developer Tools Find menu. If you click this button, you will be able to use the mouse to select an element on your Web page. Move the cursor over an element; when a blue box highlights the element's border, click to select the element.

How to modify HTML within the Developer Tools

Changing FontSize and FontColor

Changing FontColor

You can even change the embedded image

Summary – Developer Tools

In this blog post you have seen what it takes to work with Developer Tools to give you visibility into the browser so you can inspect your site's HTML and Cascading Style Sheets (CSS) as they exist inside Internet Explorer instead of just the original source.

Video Demo

PowerPoint Presentation

Summary

The Layout tool offers the box model information of an element's relative positioning on a Web page.

Using the Layout Tool

Available information includes:

• Offset: These values describe the distance between the selected object and its parent, as represented by the offsetLeft and offsetTop properties.
• Margin, Border, and Padding: These three values display the values specified in the source of a Web page. If no values are specified, the tool will display the default values used by Internet Explorer.
• Width and Height: The innermost values are the element's width and height as defined by the offsetHeight and offsetWidth properties.

For each box model attribute, the value and unit of measurements are displayed. Click on a value to edit it, then press ENTER to commit the new value, or ESC to cancel it. Once you press ENTER, the new value will take affect immediately. By default (if the unit of measurement is not displayed), the Layout tool handles box model values as pixels.

Changing the top padding above “CLIENT TESTIMONIALS”

Starting Developer Tools

Select Element by Click from the Find menu

 Select the HTML that you will end up changing

 Select Layout

 Change Top Padding

 Notice the change in padding

Video Demo

PowerPoint Presentation

Summary

There may be times you need to optimize your Javascript. Developer Tools offers a profiler. The profiler can determine how many milliseconds it takes to run javascript functions. In doing so, you can determine more efficient ways to write Javascript code.

Profiling page1.htm.

Navigate to http://brunoblogfiles.com/ProfileJavascript/page1.html. From there you will run the profiling tools.

Start Developer Tools

Use the Tools menu and select Developer Tools

Start Profiling

In Developer Tools select Start Profiling.

Exercise your code

Click the Rain button.

Click Stop Profiling

The results will show up and you can see below that the code took an average of 24.5 seconds.

Let’s compare to page2.html

We will take the same steps as before.

Summary

Use the Tools menu and select Developer Tools

Start profiling

Click Rain

Stop profiling

 Compare code

At this point you can compare the the 2 Javascript functions in Page1.html and Page2.html. Note that the faster code actually has more code – it avoids the repeating reference to document.images.

Remember, control-P allows you to pause and start your videos so that you can follow along.

Let me know what you think of this post at bterkaly@microsoft.com