Lo que hace React Developer Tools

React Developer Tools es una extensión de navegador asociada a Meta Platforms, Inc. El material oficial lo describe así: "Añade herramientas de depuración React a las Microsoft Edge Developer Tools. Creado a partir de la revisión 3cde211b0c el 20/10/2025." Esta guía utiliza las páginas grabadas de la tienda y el material oficial del proyecto para explicar la instalación, primer uso, funciones documentadas, cobertura del navegador, señales de precios, permisos, comprobaciones de privacidad y solución de problemas, sin tratar las reclamaciones promocionales como resultados probados de forma independiente.

React Developer Tools ha verificado entradas de tienda para Chrome, Microsoft Edge y Firefox. Utiliza los iconos del navegador en esta página para acceder a esos mismos listados, porque extensiones con nombres similares pueden pertenecer a diferentes editores. La entrada de Chrome es la referencia principal del catálogo para este lote; Edge y Firefox solo se incluyen donde el producto correspondiente fue emparejado y comprobado.

React Developer Tools es una extensión de DevTools para navegadores para la biblioteca de código abierto React.
Recibirás dos nuevas pestañas en tus Edge DevTools: "Componentes ⚛" y "Perfilador ⚛".
La pestaña de Componentes te muestra los componentes raíz de React que se renderizaron en la página, así como los subcomponentes que acabaron renderizando.
Seleccionando uno de los componentes del árbol, puedes inspeccionar y editar sus props y estado actuales en el panel de la derecha.

Cómo instalar React Developer Tools

Abre el icono de la tienda oficial correspondiente a tu navegador: en Chrome elige «Añadir a Chrome»; en Microsoft Edge elige «Obtener»; en Firefox elige «Añadir a Firefox». Confirma que el título es React Developer Tools, compara el icono y el editor con esta página y lee los permisos antes de instalar.

Tras la instalación, abre el menú de Extensiones del navegador y confirma que React Developer Tools está activado. Fija el icono de su barra de herramientas cuando el producto use una ventana emergente; Si cambia una pestaña nueva o añade controles dentro de sitios web compatibles, abre una pestaña nueva o recarga la página de destino. Empieza en una página no sensible hasta que entiendas la interfaz y accedas a las solicitudes.

Utiliza solo los enlaces verificados de Chrome, Microsoft Edge y Firefox Store que aparecen en esta página.
Confirma el editor listado: Meta Platforms, Inc.
Revisa el acceso opcional al sitio antes de habilitarlo para cada sitio web.

Flujo de trabajo de primer uso para React Developer Tools

React Developer Tools es una extensión de DevTools para navegadores para la biblioteca de código abierto React. Empieza con la tarea limitada descrita en ese material oficial. Abre la ventana emergente de la barra de herramientas, la página de reemplazo o el sitio web compatible que ofrece la extensión, realiza una acción representativa y compara el resultado con el flujo de trabajo original del navegador antes de incorporarlo a tu trabajo diario.

Recibirás dos nuevas pestañas en tus Edge DevTools: "Componentes ⚛" y "Perfilador ⚛". Los controles pueden moverse entre versiones, así que usa la interfaz actual y los enlaces oficiales de ayuda como referencia final. Si se solicita un permiso para una cuenta, clave API, aplicación local complementaria o sitio web, completa solo la configuración requerida por la función específica que pretendes utilizar.

React Developer Tools es una extensión de DevTools para navegadores para la biblioteca de código abierto React.
Recibirás dos nuevas pestañas en tus Edge DevTools: "Componentes ⚛" y "Perfilador ⚛".
La pestaña de Componentes te muestra los componentes raíz de React que se renderizaron en la página, así como los subcomponentes que acabaron renderizando.
Seleccionando uno de los componentes del árbol, puedes inspeccionar y editar sus props y estado actuales en el panel de la derecha.
En las migas de pan puedes inspeccionar el componente seleccionado, el componente que lo creó, el componente que creó aquel, y así sucesivamente.

Características documentadas y controles prácticos

La pestaña de Componentes te muestra los componentes raíz de React que se renderizaron en la página, así como los subcomponentes que acabaron renderizando. Las capturas de pantalla en esta página provienen de una tienda oficial de navegadores o del repositorio oficial del proyecto y muestran la interfaz o funciones disponibles cuando fueron capturadas. Una captura de pantalla es útil para la orientación, pero puede que no coincida con una versión posterior píxel por píxel.

Utiliza la configuración de la extensión para revisar comportamientos que pueden cambiarse, desactivar o limitar por el sitio cuando esos controles estén disponibles. Prueba un cambio a la vez, vuelve a cargar la página afectada y conserva los datos originales o el estado del navegador cuando la herramienta edite, descarga, filtre, convierta, sincroniza o envíe información.

La pestaña de Componentes te muestra los componentes raíz de React que se renderizaron en la página, así como los subcomponentes que acabaron renderizando.
Seleccionando uno de los componentes del árbol, puedes inspeccionar y editar sus props y estado actuales en el panel de la derecha.
En las migas de pan puedes inspeccionar el componente seleccionado, el componente que lo creó, el componente que creó aquel, y así sucesivamente.
Si inspeccionas un elemento de React en la página usando la pestaña normal de Elementos y luego cambias a la pestaña de React, ese elemento se seleccionará automáticamente en el árbol de React.
La pestaña Perfilador te permite registrar información de rendimiento.
Esta extensión requiere permisos para acceder al árbol React de la página, pero no transmite ningún dato de forma remota.

Para quién es React Developer Tools y cómo evaluarlo

React Developer Tools es más útil cuando la función documentada elimina un paso repetido del navegador o expone información que de otro modo requeriría una página separada. Avalíala con una tarea real pero de bajo riesgo: registra cuántos pasos da el flujo de trabajo normal, repite la misma tarea con la extensión y mantenla solo cuando el beneficio sea lo suficientemente claro como para justificar otro permiso del navegador y un componente en segundo plano.

Para seguridad, finanzas, IA, traducción, descargas, gestión de cuentas o herramientas de procesamiento de contenidos, verifica de forma independiente los detalles importantes de salida y destino. Una extensión puede acortar un flujo de trabajo, pero no reemplaza las copias de seguridad, la página web original, el asesoramiento profesional o la revisión de una transacción antes de la confirmación.

Prueba una tarea representativa antes de habilitar el acceso amplio al sitio.
Verifica la producción generada, traducida, filtrada o financiera de forma independiente.
Elimina la extensión si su comportamiento actual ya no coincide con el propósito documentado.

Uso gratuito, funciones de pago y requisitos de cuenta

El material oficial capturado no presenta una compra obligatoria para la extensión principal del navegador, por lo que este directorio registra React Developer Tools como libre de instalar. Esa etiqueta no garantiza que cada cuenta conectada, transacción en la red, servicio opcional, función de donación o futura versión sea gratuita. Confirma los términos actuales en la página oficial del producto antes de confiar en la extensión para un flujo de trabajo de pago.

Los requisitos de la cuenta pueden variar según la función y el navegador. Una utilidad local puede funcionar de inmediato, mientras que la sincronización, el procesamiento en la nube, los modelos de IA, el soporte, las funciones de equipo o los servicios conectados pueden requerir inicio de sesión o términos separados. Lee las pantallas de pago y cuenta actuales en lugar de basarte en una reseña antigua, porque los planes y la disponibilidad regional pueden cambiar después de esta fecha de investigación.

Comprueba si la función exacta que necesitas requiere una cuenta.
Confirma los límites actuales y los precios regionales en la web del promotor.
Revisa los términos de renovación y cancelación antes de empezar una prueba.

Permisos, privacidad y versión actual

Los datos de producto capturados informan Edge 7.0.1 (20/10/2025); Firefox 6.1.1. Cuando un manifiesto de Edge estaba disponible, declaraba o solicitaba elementos como: scripting, almacenamiento, tabulaciones, Write, <all_urls>. Una lista de permisos describe el acceso técnico, no la prueba de cómo el editor utiliza los datos. Lee la indicación del navegador, restrinja el acceso opcional al sitio a las páginas que lo requieran y revisa la información de privacidad actual antes de introducir contenido confidencial, financiero o personal.

El desarrollador también publica un repositorio oficial de código fuente, que está enlazado en el registro fuente para los lectores que desean inspeccionar código, notas de lanzamiento o documentación del proyecto. Las versiones de la tienda pueden cambiar de forma independiente entre Chrome, Edge y Firefox. Consulta la fecha de actualización, las notas de lanzamiento y la propiedad que muestra la tienda antes de habilitar de nuevo una instalación antigua, especialmente cuando un flujo de trabajo gestiona credenciales, cookies, contenido de página, descargas o datos de cuenta.

Versiones grabadas: Edge 7.0.1 (20/10/2025); Firefox 6.1.1.
Generación de manifiestos: 3.
El listado capturado de Edge incluye un enlace a la política de privacidad del editor.

Preguntas frecuentes y solución de problemas para React Developer Tools

Las personas que buscan "react developer tools" y "react developer tools edge" suelen necesitar una descarga oficial, ayuda con la configuración, compatibilidad con el navegador o una explicación del propósito de la extensión. Esta página enlaza con entradas oficiales de la tienda en lugar de alojar un paquete de instalación. Si el producto no aparece tras la instalación, verifica que esté habilitado, fija el icono cuando sea apropiado, recarga la página de destino y comprueba si se permite el acceso al sitio.

Si una función sigue fallando, compara las versiones del navegador y de la extensión, confirma cualquier cuenta o servicio complementario requerido, y desactiva temporalmente otras extensiones que cambien la misma página. Utiliza la ruta oficial de proyecto o soporte del editor para errores específicos del producto. Desinstala React Developer Tools cuando los permisos, la propiedad, los precios o el comportamiento ya no se ajusten a tus necesidades. Las sugerencias de palabras clave guardadas son resultados de autocompletado factuales, no afirmaciones sobre volumen de búsqueda o calidad del producto. Esta página tiene en cuenta las sugerencias reales de Bing «react developer tools» y «react developer tools edge», sin atribuirles un volumen de búsqueda fijo.

Recarga la página de destino tras cambiar permisos o configuraciones.
Comprueba la compatibilidad del navegador y los servicios complementarios requeridos.
Utiliza los canales oficiales de soporte para fallos específicos de cada producto.

Capturas de pantalla