fritzthecat-blog: Stringify HTML Elements in JS

When debugging JavaScript, you may find out that one thing slows you down particularly:

What and where is the DOM element I am having in this variable?

Even if the debugger would highlight the hovered variable in the browser view, this may not be helpful in certain situations, as the page might be in an intermediate state. Instead, when you hover a variable, normally a big popup shows up, containing all properties of the element. You need to scroll to bottom just to see tagName or textContent.

This Blog is about a little debugging helper that I recently wrote to cope with this problem. It outputs a text representation of a DOM element to the browser console (that can be viewed e.g. in the debugger).

Element toString()

Most important information about a DOM element is surely the tag name.

Second is the text inside the element. For better readability I decided to not render nested markup.

Debugging output must not be too long. The string representation of an element should fit into a line of 72 characters (e-mail line length, printer page). So I must shorten the embedded text. Best is to take head and tail.

Another important information may be the id of the element, or its CSS class attribute. I decided to not render the class when there is an id, because the id may be sufficient for identification.
This concept could be extended to also search for attributes like href (links), src (images) or type (input fields).

So here comes my proposal.

      var elementToString = function(element) {
        var idOrClass =
          element.id ? " id='"+element.id+"'" :
          element.className ? " class='"+element.className+"'" :
          "";
        
        var text = element.textContent;
        if (text) {
          text = text.replace(/\n/g, " "); /* turn newlines into spaces */
          text = text.trim().replace(/  +/g, " "); /* normalize space */
          
          var maxLength = 48;
          if (text.length > maxLength) {
            var cutLength = maxLength / 2;
            var substitute = "....";
            var head = text.slice(0, cutLength).trim();
            var tail = text.slice(text.length - cutLength + substitute.length).trim();
            text = head + substitute + tail;
          }
        }
        
        return "<"+element.tagName + idOrClass + ">" + text + "</"+element.tagName+">";
      };

First I create a string representation of the id if it exists. When not, I try to find the CSS class attribute.

The textContent property gives us the text representation of an element and all its nested elements, without HTML tags, but with newlines. I replace all newlines by spaces. Then I replace all occurrences of more than one space by just one space ("normalize space").

The maxLength could be a parameter to this function. When the text is longer than 48 characters, I just keep its head and tail, and put a "...." in between. The JS slice() function does what substring() does in Java.

Finally the element is printed like it was written in HTML, enclosed in its tags. This gives a nice output that helps a lot to recognize DOM elements in JS when debugging! You can try it out by hovering any element in this Blog.

fritzthecat-blog

Blog-Archiv

Mittwoch, 21. Juni 2017

Stringify HTML Elements in JS

Element toString()

Keine Kommentare:

Über mich