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.
|Step 1 – Intro to developer tools – Start by navigating to your site and hitting F12
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.
|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.
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.
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.
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.
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.
|Developer Tools – The Layout Tool|
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 F12
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.
Starting Developer Tools
Select Element by Click from the Find menu
Select the HTML that you will end up changing
Change Top Padding
Notice the change in padding
Start Developer Tools
|Use the Tools menu and select Developer Tools
|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.
|Use the Tools menu and select Developer Tools
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 firstname.lastname@example.org