El título lo dice todo, de verdad. Perdí mucho tiempo persiguiendo lo que pensé que era un comportamiento extraño usando el depurador / inspector en Firefox, pero puede ser solo un problema de tiempo de renderizado o mi falta de experiencia con el inspector de código. Me gustaría solucionarlo. Considere este ejemplo de código simplificado:
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.Configuré un punto de interrupción del depurador en selectTab(). Mientras está en pausa y avanzando, this.tabs[0].classList.add("selected") provoca el cambio de color esperado en el documento, pero en la pestaña Inspector de HTML, la clase sigue siendo solo "pestaña". Lo mismo si modifico en la ventana de la consola con mainFolder.tabs[0].classList.add("seleccionado"). Tan pronto como retomo la ejecución del código en vivo, el inspector de HTML se actualiza.
Esto está matando mi capacidad de rastrear por qué, en última instancia, mi código real está asignando algunas clases de CSS por error: no puedo ubicar exactamente en el código cuando sucede porque estos cambios de clase en particular solo tienen un impacto observado aguas abajo que no se visualiza de inmediato. ¿Alguien sabe alguna forma de actualizar, volver a renderizar o actualizar (aún mejor mantener) los cambios de HTML mientras está en pausa en el modo de depuración?
Gracias.
Debo admitir que era escéptico acerca de la descripción del problema, pero efectivamente, acabo de probar Firefox v91 y la pestaña Inspector en las herramientas de desarrollo no parece actualizarse a medida que avanza en el código.
No sé si realmente tienes algo que puedas hacer al respecto dentro de Firefox, es posible que desees usar otro navegador para la depuración si esto te resulta problemático. Las herramientas de desarrollo de Chromium se actualizan a medida que avanza en el escenario que describe, por ejemplo, y sospecho que (si usa Windows) Microsoft Edge también lo haría.