Cómo inspeccionar correctamente un sitio web

Tanto si es un desarrollador que está probando nuevas funciones en un proyecto como si es un diseñador que quiere ver más de cerca el código HTML y CSS, hay muchas razones para inspeccionar un sitio web y sus elementos. Sin embargo, saber por dónde empezar puede parecer confuso (al principio).

Afortunadamente, puede usar varias herramientas, técnicas y trucos simples para inspeccionar los elementos web correctamente. Además, hay opciones para casi todos los navegadores y sistemas operativos (SO).

En esta publicación, discutiremos por qué es posible que desee inspeccionar un sitio web. Luego, lo guiaremos a través de algunas de las mejores herramientas que puede usar antes de explicarle qué buscar. ¡Saltamos!

Por qué debería inspeccionar un sitio web

Hay varias razones por las que es posible que desee inspeccionar un sitio web. Por ejemplo, es posible que necesite solucionar un problema o encontrar una información específica.

La inspección de elementos web en un navegador permite a los desarrolladores, diseñadores y especialistas en marketing digital de WordPress manipular la apariencia de una página web y probar los cambios. Es más probable que los desarrolladores o evaluadores usen esta función para depurar un elemento en particular, realizar pruebas de diseño o realizar una edición de CSS en vivo.

La inspección de elementos web también es útil para los diseñadores web. Si desea probar rápidamente un cambio de color o una nueva fuente, puede hacerlo sin profundizar en su código CSS.

Además, los especialistas en marketing digital pueden usar una herramienta Inspeccionar elemento para ver cómo ciertos cambios afectarían la apariencia general de una página web. Por ejemplo, es posible que desee probar un nuevo botón de llamada a la acción (CTA) o un esquema de color diferente. Puede usar herramientas para replicar las actualizaciones sin realizar ningún cambio en su sitio en vivo.

Finalmente, inspeccionar un sitio web puede ser una excelente manera de aprender cómo se construye y funciona un sitio web. Si está interesado en obtener más información sobre el desarrollo web, la inspección de sitios es una forma excelente de comenzar.

Las mejores herramientas y extensiones para inspeccionar un sitio web

Hay varias herramientas y extensiones diferentes que puede usar para inspeccionar un sitio web. ¡Estas son algunas de las opciones más populares!

Inspeccionar elemento

La herramienta Inspeccionar elemento es la opción más común. Le permite mirar de cerca el código HTML y CSS que compone una página web. También puede usarlo para editar en vivo el CSS y ver cómo se verían sus cambios sin realizar modificaciones permanentes.

Aunque está disponible como una extensión de Google Chrome, la herramienta Inspeccionar elemento también viene con todos los principales navegadores. La característica es parte de Chrome Developer Tools, un conjunto de programas que le permite inspeccionar y editar el código HTML y CSS de una página web.

Para acceder a las herramientas para desarrolladores de Google Chrome, simplemente presione Ctrl+Shift+I (o Cmd+Opt+I en una Mac). También puede acceder a las herramientas abriendo el menú de Chrome y seleccionando Más herramientas > Herramientas para desarrolladores :

Puede acceder a las mismas herramientas de desarrollador en otros navegadores. Por ejemplo, Firefox Developer Tools tiene características similares. Para acceder a las herramientas, simplemente presione Ctrl+Shift+I (o Cmd+Opt+I en una Mac). También puede encontrar las herramientas abriendo el menú de Firefox y seleccionando Desarrollador web > Inspector.

Además, Safari Developer Tools le permite inspeccionar y editar el código HTML y CSS de una página web en dispositivos Mac. Simplemente presione Cmd+Opt+I . También puede abrir el menú Safari y seleccionar Preferencias > Avanzado > Mostrar menú Desarrollar en la barra de menú .

NavegadorPila

Otra plataforma que puede usar para probar sitios web es BrowserStack:

Esta plataforma de prueba basada en la nube funciona con todos los principales navegadores y dispositivos. Después de registrarse para una prueba gratuita, puede navegar al panel de Live y elegir su sistema operativo.

Luego, puede seleccionar su versión de navegador preferida para iniciar una sesión en vivo en su navegador. Finalmente, puede navegar por el sitio web que desea inspeccionar como lo haría a través de Inspeccionar elemento.

Cómo inspeccionar un sitio web

Echemos un vistazo a cómo puede inspeccionar un sitio web con la herramienta Inspeccionar elemento. Comience simplemente haciendo clic con el botón derecho en cualquier elemento de la página web y seleccionando Inspeccionar en el menú contextual:

Esto abrirá la herramienta Inspeccionar elemento en su navegador. Una vez que la herramienta está abierta, puede comenzar a manipular el código HTML y CSS para ver cómo afectaría la apariencia de la página web.

Por ejemplo, puede cambiar el color de un elemento, agregar o eliminar una clase o incluso cambiar la posición de un elemento. También puede usar el campo de búsqueda en la parte superior para buscar un fragmento de texto o una imagen.

Por supuesto, cualquier cambio que realice con Inspeccionar elemento es solo temporal. No se guardarán cuando actualice la página o cierre el navegador. Sin embargo, esta es una excelente manera de probar cómo se verían los cambios específicos sin alterar permanentemente su sitio web.

También puede acceder a la herramienta presionando Ctrl+Shift+I (o Cmd+Opt+I en una Mac) para abrir las herramientas de desarrollador . Luego, haga clic en la pestaña Elementos en la parte superior de la ventana:

Finalmente, también puede acceder a Inspeccionar elemento abriendo el menú de Chrome y seleccionando Más herramientas > Herramientas para desarrolladores , que discutimos anteriormente.

Cómo cambiar un elemento

Si desea cambiar un elemento en una página web, haga clic derecho sobre él y seleccione Inspeccionar . En el panel Elementos que se abre, busque la parte que desea cambiar y haga doble clic en ella.

Cuando abre el cuadro Elementos , puede usar el ícono del cursor Inspeccionar en la parte superior izquierda del panel para resaltar el código fuente del elemento que desea modificar. Cuando haga clic derecho en el código resaltado, seleccione Editar como HTML :

El cuadro se expandirá, luego puede cambiar el texto. Para obtener una vista previa de los cambios, puede anular la selección del elemento. También puede hacer doble clic en el texto para editarlo.

También puede usar esta técnica para cambiar el código CSS de un elemento. Para hacer esto, haga clic derecho sobre él y seleccione Inspeccionar . En el panel de elementos, busque el elemento que desea cambiar y elija la propiedad element.style . Luego puede agregar su código o declaraciones entre llaves.

Cómo ocultar o eliminar un elemento

También puede ocultar o eliminar un elemento en una página web. Una vez que haya encontrado el elemento que desea ocultar o eliminar, haga clic derecho sobre él y seleccione Inspeccionar para iniciar la herramienta Inspeccionar elemento.

Desde aquí, haga clic derecho en el elemento, luego seleccione la opción Eliminar elemento u Ocultar elemento :

El botón Eliminar elimina el elemento Modelo de objetos de documento (DOM). El botón Ocultar simplemente ocultará el elemento, pero seguirá estando en el DOM.

Cómo inspeccionar clases CSS

Hay varias formas de inspeccionar las clases CSS. Sin embargo, el método más sencillo es hacer clic con el botón derecho en el elemento que desea revisar y seleccionar Inspeccionar . Luego abra la pestaña Estilos para ver sus estilos CSS:

Tenga en cuenta que esta pestaña solo muestra los estilos en línea que se aplican y no los que provienen de una hoja de estilo.

Si desea ver todos los estilos CSS que se aplican a un elemento, puede usar la pestaña Calculado . Le muestra todos los estilos CSS que se aplican a un elemento, incluidos los de una hoja de estilo:

Cuando termine de inspeccionar una página web, simplemente cierre la herramienta Inspeccionar elemento. Sus cambios no se guardarán, por lo que no tiene que preocuparse por romper algo accidentalmente.

Qué buscar al inspeccionar un sitio web

Sea cual sea el método que utilice para acceder a Inspeccionar elemento, verá la misma interfaz. Consta de dos paneles: el panel HTML y el panel CSS.

El panel HTML le muestra la estructura de la página web. Puede ver cómo los diversos elementos están anidados y relacionados.

El panel CSS le muestra los estilos aplicados al elemento seleccionado. También puede editar las reglas de CSS para ver cómo sus cambios afectarían la apariencia del elemento.

Si está buscando algo específico en un sitio web, ya sea un determinado texto o una imagen, puede usar Inspeccionar elemento para ayudarlo a encontrarlo. Tiene un campo de búsqueda donde puede buscar un elemento en particular.

Cuando está inspeccionando un sitio web, hay algunas cosas que debe tener en cuenta:

• HTML: El código que define la estructura de la página web. Preste atención a la forma en que se organizan los elementos y cómo interactúan entre sí.
• CSS: El código que define el estilo de la página web.
• JavaScript : El código que define el comportamiento de la página web. Influye en cómo interactúan los elementos y cómo responde la página a la entrada del usuario.
• Diseño : la apariencia general del sitio web. Influye en qué tan fácil de usar es el diseño y qué tan bien se ajusta al propósito del sitio web.
• Contenido: el texto, las imágenes y otros medios del sitio web.

Lo que debe buscar al inspeccionar un sitio web dependerá principalmente de si es diseñador, desarrollador o comercializador digital. Como discutimos anteriormente, la herramienta Inspeccionar elemento puede ayudarlo con todo, desde pruebas de diseño hasta problemas de solución de problemas.

Conclusión

Inspect Element es una característica valiosa para diseñadores y desarrolladores. Puede usarlo para ver y editar el HTML y CSS de una página web. Esta herramienta puede ser útil cuando desea realizar cambios en una página web en la que está trabajando o ver cómo está codificada.

Inspeccionar elemento está disponible en la mayoría de los navegadores web. Puede acceder a él haciendo clic con el botón derecho en una página web y seleccionando Inspeccionar en el menú. Una vez que haya abierto la ventana Inspeccionar , verá el código HTML y CSS de la página web y podrá realizar varios cambios.

¿Necesita ayuda con la administración u optimización de su sitio web? ¡Aprenda cómo WP Engine puede ayudarlo con todo, desde el alojamiento de WordPress hasta la administración de sitios y clientes!