Como usar o mapa de estabilidade
O StableHTMLFinder compara vários carregamentos e mostra elementos e características que permanecem estáveis. Isso ajuda usuários avançados a criar seletores sem depender de classes, IDs ou estruturas variáveis.
Página do StableHTMLFinder Instalar o StableHTMLFinder pela Chrome Web Store
Fluxo típico
- Abra a página que contém o elemento.
- Escolha o número de carregamentos. Dois costumam bastar para uma verificação rápida; mais carregamentos aumentam a precisão.
- Inicie a análise. Após cada carregamento, a extensão aguarda o tempo definido para a página montar o conteúdo normal.
- Encontre o elemento expandindo os ramos ou usando a pesquisa.
- Abra o menu ⋮ no nó desejado, leia a descrição e copie o seletor CSS ou a regra do BlockIt.
- Cole o resultado no campo correspondente do BlockIt e teste-o na página.
Quanto mais carregamentos, menor o risco de confundir coincidência com característica estável. Duas letras de um ID dinâmico podem coincidir duas vezes por acaso, mas raramente em mais carregamentos.
Como ler o mapa de estabilidade
Cada linha representa um elemento HTML. O recuo segue a estrutura confirmada; elementos recuados são descendentes. O mapa mostra apenas características estáveis em todos os carregamentos. Uma classe, atributo ou ramo ausente pode existir, mas ter mudado.
<div>,<a>,<section>— nome de tag estável.id="menu"— o nome e o valor completo do atributo coincidiram em todos os carregamentos.data-*,*-label,*test*— apenas parte do nome é estável: começa comdata-, termina com-labelou contémtest.id^="prefix"— o valor do atributo começa com o texto indicado;id$="suffix"— termina com ele;id*="part"— contém esse texto. O sinal=sem^,$ou*indica correspondência exata.- Um nome de atributo sem valor significa que a presença do atributo é estável, mas o valor mudou ou não foi confirmado.
class(3 classes) significa que a quantidade de classes é estável, embora os nomes ou o valor completo declass.- O texto à direita dos atributos — texto próprio estável do elemento. O botão “expandir” mostra tudo.
iframe,iframe documente#shadow-rootmarcam os limites de partes aninhadas especiais. O conteúdo continua em outro ramo.<...>marca uma seção variável ou associada com incerteza. Abaixo pode reaparecer um fragmento estável confirmado.
Linhas verdes são elementos confirmados. Verde claro indica correspondências prováveis ou fragmentos estáveis após uma área variável. A borda laranja marca resultados; a mais forte indica o atual.
Depois de selecionar ⋮ a descrição pode mostrar características adicionais: contagens exatas de atributos e classes, texto próprio, posição, número do resultado e relações com pais, ancestrais, filhos, descendentes ou irmãos. Elas podem refinar o resultado mesmo sem rótulo na linha.
Pesquisar no mapa
O campo pesquisa texto visível, tags, atributos, valores e texto do elemento. Também é possível colar HTML do DevTools. Um seletor CSS é avaliado no último instantâneo e destaca os elementos vinculados.
As setas percorrem as correspondências. O restante da árvore permanece visível para examinar ancestrais e descendentes.
Seletor CSS ou regra do BlockIt?
Prefira um seletor CSS quando ele usar características claras e duráveis: ID estável, nome de atributo, valor constante ou estrutura clara. CSS é mais simples e geralmente mais rápido.
Use uma regra do BlockIt quando CSS não bastar, por exemplo para contar classes ou atributos, nomes dinâmicos, texto próprio ou posição do resultado. As regras são mais poderosas, porém podem ser mais lentas.
O mapa gera sugestões automaticamente, mas o recurso ainda evolui. Verifique-as e leia a descrição. Um aviso em negrito indica que não foi possível confirmar a unicidade.
Por que o repositório-fonte não é público
A extensão ajuda a entender marcação variável. Um repositório público detalhando os algoritmos facilitaria dificultar deliberadamente o mapa; por isso o código-fonte não é público. Isso não dispensa a análise da Chrome Web Store nem promete sigilo técnico total.
Relação com o BlockIt
O StableHTMLFinder encontra características duráveis; BlockIt aplica a regra e oculta ou remove os elementos correspondentes. Juntos ajudam quando um seletor do DevTools deixa de funcionar após recarregar.
O BlockIt é uma extensão separada e não é necessária para criar o mapa.