¿Tienes alguna duda sobre cómo ver el código fuente del elemento visual en tu Chromebook? Para ello puedes utilizar las herramientas especiales DevTools en la aplicación Google Chrome, o en cualquier página del navegador. Las DevTools son una lista de herramientas especiales para desarrolladores que están integradas en el navegador Google Chrome. Permite a los usuarios editar páginas sobre la marcha y hacer un seguimiento de los posibles problemas.
Cómo utilizar Inspect Element en un Chromebook
En el caso de los Chromebooks el navegador por defecto es el de Google, para abrir las herramientas para desarrolladores en este dispositivo es necesario.
- Abra la página que desee
- Haga clic en los 3 puntos de la esquina superior derecha de la aplicación
- Seleccione «Más herramientas«
- Haga clic en «Herramientas para desarrolladores«.
Otras formas de acceder a esta función son pulsar el botón F12 o hacer clic con el botón derecho del ratón en el elemento deseado
Esta es una instrucción universal que se aplica a la mayoría de los navegadores en Windows o en cualquier otro sistema.
Cómo utilizar Inspect Element en Mac o Iphone
¿Es posible hacer lo mismo utilizando un Mac o incluso un iPhone? Sólo tienes que seguir unos sencillos pasos a continuación:
Cómo utilizarlo en Mac
Si tienes un Mac, tu mejor opción de navegador es Safari. Abrir las Herramientas para desarrolladores en este navegador es ligeramente diferente del mismo proceso en Chrome o Firefox. Tendrá que hacerlo:
- Abrir el navegador
- Haga clic en Safari en el nombre de la pestaña
- Seleccione «Preferencias«
- A continuación, haga clic en el icono del engranaje avanzado, que se encuentra en la parte superior de la pantalla
- Marque la casilla junto a Mostrar el menú Desarrollo en la barra de menús
Una vez hecho esto, el elemento de inspección estará disponible en sus páginas web. También puedes llamarlo con CMD + Opción + I.
Cómo utilizarlo en el iPhone
Si quieres comprobar cómo se ve la versión móvil de la página web en tu iPhone utilizando la función Inspeccionar elementos, primero tendrás que activar el Inspector web para tu dispositivo iOS:
- Ir a Ajustes
- Seleccione la aplicación Safari
- Desplácese hasta la parte inferior y haga clic en «Menú avanzado«.
- Ahora active la casilla de verificación junto a «Inspector Web«
También tienes que habilitar el menú Desarrollar en tu Mac como se indica más arriba. Una vez que hayas habilitado estas funciones en tu dispositivo iOS y en tu Mac, deberías poder ver el menú Desarrollar en la parte superior de tu Mac. Tienes que hacer clic en él para ver el iPhone adjunto y la página web abierta en él. Cuando cambies a una página diferente, también cambiarás la ventana del Inspector Web para esa página en tu Mac
Qué es el Panel Elemental
Lo primero que hay que saber es qué es el Panel de Elementos. Si quieres cambiar el diseño o cualquier elemento externo de la página, necesitas editar tu CSS o HTML. Puedes hacerlo utilizando una herramienta para desarrolladores llamada Panel de Elementos. Te permitirá revisar y cambiar tu página desde el front-end. Algunos de los elementos que puedes ver allí son :
- Información sobre la imagen, como su tamaño y su origen
- Panel CSS – esta opción se utiliza para cambiar el estilo externo de la página. Aquí puede cambiar los parámetros como las fuentes, los tamaños, los colores
- Información DOM o panel DOM con esta opción puedes controlar la apariencia de la página. Puede cambiar la posición de los elementos y navegar completamente a los archivos HTML
- El panel de la consola presenta las nuevas características bajo las herramientas para desarrolladores
- Escuchadores de eventos de elementos
- Comentarios HTML
- Comentarios
Inspección de los tamaños renderizados y naturales de una imagen
Muy a menudo se necesita saber información sobre una imagen en una página web, se puede «inspeccionar». Esto te da la posibilidad de conocer el tamaño de la imagen, por ejemplo. Para ello debes pasar el puntero del ratón por encima de esa IMG mientras estás en el árbol DOM
Inspección de la imagen utilizada en particular de un conjunto de fuentes (srcset)
Entonces puede comprobar qué versión de la imagen se cargó y cuál es la fuente srcset exacta. El srcset ayudará al navegador a solicitar la versión de la imagen con el tamaño más pequeño, que es ligeramente mayor que la imagen real. Esto se utiliza para ver un conjunto de imágenes con diferentes resoluciones para que el navegador elija. En primer lugar, seleccione el elemento IMG, y luego compruebe la información $0.currentSrc en la consola. Tenga en cuenta que puede aumentar las características de las imágenes con srcset si necesita utilizar dispositivos con un DPI más alto.
