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

  • Article

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.

 

Code WalkThrough

Summary

Step 1 – Intro to developer tools – Start by navigating to your site and hitting F12https://brunoblogfiles.com/OpenSourceSite/index.htm

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.

 

image

Step 2 – Changing the Font Size and Font Color

How to modify HTML within the Developer Tools

When you highlight and click an HTML element, the HTML tab shows the selected element's attributes, along with its location in the internal representation used by Internet Explorer 8 to display the Web page. You can view the element's current attribute values and experiment with new values by using the HTML tab to change them.

 

To change an attribute value, click it, enter a new value, and then press ENTER; Internet Explorer 8 will display the effects of your change. You can discard partial values by pressing ESC. To restore the Web page to its original appearance, Refresh the page.

 

My Bright Ideas will now get changed in Internet Explorer.

image

Changing FontSize and FontColor

In the right pane of Developer Tools you can simply type in the new font size that you wish to have.

image

Changing FontColor

Notice that as soon as you type in the color for red (color : #ff0000 ), the change is visible in Internet Explorer. Simply navigate to the style pane of Develop Tools then type in the new color. Notice that my FontColor did turn red on the left.

image

You can even change the embedded image

Almost everything can be changed, even an embedded image. I'm just going to type in a new file name to bind to and it will appear within Internet Explorer.  Notice that instead of a light bulb we now have a house icon.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

image

PowerPoint Presentation

image

 

 

Developer Tools – The Layout Tool

Summary

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

 

Step 3 – Intro to developer tools – Start by navigating to your site and hitting F12https://brunoblogfiles.com/OpenSourceSite/index.htm
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”

In this sample we will change the top padding.

image

Starting Developer Tools

image

Select Element by Click from the Find menu

image

 Select the HTML that you will end up changing

image

 Select Layout

image

 Change Top Padding

image

 Notice the change in padding

image

Video Demo

image

PowerPoint Presentation

image

Developer Tools – Profiling JavaScript

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.

Step 4 – Intro to developer tools – Profiling your Javascript

Profiling page1.htm.

Navigate to https://brunoblogfiles.com/ProfileJavascript/page1.html. From there you will run the profiling tools.clip_image002[9]

Start Developer Tools

Use the Tools menu and select Developer Toolsclip_image004[9]

Start Profiling

In Developer Tools select Start Profiling. clip_image006[9]

Exercise your code

Click the Rain button.clip_image008[9]

Click Stop Profiling

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

Let’s compare to page2.html

We will take the same steps as before.clip_image012[9]

 

Summary

Use the Tools menu and select Developer Toolsclip_image014[9]

Start profiling

image

Click Rain

image

Stop profiling

image

 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. image

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

image

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