O código JavaScript pode atualizar as propriedades / atributos dos elementos DOM em tempo real, respondendo a eventos e assim por diante. Aqui é um exemplo.
Na tabela dessa página, mova o mouse sobre as células. Observe como eles mudam de cor quando o mouse está sobre eles, e a cor desaparece quando você move o mouse para outra célula.
Agora, usando o Firefox ou o Chrome (mas não o IE, o Opera etc.), quero examinar a cor do plano de fundo, expressa em RGB ou hex ou qualquer outra, das células atualizadas em tempo real , como o cursor do mouse entra e sai da região e faz com que o JS faça o que ele faz.
O comportamento que observo atualmente é que a funcionalidade Inspecionar Elemento do Firefox e do Chrome não atualiza o valor das propriedades conforme elas são atualizadas pelo JavaScript. Portanto, para exibir o valor mais recente da propriedade, preciso inspecionar o elemento novamente e é preciso uma "captura instantânea" momentânea dos valores. Mas como os valores só mudam enquanto eu tenho o mouse sobre eles, não consigo tirar um instantâneo do valor desejado enquanto meu cursor do mouse está sobre a célula, porque preciso remover meu mouse da célula para selecionar a opção "Inspecionar Elemento "item na lista de clique com o botão direito!
Se for possível atualizar os valores em tempo real usando o Firefox ou Chrome, ou uma extensão, em qualquer versão recente do software (até o último estável), forneça instruções por fazer isso.
Quando você escolhe uma das células na demonstração, ela seleciona automaticamente o <div> contido na célula, a menos que você atinja a célula exatamente na borda:
Noentanto,amudançadeestiloéaplicadanacélula,nãona<div>.Quandovocêpassaomousesobreacélulaenquantoelaestáfocadanasferramentasdodesenvolvedor,vocêdeveconseguirveronovoCSSsendoaplicado.Alémdisso,vocêpodeexpandiropainelEstilocomputacionalparaveroconjuntocompletodeestilos: