Core HTML

Lesson 28: Debugging

Overview

In this HTML lesson, we demonstrate how to use the developer tools to get basic debugging information. We can open the developer tools on any HTML document by pressing the Fn and F12 keys, simultaneously. These tools can help us debug HTML documents by showing the elements of document, along with their associated regions. These regions are the margin, border, padding, and the content region.

Developer Tools

To get an idea of how the developer tools work, we use a simple HTML example. To open the developer tools, we press the Fn and F12 keys. This example contains three levels of headings above a horizontal rule and a biblical passage from the Book of Sirach. With these headings and the body element, we can view margins around the elements in the developer tools. The margin areas are shown in orange while the main content area is blue. We can view an example of a border region on the horizontal rule. The border in this case is two pixels high and is colored a lighter orange than margin.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <h1>Sirach</h1>
    <h2>Chapter 1</h2>
    <h3>Verses 1-4</h3>
<hr />
All wisdom comes from the Lord<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and is with him for ever.<br />
The sand of the sea, the drops of rain,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and the days of eternity-who can count them?<br />
The height of heaven, the breadth of the earth,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the abyss, and wisdom-who can search them out?<br />
Wisdom was created before all things,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;and prudent understanding from eternity.<br />
  </body>
</html>
 

Output

 

An Unordered List

In our second example, we have an unordered list of the Joyful Mysteries. With this list, we can demonstrate the visualization of the padding region, which is shown in green in the developer tools.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <div>
      <h1>Joyful Mysteries</h1>
      <ul>
        <li>Annuciation</li>
        <li>Visitation</li>
        <li>Nativity</li>
        <li>Presentation</li>
        <li>Finding in the Temple</li>
      </ul>
    </div>
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.