Las herramientas de desarrollador son una función integrada en todos los navegadores principales, no necesitas instalar ningún complemento; al presionar F12 o hacer clic derecho en la página y seleccionar inspeccionar, puedes abrirlas. Originalmente diseñadas para desarrolladores web, proporcionan una perspectiva de observación bastante directa a cualquiera que quiera entender lo que se está haciendo detrás de la página.
Panel de Elements: Observa la verdadera estructura de la página
Cuando abres las herramientas de desarrollador, normalmente se muestra por defecto el panel Elements, que es la estructura HTML de la página. Cada elemento que ves en la página, texto, imágenes, botones, formularios, corresponde aquí a un fragmento de código HTML. Al hacer clic en el icono de cursor en la esquina superior izquierda del panel y luego mover el cursor sobre cualquier elemento en la página, las herramientas de desarrollador automáticamente saltarán a la ubicación HTML correspondiente. Esta función tiene varios escenarios de uso práctico: Ver elementos ocultos de la página Algunos sitios web configuran ciertos contenidos como ocultos, como explicaciones colapsadas, campos de formularios ocultos, o sugerencias que solo se muestran bajo ciertas condiciones. Estos contenidos aún pueden verse en el panel Elements, incluso si no son visibles en la página. Confirmar el objetivo real de un enlace Al encontrar un botón o enlace en el panel Elements, puedes ver a qué URL realmente apunta, confirmando si coincide con el texto mostrado. Esto es muy útil al juzgar enlaces sospechosos.
Panel de Network: Monitorea a qué servidores se envían los datos de la página
El panel Network es una de las partes más valiosas de las herramientas de desarrollador para el análisis de ciberseguridad. Al abrir el panel Network y volver a cargar la página, el panel mostrará todas las solicitudes de red realizadas durante la carga de esta página, incluyendo la URL de la solicitud, el contenido de los datos enviados, la respuesta del servidor, y el tiempo que tomó cada solicitud. ¿Qué puedes hacer con esto? Puedes ver a qué dominios de terceros envía solicitudes un sitio web y confirmar si hay destinos de transferencia de datos que no esperabas. Un sitio de noticias común podría enviar solicitudes a docenas de servidores de publicidad y rastreo, las cuales son completamente invisibles durante la navegación normal. Confirma el objetivo de envío de un formulario. Cuando llenas un formulario en una página y lo envías, el panel Network mostrará a qué URL se envió realmente este dato, lo que puede usarse para verificar si un sitio que afirma ser oficial tiene sus datos de formulario realmente enviados al servidor oficial.
Panel de Console: Observa errores y mensajes de ejecución de la página
El panel Console muestra el registro de ejecución de JavaScript de la página, incluyendo mensajes de error, advertencias, y salidas de depuración escritas por desarrolladores en el código. Para los usuarios comunes, el uso más directo del Console es observar si hay errores anormales en la página y si hay scripts externos desconocidos en ejecución. En la línea de entrada del panel Console, puedes ingresar comandos JavaScript para ejecutarlos directamente en la página actual; esta función permite a los desarrolladores probar rápidamente el código, pero también es un punto de entrada para ataques de ingeniería social. Algunas estafas pedirán a los usuarios que copien y peguen un fragmento de código en el Console, alegando que esto completará una acción; en realidad, se aprovechan de la acción del usuario para ejecutar comandos maliciosos. En cualquier caso, nunca debes pegar código proporcionado por fuentes desconocidas en el Console.
Panel de Application: Observa los datos que el sitio guarda en tu dispositivo
El panel Application muestra los datos que el sitio almacena en tu navegador, incluyendo cookies, LocalStorage y SessionStorage. Consultar cookies En el menú de la izquierda del panel Application, busca Cookies y selecciona el dominio del sitio actual para ver todas las cookies que este sitio ha establecido en tu navegador, incluyendo el nombre de las cookies, su contenido, la duración de validez, y si tienen la marca HttpOnly o Secure. Esto te permite ver directamente cuáles cookies están destinadas a fines de rastreo, cuáles son credenciales funcionales, y cuáto tiempo están configuradas para ser válidas.
Usando herramientas de desarrollador para juzgar si un sitio web es sospechoso
Las herramientas F12 pueden servir como una herramienta auxiliar para juzgar la credibilidad de un sitio. Los siguientes puntos de observación pueden servir como referencia: Confirmar el objetivo de envío del formulario En una página de inicio de sesión sospechosa, ingresa datos de prueba y observa la URL objetivo del formulario en el panel Network. Si un sitio que afirma ser la página de inicio de sesión de Google o Facebook tiene como objetivo el envío del formulario una URL que no sea accounts.google.com o facebook.com, esto constituye una indicación clara de una página de phishing. Verificar la fuente de los recursos externos que se cargan en la página En el panel Network, confirma si los recursos principales cargados en la página provienen de los dominios oficiales que afirman serlo o de un gran número de dominios de terceros no relacionados. Confirmar la información del certificado SSL Haz clic en el icono del candado junto a la barra de URL para ver quién emitió el certificado SSL de este sitio, así como su periodo de validez e información del dominio. Los verdaderos sitios oficiales generalmente tienen un certificado EV correspondiente al nombre de la
Preguntas frecuentes de los usuarios sobre las herramientas de desarrollador F12
¿Es legal ver el código fuente de un sitio web con F12?
Ver el código fuente del lado del cliente, es decir, el HTML, CSS y JavaScript que el navegador ya ha descargado a tu dispositivo para mostrar la página, es completamente legal. Para mostrar la página, el navegador necesita descargar este código a tu dispositivo; lo que F12 te permite ver son contenidos ya presentes en tu dispositivo. Es importante tener en cuenta las circunstancias limitadas en las que se intenta eludir restricciones de acceso del sitio mediante las herramientas de desarrollador, modificando solicitudes para obtener datos no autorizados, o utilizando herramientas para realizar pruebas en el sitio; estas acciones sin autorización pueden involucrar problemas legales. Simplemente ver y observar no constituye ningún problema legal.
¿Ejecutar comandos en Console afectará al servidor del sitio?
No afectará directamente. Los comandos JavaScript ejecutados en el Console operan en tu propio entorno de navegador y no afectan directamente al servidor del sitio; lo que cambia es el estado de presentación local de esa página en tu navegador, que se restaurará a su estado original una vez que recargues la página. Sin embargo, si los comandos que estás ejecutando incluyen operaciones que envían solicitudes al servidor, como enviar formularios o activar llamadas API, entonces no son solo cambios locales. De todos modos, no ejecutes ningún comando de Console proporcionado por fuentes desconocidas.
El panel Network muestra demasiados datos, ¿cómo puedo encontrar información útil rápidamente?
El panel Network proporciona varias funciones de filtrado que pueden ayudar a reducir el volumen de datos. La barra de filtrado en la parte superior del panel permite ingresar palabras clave para filtrar solicitudes específicas; por ejemplo, ingresar partes del dominio que te interesan mostrará solo las solicitudes relevantes. Los filtros de tipo te permiten visualizar solo solicitudes del tipo XHR o Fetch, que son las que normalmente envían datos en segundo plano; al filtrar imágenes y estilos, es más fácil identificar solicitudes de datos significativas. Para quienes deseen confirmar el objetivo del envío del formulario, observar nuevas solicitudes que aparezcan en el panel Network en el momento del envío del formulario normalmente puede ayudar a localizar el objetivo rápidamente.
Una clave importante: Las herramientas para desarrolladores F12 permiten a cualquier persona ver los detalles técnicos debajo de la superficie de una página web, desde confirmar los objetivos de envío de formularios hasta observar el comportamiento de seguimiento de la página. Es una herramienta de análisis web que se puede utilizar sin ningún conocimiento técnico y es uno de los medios más directos para evaluar sitios web sospechosos.