Cómo usar el mapa de estabilidad
StableHTMLFinder compara varias cargas y muestra los elementos y características que se mantienen estables. Así, los usuarios avanzados pueden crear selectores sin depender de clases, ID o estructuras cambiantes.
Página de StableHTMLFinder Instalar StableHTMLFinder desde Chrome Web Store
Flujo habitual
- Abra la página que contiene el elemento.
- Elija el número de cargas. Dos suelen bastar para una revisión rápida; más cargas aumentan la precisión.
- Inicie el análisis. Tras cada carga, la extensión espera el tiempo configurado para que la página complete su contenido habitual.
- Encuentre el elemento desplegando ramas o usando la búsqueda.
- Abra el menú ⋮ en el nodo deseado, lea la descripción y copie el selector CSS o la regla de BlockIt.
- Pegue el resultado en el campo correspondiente de BlockIt y pruébelo en la página.
Cuantas más cargas, menor es el riesgo de confundir una coincidencia con una característica estable. Dos letras de un ID dinámico pueden coincidir dos veces por azar, pero no normalmente en más cargas.
Cómo leer el mapa de estabilidad
Cada fila representa un elemento HTML. La sangría sigue la estructura confirmada; los elementos sangrados son descendientes. El mapa solo muestra características estables en todas las cargas. Una clase, atributo o rama ausente puede existir pero haber cambiado.
<div>,<a>,<section>— nombre de etiqueta estable.id="menu"— el nombre y el valor completo del atributo coincidieron en todas las cargas.data-*,*-label,*test*— solo parte del nombre es estable: empieza pordata-, termina en-labelo contienetest.id^="prefix"— el valor del atributo empieza por el texto indicado;id$="suffix"— termina en él;id*="part"— lo contiene. El signo=sin^,$o*indica una coincidencia exacta.- Un nombre de atributo sin valor significa que la presencia del atributo es estable, pero su valor cambió o no se confirmó.
class(3 clases) significa que el número de clases es estable aunque los nombres o el valor completo declass.- El texto a la derecha de los atributos — texto propio estable del elemento. El botón «ampliar» lo muestra completo.
iframe,iframe documenty#shadow-rootmarcan los límites de partes anidadas especiales. Su contenido continúa en otra rama.<...>marca una sección cambiante o emparejada con incertidumbre. Debajo puede reaparecer un fragmento estable confirmado.
Las filas verdes son elementos confirmados. El verde claro indica coincidencias probables o fragmentos estables tras una zona cambiante. El borde naranja marca resultados; el más intenso indica el actual.
Tras seleccionar ⋮ la descripción puede mostrar características adicionales: número exacto de atributos y clases, texto propio, posición, número de resultado y relaciones con padres, ancestros, hijos, descendientes o hermanos. Pueden precisar el resultado aunque no aparezcan en la fila.
Buscar en el mapa
El campo busca texto visible, etiquetas, atributos, valores y texto del elemento. También puede pegar HTML de DevTools. Un selector CSS se evalúa en la última captura y resalta los elementos vinculados.
Las flechas permiten recorrer las coincidencias. El resto del árbol permanece visible para examinar ancestros y descendientes.
¿Selector CSS o regla de BlockIt?
Prefiera un selector CSS cuando use características claras y duraderas: ID estable, nombre de atributo, valor constante o estructura clara. CSS es más sencillo y suele ser más rápido.
Use una regla de BlockIt cuando CSS no baste, por ejemplo para contar clases o atributos, nombres dinámicos, texto propio o posición del resultado. Las reglas son más potentes, aunque algo más lentas.
El mapa genera sugerencias automáticamente, pero la función sigue mejorando. Verifíquelas y lea la descripción. Una advertencia en negrita indica que no se pudo confirmar la unicidad.
Por qué el repositorio fuente no es público
La extensión ayuda a entender marcado web cambiante. Un repositorio público con detalles facilitaría obstaculizar deliberadamente el mapa; por eso no se publica. Esto no evita la revisión de Chrome Web Store ni promete secreto técnico total.
Relación con BlockIt
StableHTMLFinder encuentra características duraderas; BlockIt aplica la regla y oculta o elimina los elementos coincidentes. Juntos ayudan cuando un selector de DevTools deja de funcionar tras recargar.
BlockIt es una extensión independiente y no es necesaria para crear el mapa.