After spending a considerable amount of time trying to debug what I believed to be unusual behavior in Firefox, it dawned on me that it might just be an issue with rendering timing or perhaps my own lack of familiarity with code inspection. Here is a simplified example of the code in question:
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.
During debugging, when I set a Debugger break point at selectTab(), everything seems to work as expected when I step through the code. However, I notice that while the class changes are applied correctly visually, they do not reflect immediately in the HTML Inspector tab. This makes it difficult to identify where exactly certain CSS classes are being incorrectly assigned in my real code. Is there a way to refresh or update the HTML content while paused in debug mode?
Any insights would be greatly appreciated. Thank you.