Inspeccione el modelo de caja de un elemento fácilmente con XRAY

¿Alguna vez quisiste saber el tamaño exacto de un elemento determinado en una página web como el relleno, el margen, la posición, etc.? Usualmente puede obtener la información usando una herramienta de inspección web; la mayoría de los navegadores tienen herramientas incorporadas para ayudarlo a hacer esto. Alternativamente, puede usar Firebug, que también es una herramienta web bastante popular. Sin embargo, cuando las cosas se complican, quizás necesites recurrir a una herramienta como XRAY.

XRAY es una herramienta gratuita entre navegadores que le permite ver el modelo de caja de cualquier elemento de una página web directamente en su navegador. A diferencia de otras herramientas complicadas de inspección web, XRAY se centra en brindarle información completa del modelo de caja del elemento.

Empezando

XRAY es un bookmarklet. Para usarlo, arrastre XRAY a la barra de favoritos de su navegador favorito. XRAY está disponible para navegadores basados ​​en IE6 +, Webkit y Mozilla como Safari y Firefox.

Al igual que otros marcadores, XRAY no puede funcionar si se aplica el protocolo SSL (HTTPS) .

Inspección de elementos

Para comenzar la inspección, abra cualquier página web que desee inspeccionar, asegúrese de que esté completamente cargada y presione el marcador de XRAY. Obtendrás un nuevo cuadro emergente en tu navegador. Este cuadro mostrará toda la información sobre el elemento que ha seleccionado.

Usemos mi inspección de la página de inicio de XRAY como ejemplo. Digamos que quiero saber la información del modelo de caja del siguiente elemento.

Hago clic en XRAY en la barra de marcadores y selecciono el elemento. Esto me da el nombre del elemento, id, clase, jerarquía, posición, relleno, borde y margen .

Para cerrar el cuadro, solo presiona el botón X en la esquina superior derecha del cuadro o actualiza tu página para salir de la herramienta.

Pensamiento final

Además de su función avanzada de inspección de modelo de caja, XRAY no le proporciona la información comúnmente disponible en otras herramientas de inspección web, como el estilo o el DOM . A pesar de todo, sigue siendo una herramienta bastante útil y fácil de usar para el uso diario.

Haga que el servidor web local sea accesible en línea con Localtunnel

Durante la etapa de desarrollo, puede implementar el sitio web en un servidor local. Allí puede ejecutar, desarrollar y depurar el sitio web en una computadora localmente. Pero cuando sus clientes necesitan acceder al sitio web de inmediato, o si una de las aplicaciones que necesita utiliza un webhook que debe estar en línea para funcionar, probablemente desee tener acceso a su servidor local en línea.Ha

(Consejos de tecnología y diseño)

25 diseños de mesa de precios creativos para la inspiración

Las tablas de precios generalmente son utilizadas por compañías que ofrecen servicios y productos premium durante el proceso de registro. Sin duda, una tabla de precios bien diseñada puede atraer a más clientes y convertir más ventas . Por lo tanto, es fundamental hacer que la tabla de precios o la página sea lo más clara y fácil de usar posible. Pero e

(Consejos de tecnología y diseño)