Debugging the DOM Tree

In several previous posts, I have given attention to the DOM. In today’s post, I would like to display a technique I sometimes use to debug the DOM itself.

With the DOM, it does not take long for things to get complex. We need to be able to dissect…slice and dice things up to fix any bugs we find. I have written about how to use alerts, document.writes and breakpoints…here is another method…

Utilize the DOM itself to tell you what is happening…We can use DOM methods like createElement to manufacture HTML code and then use appendChild. How? Glad you asked…

Let’s imagine we are working with an app that is like a ‘choose your own adventure’ book (I am dating myself there). So you are going through the application and clicking on your choices, but they are not making sense…there is a bug. We can capture the information in the app and write it directly to the page to understand what is occurring.

[code lang=”js”]
// Our HTML to make a choice in our story
<button id="decision1" onclick="changeStory(1)">Story Choice</button>

So we have a button to click to make something happen.

[code lang=”js”]
// Div container to write DOM actions
<div id="history"></div>

Now we have a place in our HTML to record actions from the DOM.

[code lang=”js”]
// Function that gets triggered with button click
function changeScene(decision) {
// decision argument carries our choice to
// evaluate (see HTML button code)
// Clear the story message
// storyMessage contains our text to display to our end user
var storyMessage = "";
// Decision variables to contain the next choices for the reader
var decision1 = "", decision2 = "";
// A switch statement to evaluate the logic of the reader’s choice
switch (curScene) {
// Beginning of our story
case 0:
curScene = 1;
message = "First message to reader.";
decision1 = "1st First Decision";
decision2 = "1st Second Decision";
// Show the second decision
document.getElementById("decision2").style.visibility = "visible";
case 1:
// Case for result of first choice
if (decision == 1) {
curScene = 2
message = "Second message to reader.";
decision1 = "2nd First Decision";
decision2 = "2nd Second Decision";
} else {
curScene = 3;
message = "Third message to reader.";
decision1 = "3rd First Decision";
decision2 = "3rd Second Decision";
// You could create more decisions/cases…
// Update the story description text and decisions based on button click
// Simply updates the story on the page for the reader
replaceNodeText("scenetext", message);
replaceNodeText("decision1", decision1);
replaceNodeText("decision2", decision2);
// Update the decision history
// This is where the DOM debugging comes into play
// Grab our history div
var history = document.getElementById("history");
// Make certain we are not at the beginning
if (curScene != 0) {
// Add the latest decision to the history
// Create a paragraph element
var decisionElem = document.createElement("p");
// Create text holding the information based upon the reader’s click
// We also append this to the paragraph
decisionElem.appendChild(document.createTextNode("Decision " + decision + " -> Scene " + curScene + " : " + message));
// Append the paragraph to the history div
} else {
// Clear the decision history
while (history.firstChild) {

I know that is several lines of code, but the decision history portion is the key. We grab the history div and put the information gathered based upon the end user’s selection. We then create HTML elements…in this case a paragraph tag and a text node. We then write that to the page. The result of the above code would be a log of sorts outputting to the page directly for you. This would allow you to follow the logic to catch and squash your bug.

Happy Coding!

Clay Hess

More To Explore

computer, laptop, work place-2982270.jpg

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

lighthouse, beacon, atlantic-8578318.jpg

Understanding the Beacon API: Simplifying Asynchronous Data Transfers

In today’s data-driven world, web applications often need to send data back to the server. Traditionally, this has been done using AJAX requests or similar methods. However, these techniques can come with a cost, especially when dealing with data that needs to be sent during the unload phase of a document, such as tracking and diagnostic data. This is where the Beacon API shines by allowing developers to send data to a server more reliably and efficiently.

Share This Post


Need help?

Let's have a chat...


Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 


Begin Your Learning Journey Today!

Come back inside to continue your learning journey.