Debugging the DOM Tree

Share This Post

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


Demystifying Scrum User Stories Confirmation: Ensuring Quality and Collaboration

One of the key elements of Scrum is the use of user stories to define the requirements of a system or feature from the perspective of the end user. As teams work through the product backlog, it becomes crucial to confirm the user stories to ensure they meet the desired criteria and are ready for development. In this blog post, we’ll explore the concept of Scrum user stories confirmation and its significance in delivering high-quality products.


The Power of Conversations in Scrum User Stories

At the heart of Scrum lies the concept of user stories, which serve as a means of capturing requirements from the perspective of end-users. However, the true power of user stories lies not just in their written form but also in the conversations that take place around them. In this blog post, we will explore the significance of conversations in Scrum user stories and how they contribute to the success of Agile projects.

Do You Want To Boost Your Business?

drop us a line and keep in touch

Scroll to Top

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.