The title says it all, really. I wasted a lot of time chasing down what I thought was strange behavior using the debugger / inspector in Firefox, but it may just be a rendering timing issue, or my lack of experience with code inspector. I'd like to work around it. Consider this simplified code example:

class Folder
{
   constructor (tabCount)
   {
      this.tabs = [];
      for (let i = 0; i < tabCount; i += 1)
      {
         const me = document.createElement('DIV');
         this.tabs[i] = me;
         this.tabs[i].className = "tab";
         document.body.appendChild(this.tabs[i]);
      }

      selectTab(index)
      {
         this.tabs[index].classList.add('selected');
      }
   }
}
var mainFolder = new Folder(5);
mainFolder.selectTab(0);

//with CSS to give .tab red color and .tab.selected a blue color.

I set a Debugger break point at selectTab(). While paused and stepping, this.tabs[0].classList.add("selected") causes the expected color change in the document, but over in the HTML Inspector tab the class remains "tab" only. Same thing if I alter in the console window with mainFolder.tabs[0].classList.add("selected"). As soon as I resume live code execution, the HTML inspector updates.

This is killing my ability to trace why ultimately my real code is assigning some CSS classes in error - I can't locate exactly in code when it happens because these particular class changes only have an observed impact downstream which isn't immediately visualized. Does anybody know of a way to refresh, or re-render, or otherwise make (even better keep) up-to-date the HTML changes while paused in debug mode?

Thanks.