Question

alguien me dice lo basico para usar la herramienta 'inspeccionar' de google?

Answer 1

La herramienta Inspeccionar o Inspeccionar elemento está disponible en Firefox y Chrome pero también en otros navegadores. Su propósito es ver los entresijos de una página web, realizar cambios locales(que solo veremos nosotros) y conocer secretos como las fuentes de letra que emplean.

Veamos qué podemos hacer con esta herramienta.

Inspeccionar elemento

Mozilla Firefox tiene distintas maneras de ver los entresijos de una página web. Al hacer clic derecho en una página web abierta, veremos opciones como Ver código fuente de esta página o Ver información de esta página.

La primera es obvia, muestra el código fuente de la página que tengamos abierta, mientras que con la segunda opción veremos metadatos, las imágenes que contiene esa página, los permisos de esa página para controlar el navegador (cookies, cargar imágenes, preguntar la posición en el mapa) e información sobre su certificado de seguridad, si lo tiene.



Pero donde realmente encontraremos información interesante es en Inspeccionar elemento, también accesible desde el menú contextual de Firefox, desde el menú de Firefox (Desarrollador Web > Inspector) y con la combinación de teclas CTRL+Mayúsculas+C. En macOS, Opción+Comando+C.

Por su parte, Google Chrome permite activar esta opción desde el menú contextual e Inspeccionar o con el atajo de teclado CTRL+Mayúsculas+I(en macOS es Opción+Comando+I). También lo encontraremos en el menú de Chrome, en Más herramientas > Herramientas para desarrolladores.

Dividido en pestañas, con la función Inspeccionar elemento sabremos más de la página web que estamos visitando.

Desde Inspector (Elements en Chrome) veremos el código fuente. Ayudados del buscador integrado, encontraremos partes concretas, como por ejemplo extensiones de imágenes o vídeos. Chrome, por desgracia, no integra buscador.

Colores y fuentes de letra

Dos datos interesantes para diseño que encontraremos en Firefox son los colores empleados en la página web (para ello debemos usar el icono a la derecha de Buscar HTML y que muestra una lupa con el código de color según dónde coloquemos el ratón.

En segundo lugar, desde la pestaña Tipografía veremos qué fuentes de letra emplea.

En el caso de Chrome, la búsqueda deberemos hacerla en el código, ya que no incluye estas opciones.

Diseño adaptable

En Firefox, si pulsamos en el icono de la derecha de la barra de Inspeccionar elemento activaremos el visor de diseño adaptable. En Chrome lo encontraremos a mano izqueirda. Con él veremos el sitio web que estamos visitando según diferentes tamaños de pantalla y dispositivos.

Esta función está muy bien porque simular diferentes pantallas. Pulsando en “No hay dispositivo seleccionado” encontraremos distintos modelos de Nexus, Samsung, iPhone y iPad. Incluso puedes indicar una resolución específica.



En el caso de Chrome, deberemos pulsar en Responsive, y para personalizar una resolución, en Edit…

Y desde el botón de la derecha, en Firefox, es posible “girar el dispositivo” de vertical a horizontal. Además, desde la barra flotante de opciones, con el icono en forma de cámara, podremos realizar una captura.

Editor de estilo

Si tienes conocimientos de HTML y CSS, la pestaña Editor de estilo te permitirá jugar con la disposición de una página web, ya que podrás realizar cambios en su código que sólo verás tú.

Estos cambios se pueden guardar e importar, de manera que podrás ver una página web a tu manera desde tu propio navegador.

En Chrome, podemos crear reglas de estilo desde Elements > Styles o cambiar los estilos directamente. En este sentido, se nos facilitan botones para cambiar elementos concretos, como sombreados o colores de letra y fondos.

Rendimiento y memoria

Como curiosidad, o para analizar cuán rápida es tu página web, las pestañas Rendimiento y Memorianos ayudan a analizar la velocidad de carga de cada elemento y el uso que hacen de la memoria. En Chrome reciben el nombre de Performance y Memory.

Obviamente, cuantos más elementos y funciones incluya una página más tardará en cargar y más memoria empleará, pero siempre podemos optimizar la carga.

Seguridad

Chrome cuenta con una pestaña adicional para comprobar la seguridad de una página web.

En concreto, nos indica si la página carga por defecto como HTTPS y si el certificado está al día y es fiable. Además, podemos echarle un vistazo, al igual que podemos hacer en cualquier momento desde el icono en forma de candado de la barra de direcciones.

Audits

Otra función propia de Chrome en Inspeccionar elemento es la pestaña Audits, que sirve para realizar un análisis a fondo de la página web que tenemos abierta.



Su propósito es realizar distintos análisis relacionados con la velocidad de carga, si es compatible con dispositivos móviles, si es accesible y si cumple con los estándares SEO.

El proceso es relativamente rápido y obtendremos información amplia que nos servirá para mejorar nuestra propia página o para conocer mejor las páginas que solemos