Navegador

Atajos

• F12:
  abrir las herramientas de desarrollo
• F11:
  abrir la consola de depuración
• ctrl + u:
  ver el html de una pagina
• ctrl + t:
  abrir una nueva pestaña
• ctrl + shift + t:
  reabir ultima pestaña cerrada
• ctrl + w:
  cerrar la pestaña actual
• ctrl + e:
  buscar en google (seleccionar barra superior de busqueda)
• ctrl + f:
  buscar en la pagina
• ctrl + p:
  imprimir pagina (tambien se puede guardar como pdf)
• ctrl + tab:
  mover entre pestañas

Extensiones

• Angular DevTools:
  herramientas para desarrollo de angular

• Axe:
  Muestra problemas de accesibilidad en la pagina, agrega una pestaña a las devtools

• Colorzilla:
  para ver los colores de los elementos de la pagina

• css peeper:
  inspeccionar los estilos de los elementos de la pagina

• daily dev:
  noticias del mundo de la programacion

• dimensions:
  ver dimensiones de los elementos de la pagina

• Font finder:
  muestra los estilos de las fuentes de la pagina

• json formatter:
  formatear json

• json viewer:
  muestra los json bonitos

• svg grabber:
  extraer los svg de una pagina

• Tailwind DX:
  herramienta para desarrollo con tailwind

• visbug:
  tiene varias herramientas de desarrollo

• Visual inspector:
  muestra las propiedades css de la pagina

• Wappalyzer:
  ver que tecnologias usa la pagina

• Web developer:
  distintas herramientas para desarrollo web

• WhatFont:
  ver fuentes que usa la pagina

• Web Vitals Muestra 6 métricas de rendimiento, la puntuación Core Web Vitals y datos de usuarios reales.
  Ir a la configuración y activar Console logging.

Otros

• Ver el resumen del css de una pagina, doy click derecho en la pagina, inspeccionar, doy en los 3 puntos de la derecha, doy en more tools, doy en css overview

• en las devTools de chrome, estando en consola, doy en el icono de la rueda a la derecha y activo selected context only, para dejar solo el contexto que yo estoy trabajando y no de librerias externas que pueda tener en el proyecto

• en las devTools de chrome, doy en los tres puntos de arriba a la derecha, more tools, coverage, pongo a grabar y recargo la pagina, este me muestra que es lo que no se esta usando

Ver rendimiento de una página

En las devTools del navegador, en cobertura, miro el código que no se usa y reviso en los
archivos que es lo que no se usa.
En red, filtro por imágenes y veo si no hay imágenes optimizadas, también puedo ver otros recursos como el JS o el CSS.
En performance insight, veo como cargan los recursos.