¿Qué son las DevTools y cómo sacarles partido en desarrollo y debugging?
Las Devtools son el conjunto de herramientas que se encuentra disponible en los navegadores para examinar de una manera precisa y detallada las páginas web, y todo lo que rodea a estas, cuando se están ejecutando en el cliente web.
¿Qué son las DevTools?
Las dev tools, en español conocidas como herramientas para desarrolladores, son un conjunto de utilidades integradas en el navegador que permiten conocer con exactitud cómo se están ejecutando las páginas web.
Si quieres puedes entenderlas como una «puerta de atrás» para observar cada pequeño detalle que ocurre en una página web, desde la estructura del documento hasta cada una de las innumerables conexiones que hace el navegador con cualquier servidor, pasando por el registro de logs de los lenguajes que participan en una página web o el almacenamiento que hace el navegador de los datos de los usuarios.
Paneles principales de las DevTools
Todas las funcionalidades que nos ofrecen las herramientas de desarrollo se encuentran divididas en varios paneles. cada uno de ellos nos permite examinar una cosa en particular.
Vamos a ver en resumen cuáles son estos paneles, al menos los más importantes y que no deberías dejar de dominar, de modo que sepas que nos permiten examinar.
Panel de Elementos
El panel de elementos es el primero que aparece cuando abrimos las herramientas de desarrollo. En este panel podemos ver cada uno de los elementos HTML que forman parte de la página que se está ejecutando y su estructura de árbol. Es una especie de código fuente HTML de la página pero una vez ha sido procesado por el navegador.
Si pulsamos sobre cualquier elemento en el inspector obtendremos una información detallada del mismo, como por ejemplo sus estilos CSS. Incluso hay una herramienta para inspección que permite seleccionar un elemento de la página que se está visualizando para encontrar la etiqueta que corresponde en el panel de elementos.
A través de este panel también podemos realizar modificaciones en caliente sobre los elementos de la página pudiendo cambiar su contenido eliminarlos o cambiar los estilos aplicados en ellos.
La Consola de JavaScript
La consola deja JavaScript es otro de los paneles estrella dentro del conjunto de herramientas de las DevTools. Consiste en un log de ejecución de del lenguaje JavaScript, en el que aparecen todo tipo de mensajes que pueden resultar relevantes para los desarrolladores, desde errores, advertencias, hasta simples mensajes de depuración que puedan haberse enviado a la consola desde el código de JavaScript.
La consola es importantísima cuando trabajamos con JavaScript porque es ahí donde aparecerán todos los problemas que pueda tener una página. Gracias a las descripciones que encontraremos en la consola de cada uno de los errores o advertencias podremos saber qué es lo que está pasando y por qué las cosas no funcionan como esperamos cuando existen problemas en la web.
Panel de Red (Network)
El panel de red nos ofrece una información extremadamente exhaustiva sobre cada una de las solicitudes que hace el navegador cuando visita una página web. Como sabrás, cuando un navegador entra en una página inmediatamente descarga toda una serie de componentes como por ejemplo imágenes, archivos CSS, JavaScript y muchos otros elementos.
Cada una de esas solicitudes realizadas aparece en el panel de Network de modo que podemos encontrar información detallada que incluye datos como las cabeceras HTTP de la solicitud y la respuesta, el tiempo que un recurso ha tardado en transferirse, el código HTTP de la respuesta del servidor y muchas otras cosas.
Panel de Fuentes (Sources)
El panel de fuentes también resulta bastante importante porque nos permite estudiar de una forma más ordenada cada uno de los elementos que el navegador está utilizando para ejecutar una página. Así como en el panel de Network los elementos se listan de manera secuencial a medida que han sido recibidos por el navegador, en el panel de sources aparecen ordenados por tipo y procedencia. Además podemos examinar su contenido de una manera más detallada.
Este panel es básico también para la depuración, ya que nos permite poner puntos de parada en las líneas de código específicas donde queremos detenernos a examinar el estado de nuestras variables.
¿Cómo sacar partido a las DevTools para el Debugging?
La mayor parte de las veces que abrimos las DevTools lo hacemos para depurar las páginas web. Con depurar nos referimos a encontrar explicaciones al funcionamiento errático o erróneo de la página en un determinado momento.
Inicialmente podríamos pensar que la depuración es algo relacionado con la ejecución de programas en lenguajes como JavaScript pero en realidad va bastante más allá. También es importante para conocer por qué los elementos se presentan renderizan de una manera en particular y no como estábamos quizás esperando.
Debugging de CSS
La depuración del CSS se realiza a partir del panel de elementos. Es tan sencillo como pulsar un elemento dentro de la estructura de árbol que tiene toda página web y encontrar el detalle del CSS que se aplica a dicha etiqueta. También podemos pulsar con el botón derecho dentro de la propia página web y seleccionar «inspeccionar» para ver ese elemento resaltado en el panel de elementos, con su CSS correspondiente.
Cuando analizamos el CSS veremos que existen muchas más reglas de las que en principio nosotros habríamos aplicado al elemento con nuestras propias hojas de estilo. Y es que el CSS se aplica en cascada de modo que un elemento hereda gran parte de los estilos que tienen los elementos padre. Por este motivo a veces el análisis puede ser un poco confuso pero sin duda es extremadamente completo y detallado.
Además el panel de CSS también nos permite activar y desactivar unos checkbox que hay al lado de cualquier estilo, de modo que podamos ver qué pasaría si esos estilos no estuviesen ahí. Otras cosas interesantes que nos permiten hacer es agregar estilos en caliente y de manera específica en cualquier elemento, así como observar qué estilos están siendo sobrescritos por otros con mayor prioridad o qué estilos se están aplicando de manera incorrecta.
Depuración de JavaScript
La depuración de JavaScript es bastante más compleja y sofisticada. La podemos hacer de diversas maneras siendo la más sencilla abrir la consola de javascript para analizar los mensajes que encontramos en ella.
Nosotros como desarrolladores podemos también enviarnos mensajes a la consola en los cuales podemos volcar el contenido que tienen nuestras variables. Con líneas como la siguiente:
console.log('Esto es un mensaje a la consola');
console.log('Este es el contenido de la variable:', variable);
De ese modo podemos saber por dónde van pasando nuestros el flujo de ejecución de nuestros programas y qué contenido tienen ciertas variables cuando Javascript pasó por ahí.
Además, como dijimos, antes también disponemos del panel sources para analizar con detalle el código concreto que el navegador está ejecutando. El panel Sources es bastante más desconocido que la consola pero resulta muy poderoso a la hora de depurar ya que nos permite hacer interrupciones en el código en el flujo de ejecución del código JavaScript para detenerlo y observar cómo estaban las variables en un instante en particular.
Para conseguir eso simplemente tenemos que abrir el archivo que necesitamos debuggear de Javascript en el panel de Sources y hacer clic en el lateral izquierdo de la línea donde queremos parar el flujo de ejecución de Javascript. Al refrescar la página el intérprete de Javascript parará en ese punto y podremos inspeccionar con detalle todo lo que queramos.
Simulación de dispositivos móviles y pruebas de diseño responsivo
Otra cosa que se usa mucho en las herramientas de desarrollo es el panel de pruebas de tamaños de pantalla. Este nos permite depurar el funcionamiento para dispositivos, ajustando las dimensiones del viewport a las propias de cualquier dispositivo que necesitemos, o cualquier tamaño arbitrario.
Gracias a esta funcionalidad podemos ver como se presenta la página para distintos dispositivos, de modo que podemos conseguir un ajustado diseño responsivo bastante afinado. Está claro que solo estamos simulando las dimensiones de pantalla, pero en términos de diseño es suficiente para poder conseguir el objetivo del responsive design.
Pruebas de condiciones de red
Otra de las funcionalidades esenciales para la depuración la encuentras en el panel de red. En la parte de arriba del panel Network hay algunos controles para poder ajustar las condiciones de red del navegador de modo que podemos simular varios estados de conexión con distintos niveles de velocidad por ejemplo redes 4G o 3G. Incluso podemos simular el estado de desconexión sin necesidad de perder la conexión a Internet del ordenador, algo que puede venir muy bien cuando desarrollamos progressive web apps y sus funcionalidades de trabajo offline.
Optimización de rendimiento y Core Web Vitals
Ahora vamos a introducirnos en otro área fundamental de las DeevTools que es la optimización del rendimiento. Este es un tema esencial en la web actual ya que el rendimiento afecta de manera directa a la experiencia de usuario, que a su vez condiciona el posicionamiento en buscadores de las páginas web.
Panel de Rendimiento (Performance)
Existe un panel dedicado específicamente al rendimiento dentro de las herramientas de desarrollo. En ese panel podemos encontrar las métricas más importantes para entender hasta qué punto el performance de nuestra página está o no dentro de los límites deseables, en aspectos de las Core Web Vitals, como LCP o LCS.
Además podemos hacer una captura de nuestras acciones dentro de la página para conseguir datos super detallados sobre el rendimiento durante la navegación en la página.
Auditorías con Lighthouse
Además del panel de Performance también resulta muy útil la pestaña dedicada a Lighthouse, que es una antigua extensión que ahora se integra en las herramientas de desarrolladores. Lo que conseguimos hacer con Lighthouse es una auditoría del rendimiento de la página web en aspectos diversos como su velocidad, su optimización para buscadores o la accesibilidad.
Si queremos estudiar cada uno de los aspectos que afectan a la optimización y experiencia de usuario esta es la herramienta más relevante y a la vez más básica que tenemos a nuestra disposición, por lo menos para un primer acercamiento a una profundidad media. Resulta esencial no solo porque detecte los problemas, sino además porque ofrece soluciones para poder realizar las optimizaciones necesarias.
Panel de Aplicación (Application)
Ya si quieres analizar con más profundidad el funcionamiento de tus páginas en algún momento te tendrás que detener también en el panel Application.
Este panel es importante para conocer aspectos detallados sobre los recursos que tenemos en Javascript para conseguir funcionalidades de las aplicaciones web, más allá de los elementos HTML de la página.
Aquí encontraremos detalles sobre el almacenamiento en el local storage, las cookies, los service workers, los archivos que se encuentran cacheados y muchas otras cosas avanzadas. Te permite no solo observar todos estos recursos de tu navegador sino también realizar una limpieza o edición en caliente de los mismos para observar lo que pasa con la página.
Memory Insights
Hoy las páginas web han dejado de ser simples documentos con texto e imágenes, para convertirse en auténticas aplicaciones capaces de realizar prácticamente cualquier cosa que se nos pueda ocurrir. Es por ello que necesitamos herramientas como los Memory Insights, que nos permitan comprender mejor cómo se gestiona la memoria en el navegador.
Básicamente se trata de un panel que nos permite ver cómo se organiza la página en lo que respecta a la memoria consumida. De este modo podemos analizar en profundidad y en tiempo real en que se están consumiendo los recursos de memoria y detectar posibles fallos o anomalías.
La verdad es que esta es una herramienta bastante sofisticada que permite analizar aspectos un poco avanzados. Si estás empezando quizás no sea el momento de preocuparte con ella, pero ya te adelantamos que podrás verificar cosas como el mapa completo de objetos vivos y sus dueños, las asignaciones en tiempo real para detectar acumulaciones o conseguir insights automáticos para saber dónde hay posibles problemas.
Funciones avanzadas y trucos de productividad en 2026
Todo lo que hemos visto hasta este punto se encuentra entre los elementos más esenciales (incluso otros no tan básicos) que necesitas dominar sí o sí en las herramientas de desarrollo. Ahora bien, existen muchos otros recursos y flujos de trabajo más avanzados que podrías utilizar. Vamos a ver ahora los flujos de trabajo más relevantes con las herramientas para desarrolladores en 2026, basados en IA, automatización, depuración de flujos, etc.
Uso de la consola con Inteligencia Artificial
Hace poco ha aparecido una nueva funcionalidad relacionada con la consola, que nos permite realizar preguntas sobre la página que se está ejecutando para que consigamos comprender mejor el proceso que sigue.
Así, podemos hacer preguntas de todo tipo sobre lo que estamos construyendo, como cualquier otro asistente de IA, solo que teniendo en cuenta de manera precisa el contexto del navegador. Sólo necesitas pedirle ayuda en cualquier problema que puedas encontrar o resolver dudas específicas sobre el funcionamiento de cualquier página. También puedes pedirle generar fragmentos de código, traducir errores para que puedas entenderlos mejor o incluso que te sugiera mejoras en el código.
Muchos de los paneles tienen opciones específicas de IA que podrás explorar para conseguir mejorar la experiencia en el análisis de los datos que te aportan las DevTools.
Las funcionalidades de IA no vienen activas de casa, al menos por el momento. Veremos unos iconos para activarlas que nos llevarán a una pantalla donde tendremos que seleccionar las funcionalidades que deseamos tener incorporadas.
Grabadora de flujos (Recorder)
La grabadora de flujos (también conocida como Recorder) es una utilidad que no resulta demasiado conocida por los desarrolladores pero que puede ayudar mucho sobre todo a la hora de gestionar pruebas.
No se limita a grabar clics, ahora es capaz de crear flujos inteligentes y reproducibles que luego podrías exportar para poder usarlos directamente en herramientas como Playwright.
Overrides locales
Los overrides locales son como una especie de sandbox seguro donde puedes modificar archivos JS, CSS o incluso las respuestas de una API sin tocar el servidor real. Esto nos permite darle una versatilidad todavía mayor a los programas que estamos usando, sin tener que escribir el código. Luego, cuando ya tenemos claro lo que necesitamos, entonces puedes implementarlo de una manera más directa y certera.
Algunas ideas de lo que podemos conseguir con los overrides locales son, por ejemplo, probar un dato que debería producir una situación de error, o simular que una API devuelve otros datos, o que está caída, o devolviendo un estado de HTTP particular.
Por si no los encuentras, los overrides locales están en el panel de Sources y luego en el subpanel de Overrides.
Edición de estados de componentes en frameworks modernos (React, Vue, Angular, Lit)
Lo mejor de las DevTools hoy es que ya no ven solamente etiquetas, sino que son capaces de entender los frameworks. Ya sea de manera nativa como cuando usamos Web Components con Lit, como por medio de una extensión específica para el framework podemos hacer cosas como conocer el estado de la página, cambiarlo en caliente, acceder y modificar propiedades de componentes, etc.
Chrome DevTools vs. Firefox Developer Tools
Hoy casi todo el mundo utiliza Google Chrome para desarrollar, sobre todo porque es el sistema más extendido entre los usuarios, pero también porque Google ha conseguido engancharnos de manera brillante a su navegador. Pero lo cierto es que la mayor parte de los avances en las herramientas de desarrollo surgieron del navegador Firefox. De hecho, hubo un día en que todos los desarrolladores trabajábamos con Firefox.
Pero quizás te hagas la pregunta ¿trabajamos con Google Chrome por simple inercia? ¿merecería la pena utilizar Firefox Developer Tools? La verdad es que ambos sistemas son muy parejos y se van dedicando a presentar novedades que muchas veces acaban adoptando y copiando el uno al otro. Vamos a ver los aspectos que creemos clave para definir sus diferencias.
Inspección de layout
Los dos navegadores tienen herramientas de desarrollo que nos permiten inspeccionar de manera detallada los elementos de la página. Como decimos, se van copiando el uno al otro. Al principio por ejemplo no sorprendió la capacidad de Firefox de interpretar el modelo de rejilla cd CSS (display grid), pero hoy las distancias son más bien pocas.
Como diferencias, en Chrome tenemos herramientas visuales muy potentes para Flexbox y herramientas específicas para las nuevas container queries de CSS. Por su parte, en Firefox tiene un mejor sistema para ver el grid y puede que guste también su visualización del box model, por lo limpia que es, sobretodo cuando tienes diseños complejos.
Diagnóstico de rendimiento
Aquí Chrome va un pasito por delante y es ideal cuando necesitamos entrar a fondo en el rendimiento. Además de datos milimétricos tienes Lighthouse integrado que está muy bien para auditorías rápidas.
La verdad es que Firefox es un poco más elemental, pero a veces esa simplicidad también ayuda porque sus métricas son más fáciles de digerir y no siempre necesitamos un análisis tan exhaustivo.
Debugging de accesibilidad
En este campo, debemos reconocer que Firefox lleva la delantera. Sobre todo gracias a su inspector de accesibilidad, que resulta bastante más didáctico. Con él podemos ver los roles ARIA de forma más clara y entender mejor cuáles son los puntos débiles de las páginas.
Gestión de red y privacidad
Firefox siempre se ha destacado en el área de la privacidad. De hecho es lo que le distingue y por lo que todavía hoy merece la pena usarlo. Aunque no sea algo tan relacionado con el mundo del desarrollo merece la pena tenerlo en cuenta cuando decidimos apoyar un navegador a través de su uso.
Ahora bien, en lo que respecta a la gestión de red, ambos tienen más o menos las mismas funciones, aunque Google siempre resulta un poco más técnico.
Integración de IA y asistencia al desarrollador
Hoy Chrome es el mejor en esta área, sin duda. Ha integrado la IA en muchos de los paneles y le podemos sacar mucho partido. Google tiene mucho músculo en esta área, algo que Firefox no es capaz de igualar, por mucho que nos gustaría.
Preguntas frecuentes sobre DevTools
Vamos a acabar con las preguntas y respuestas más habituales si estás comenzando a usar las DevTools.
¿Pueden mis cambios en DevTools dañar el sitio web real?
Para nada. De hecho, puedes estar muy tranquilo en este sentido. Ten en cuenta que todo lo que toques dentro de las DevTools sólo estará ocurriendo en tu navegador y nunca en el lugar donde se almacenan los archivos, es decir el servidor donde se aloja la página.
Si tocas cualquier cosa dentro de las herramientas de desarrollo y rompes algo simplemente tienes que refrescar la página y todo volverá a estar como estaba al principio.
¿Cómo puedo guardar los cambios realizados en el panel de Elementos?
A veces hacemos transformaciones en el panel de elementos de las developer tools y nos gustaría guardarlos para poder recuperarlos más adelante sin tener que reproducir otra vez todos los pasos.
En este marco tenemos dos alternativas posibles. Workspaces, que nos sirven para conectar carpetas locales para que los cambios se guarden directamente en ellas, y overrides locales, con modificaciones que se guardan en el navegador, sin necesidad de que utilices ningún tipo de archivo.
¿Qué es el modo Remote Debugging y para qué nos sirve?
Muchas veces queremos depurar el funcionamiento de una página web que no se ejecuta en nuestro propio navegador. Por ejemplo puede estar funcionando en un móvil pero nosotros queremos inspeccionarla utilizando las Developer Tools de nuestro navegador.
Esto es perfectamente posible conectando el dispositivo al ordenador con un puerto USB y luego activando la funcionalidad Remote Debugging. Así podrás tener todo el poder de las DevTools cuando estás depurando posibles fallos que aparecen en dispositivos con pantallas táctiles.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.