No Chrome e no Chromium, você pode clicar com o botão direito do mouse em um nó na guia Elementos / Inspetor das ferramentas do desenvolvedor e optar por interromper a modificação da subárvore, a modificação do atributo e a remoção do nó. Embora você não possa adicionar condições a esses pontos de interrupção, como quebrar apenas quando uma determinada variável contém um valor especificado, essas são as melhores opções que encontrei.
No Firefox, os eventos que você pode invadir são encontrados clicando no botão Expandir painéis, no lado direito da aba Depurador.
A modificação da subtree é muito útil se você não souber onde o DOM será modificado. Basta definir essa condição no nó do corpo (ou superior) e interromperá imediatamente qualquer script que modifique o DOM abaixo do nó do corpo. Isso também é muito útil quando um nó que você deseja inspecionar ainda não existe, mas você sabe onde ele será inserido para que você possa interromper o pai sendo modificado.
O DOM será essencialmente congelado no estado em que se encontra, pouco antes de a mudança real acontecer (como um nó é inserido), com o depurador de scripts sentado na linha que acionou a modificação.
Um problema é que a janela do navegador obtém uma sobreposição que impede qualquer interação com ela, mesmo clicando com o botão direito do mouse e selecionando outros elementos para inspecionar. Ainda é possível inspecionar outros nós selecionando-os na guia Elementos ou clicando primeiro no ícone "Selecionar um elemento na página para inspecioná-lo" na parte superior esquerda da janela da ferramenta.
Se você deseja inspecionar a aparência do DOM quando determinados elementos têm :focused , :hover , :active ou :visited , também é possível forçar esses estados por meio do menu do botão direito do mouse Guia Elementos.