Arc Browser Developer Tools - ¿Puedes Usarlo para Tus Proyectos?
Si quieres saber más sobre las herramientas de desarrollo del navegador Arc y cómo pueden beneficiarte, has venido al lugar correcto.
Tu aplicación de navegador web es tan importante como tu IDE si eres un desarrollador de sitios web y aplicaciones web. Te permite visualizar, mejorar, probar, depurar y revisar tu código. Tu navegador debería permitir integraciones avanzadas para desarrolladores, extensiones y características de optimización de código.
Así que, si has estado usando Google Chrome o Mozilla Firefox para el desarrollo de sitios web y estás buscando un cambio, prueba el navegador Arc. Cubriré sus herramientas y capacidades de desarrollo para que puedas ver si se adapta a tus necesidades. ¿Listo?
¿Qué Es el Modo de Desarrollo del Navegador Arc?
El modo de desarrollo de Arc ofrece varias herramientas para proyectos de desarrollo de sitios web y aplicaciones.
Este modo transforma completamente la pestaña seleccionada añadiendo nuevos elementos de interfaz de usuario, herramientas asistivas para el desarrollo de sitios web, una barra de direcciones web de longitud completa, una herramienta de captura de pantalla, etc. También activa automáticamente la extensión JSON Formatter para que puedas revisar códigos de sitios web de manera eficiente. 
Además, el navegador Arc incluye un modo de desarrollador para extensiones de navegador. Puedes probar tus complementos personalizados sin cambiar a un navegador diferente. Puedes cargar complementos descomprimidos, empaquetarlos, y más. 
En resumen, el modo de desarrollo elimina los cuellos de botella del desarrollo frontend al cubrir todas las características necesarias en una sola aplicación.
En una computadora Mac, puedes disfrutar de todas las características de las herramientas de desarrollo del navegador Arc. Sin embargo, si estás usando una PC con Windows 11, las siguientes funcionalidades no estarán disponibles:
- URL completa
- Modo retrato
- Captura de una parte
- Boost
- Arc Max AI.
Cómo Habilitar las Herramientas de Desarrollo del Navegador Arc en Mac
Debes activar el modo de desarrollador para acceder a las herramientas de cada pestaña de forma individual:
- Haz clic en el ícono de Configuración del sitio en la barra de URL, ubicado sobre la barra lateral.
- Selecciona la configuración del Modo de desarrollador en el menú contextual para habilitar la función.
- Aparecerá una barra de direcciones azul en la parte superior de la pestaña del sitio web.
Si deseas usar los comandos del navegador Arc, presiona Command + T en la interfaz del navegador y escribe Developer en la Barra de comandos de Arc. Ahora, haz clic en el comando Activar Modo de Desarrollador. 
Cómo Habilitar las Herramientas de Desarrollo del Navegador Arc en Windows 11
- Haz clic en el ícono de Configuración de Arc en la esquina superior derecha.
- Pasa el cursor sobre el menú Desarrollador.
- Elige la herramienta de desarrollador que necesitas del menú de contexto de desbordamiento, como se detalla a continuación:
- Ver código fuente
- Desarrollador
- Inspeccionar elementos
- Consola de JavaScript
- Inspector de red.
Características y Herramientas Destacadas del Navegador Arc
Aquí tienes algunas herramientas imprescindibles que debes conocer:
Barra de Dirección URL Completa
El modo de desarrollador en Arc ofrece una barra de URL de tamaño completo en la parte superior de tu ventana. Esto facilita la visualización de direcciones web largas. Además, puedes navegar URLs complejas con facilidad. ¡Sin más entrecerrar los ojos o escribir mal! 
Captura en Modo Retrato
Arc te permite capturar capturas de pantalla de sitios web de dos maneras en proyectos de desarrollo. La primera es la Captura en Modo Retrato, que te permite tomar una captura de pantalla de página completa. Es perfecta para compartir diseños de sitios web o guardar artículos largos para más tarde. 
Captura de una Parte
También puedes usar la función Captura de una Parte. Simplemente selecciona el área que deseas y Arc la guarda como una imagen, ideal para capturar fragmentos de código o elementos visuales específicos. 
Alternar Consola
¿Quieres ver el código detrás de un sitio web? Usa la función Alternar Consola para mostrar una consola de desarrollador con los códigos del sitio web. Te permite ver mensajes de error, ejecutar código JavaScript e interactuar con el código de fondo de la página web. 
Alternar Panel de Red
¿Tienes curiosidad por saber qué tan rápido se carga una página? El panel de Red Alternar muestra información sobre todos los archivos que utiliza un sitio web. Te ayuda a identificar los cuellos de botella para que puedas optimizar los tiempos de carga.
Además, puedes usar esta herramienta de desarrollador para echar un vistazo a los sitios web de competidores que se cargan más rápido que el tuyo y comparar estrategias. 
Inspeccionar Elemento
¿Alguna vez te has preguntado qué tipo de letra utiliza un sitio web o cómo cambiar el color de un botón? La función Inspeccionar Elemento de Arc te permite pasar el mouse sobre cualquier parte de una página web para ver el código HTML y CSS detrás de ella. Incluso puedes hacer cambios temporales en el código y ver los efectos en vivo en el navegador. 
Vista Dividida
Para una experiencia verdaderamente inmersiva, puedes usar la función Vista Dividida. 
Por ejemplo, en la imagen siguiente, estoy revisando el código subyacente de la aplicación Google Maps al lado del portal de Google Maps. Esta vista dividida facilita ver cómo los cambios en el código se traducen en cambios visuales en la página web. 
Boost
Boost es un método visual para personalizar los elementos gráficos y textuales de un sitio web para múltiples ediciones por diversión o para revisión de clientes. Puedes guardar la vista personalizada de un sitio web para compartirla con colaboradores. Sin embargo, el sitio web real no cambiará.
Boost incluye una rueda de color inteligente para que puedas cambiar los tonos. Para la edición de color, hay controles adicionales, como Invertir brillo, Controles de color avanzados y Restablecer a los colores originales. También facilita la personalización de la fuente. Puedes elegir una tipografía de 20 opciones y editar el tamaño y el caso de la fuente. 
Para eliminar elementos y contenido de un sitio web para pruebas A/B, puedes usar la función Zap. Esta crea una capa visual e interactiva sobre el sitio web existente, para que puedas eliminar cosas con un simple clic.
Explicar o Completar Códigos con AI
Si has activado Arc Max, puedes usar la integración de ChatGPT del navegador Arc para hacer preguntas. También puedes usar IA para escribir códigos desde cero o completar automáticamente scripts que optimizas en la Consola, Panel de Red y Inspeccionar Elemento.
Por ejemplo, he copiado un segmento corto del script HTML subyacente para Google Maps. 
Luego, utilicé la función Ask ChatGPT para aprender más sobre ello. Pude ver la Consola, el sitio web visual y las explicaciones. 
Modo de Desarrollo del Navegador Arc vs. Google Chrome y Firefox
He comparado las herramientas de desarrollo del navegador Arc con Firefox y Chrome probando proyectos de desarrollo experimentales. Con experiencia práctica de primera mano con estos tres navegadores, estoy delineando las ventajas y desventajas de Arc para el desarrollo de sitios web:
Pros
| Característica | Modo de Desarrollo de Arc (Chromium) | Google Chrome | Firefox |
|---|---|---|---|
| Velocidad | Rápido y eficiente, igual que Chrome | Muy rápido | Rápido |
| Privacidad | Bloqueador de anuncios y rastreadores integrado | Necesita extensiones | Necesita extensiones |
| Nivel de Personalización | Personalización amplia de UI | Alta | Alta |
| Espacios de Trabajo | Permite múltiples espacios de trabajo a través de Arc Spaces | No disponible como función nativa, necesita extensiones | No disponible como función nativa, necesita extensiones |
| Gestión de Pestañas | Pone las pestañas en reposo para la eficiencia de memoria y CPU | Reduce el uso de recursos cuando las pestañas están inactivas pero no tan eficientemente como Arc; característica de Grupos de Pestañas disponible | Puedes descargar manualmente pestañas inactivas; contenedores codificados por colores para la gestión de pestañas |
| Acceso al Código Fuente | Código abierto para contribución o inspección a través del proyecto Chromium | Google ha licenciado Chrome como una aplicación freeware propietaria; no puedes acceder a su código fuente | Disponible al público |
| Acceso a la Chrome Web Store | Acceso completo a las extensiones de Chrome | Acceso integrado | Acceso limitado |
Contras
| Característica | Modo de Desarrollo de Arc (Chromium) | Google Chrome | Firefox |
|---|---|---|---|
| Vista Completa de URL | Tendrás que activar el modo de desarrollo individidamente para pestañas separadas; necesita intervención manual | Acceso fácil | Acceso fácil |
| Acceso a Herramientas de Desarrollo | Debes activar primero el modo de desarrollador | Acceso nativo a todas las herramientas de desarrollo | Acceso nativo a todas las herramientas de desarrollo |
| Acceso a Características | Podría carecer de algunas características de DevTools de Chrome | Acceso total | Acceso total |
| Estado | Un recién llegado con posibles errores para proyectos de desarrollo personalizados | Herramientas de desarrollo bien establecidas | Herramientas de desarrollo bien establecidas |
Además, si te preguntas cómo compite con Opera, no busques más.
Resumen
Según mis evaluaciones, las herramientas de desarrollo del navegador Arc pueden manejar proyectos de desarrollo de sitios web y aplicaciones de alto perfil.
¡Si el artículo te ayudó a cambiar a Arc para necesidades de desarrollo avanzadas, déjanos un comentario abajo!
