Hispanopedia Wiki
Las herramientas de desarrollo web (a menudo abreviadas como herramientas de desarrollo ) permiten a los desarrolladores web probar, modificar y depurar sus sitios web. Se diferencian de los creadores de sitios web y los entornos de desarrollo integrados (IDE) en que no ayudan en la creación directa de una página web , sino que son herramientas utilizadas para probar la interfaz de usuario de un sitio web o aplicación web .
Las herramientas de desarrollo web se ofrecen como complementos o funciones integradas en los navegadores modernos. Navegadores como Google Chrome , Firefox , Safari , Microsoft Edge y Opera cuentan con herramientas integradas para ayudar a los desarrolladores web, y se pueden encontrar muchos complementos adicionales en sus respectivos centros de descarga de plugins.
Las herramientas de desarrollo web permiten a los desarrolladores trabajar con diversas tecnologías web, como HTML , CSS , el DOM , JavaScript y otros componentes que gestiona el navegador web.
Historia y apoyo
Los primeros desarrolladores web depuraban manualmente sus sitios web comentando el código y utilizando funciones de JavaScript . Una de las primeras herramientas de depuración de navegadores fue la extensión Firebug de Mozilla , que poseía muchas de las características principales de las herramientas para desarrolladores actuales, lo que llevó a que Firefox se popularizara entre los desarrolladores en ese momento. El motor WebKit de Safari también introdujo sus herramientas integradas para desarrolladores alrededor de ese período, que eventualmente se convirtieron en la base de las herramientas actuales de Safari y Chrome. [ 1 ] [ 2 ] [ 3 ] Microsoft lanzó una barra de herramientas para desarrolladores para Internet Explorer 6 y 7; y luego las integró en el navegador a partir de la versión 8. [ 4 ] [ 5 ] En 2017, Mozilla descontinuó Firebug en favor de las herramientas integradas para desarrolladores. [ 6 ]
Actualmente, todos los navegadores web modernos son compatibles con herramientas para desarrolladores web que permiten a los diseñadores y desarrolladores web examinar la estructura de sus páginas. Estas herramientas están integradas en el navegador y no requieren módulos ni configuración adicionales. [ 7 ]
- Firefox : F12abre las herramientas para desarrolladores de Firefox. [ 8 ]
- Google Chrome y Opera – Herramientas para desarrolladores (DevTools) [ 9 ] [ 10 ]
- Microsoft Edge : abre las herramientas para desarrolladores web. [ 11 ] [ 12 ] Microsoft incorpora características adicionales que no están incluidas en Chromium principal . [ 13 ]F12
- Safari : El inspector web de Safari debe habilitarse desde su panel de configuración. [ 14 ] [ 15 ] [ 3 ]
Características
Las herramientas integradas para desarrolladores web en el navegador se suelen acceder colocando el cursor sobre un elemento de una página web y seleccionando la opción "Inspeccionar elemento" o similar en el menú contextual . Otra alternativa común es usar la tecla [ 7 ] .F12
HTML y el DOM
El visor y editor de HTML y DOM suele estar incluido en las herramientas integradas de desarrollo web. La diferencia entre el visor de HTML y DOM y la función de ver el código fuente en los navegadores web radica en que el visor de HTML y DOM permite ver el DOM tal como se renderizó, además de permitir realizar cambios en el HTML y el DOM y ver cómo se reflejan en la página una vez realizados. [ 16 ] [ 3 ] [ 7 ]
Además de seleccionar y editar, los paneles de elementos HTML también suelen mostrar propiedades del objeto DOM, como la dimensión de visualización y las propiedades CSS. [ 17 ]
Firefox, Safari, Chrome y Edge permiten a los usuarios simular el documento en un dispositivo móvil modificando las dimensiones de la ventana gráfica y la densidad de píxeles . [ 18 ] Además, tanto Firefox como Chrome ofrecen la opción de simular el daltonismo para la página. [ 19 ]
Recursos, información de red y elementos de la página web
Las páginas web suelen cargar y requerir contenido adicional en forma de imágenes, scripts, fuentes y otros archivos externos. Las herramientas de desarrollo web también permiten a los desarrolladores inspeccionar los recursos cargados y disponibles en la página web en una lista con estructura de árbol, y la apariencia de las hojas de estilo se puede probar en tiempo real. [ 20 ] [ 21 ] [ 7 ]
Las herramientas de desarrollo web también permiten a los desarrolladores ver información sobre el uso de la red, como el tiempo de carga, el uso del ancho de banda y los encabezados HTTP que se envían y reciben. [ 22 ] Los desarrolladores pueden manipular y reenviar solicitudes de red. [ 23 ] [ 18 ]
Elaboración de perfiles y auditorías
El análisis de rendimiento permite a los desarrolladores obtener información sobre el desempeño de una página web o aplicación web. Con esta información, pueden mejorar el rendimiento de sus scripts. Las funciones de auditoría, tras analizar una página, pueden ofrecer sugerencias para optimizarla, reduciendo el tiempo de carga y aumentando la capacidad de respuesta. Las herramientas de desarrollo web también suelen registrar el tiempo de renderizado de la página, el uso de memoria y los tipos de eventos que se producen. [ 24 ] [ 25 ] [ 3 ]
Estas características permiten a los desarrolladores optimizar su página web o aplicación web. [ 26 ]
Depuración de JavaScript
JavaScript se usa comúnmente en navegadores web. [ 16 ] Las herramientas de desarrollo web suelen incluir un panel de depuración para scripts que permite a los desarrolladores agregar expresiones de observación, puntos de interrupción, ver la pila de llamadas y pausar, continuar y avanzar paso a paso mientras depuran JavaScript. [ 7 ] [ 3 ]
También suele incluirse una consola, que permite a los desarrolladores escribir comandos JavaScript y llamar a funciones, o ver los errores que puedan haberse producido durante la ejecución de un script. [ 7 ] [ 3 ] [ 16 ]
Extensiones
La devtoolsAPI permite que las extensiones del navegador agreguen sus propias características a las herramientas para desarrolladores. [ 27 ] [ 28 ]
Véase también
Referencias
- ↑ Hatcher, Timothy (16 de enero de 2016). "10 años de Web Inspector" . WebKit . Consultado el 13 de febrero de 2024 .
- ↑ "10 años de Chrome DevTools" . Blog de Chromium . Consultado el 13 de febrero de 2024 .
- 1 2 3 4 5 6 Odell, Den (2014). "Herramientas para desarrolladores de navegadores". Desarrollo profesional de JavaScript: codificación, capacidades y herramientas . Nueva York, NY: Apress / Springer. págs. 423–437 . ISBN 978-1-4302-6269-5.
- ↑ McCormick, Libby (3 de noviembre de 2017). "Herramientas para desarrolladores F12 (Windows)" . msdn.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ↑ "Microsoft lanza la barra de herramientas para desarrolladores de IE" . 10 de mayo de 2007. Consultado el 11 de mayo de 2007 .
- ↑ "Adiós a Firebug – Mozilla Hacks - el blog para desarrolladores web" . Mozilla Hacks – el blog para desarrolladores web . Consultado el 13 de febrero de 2024 .
- 1 2 3 4 5 6 "¿Qué son las herramientas para desarrolladores de navegadores?" . MDN . Mozilla Corporation . Consultado el 05-07-2023 .
- ↑ "Documentación para el usuario de las herramientas para desarrolladores de Firefox" . Documentación fuente de Firefox . Consultado el 5 de julio de 2023 .
- ↑ "Chrome DevTools" . Desarrolladores de Chrome . Consultado el 5 de julio de 2023 .
- ↑ "Explora las funciones avanzadas: Agiliza el desarrollo con las herramientas para desarrolladores" . Ayuda de Opera . Consultado el 5 de julio de 2023 .
- ↑ "Documentación de Microsoft Edge DevTools" . Microsoft Learn . Consultado el 5 de julio de 2023 .
- ↑ "Descripción general de las herramientas para desarrolladores: desarrollo de Microsoft Edge" . Microsoft Learn . 7 de diciembre de 2023. Consultado el 13 de febrero de 2024 .
- ↑ Brosset, Patrick (7 de septiembre de 2021). "Novedades de DevTools: Edición multidispositivo" . Smashing Magazine . Consultado el 13 de febrero de 2024 .
- ↑ "Inspector web" . Documentación para desarrolladores de Apple . Consultado el 13 de febrero de 2024 .
- ↑ "Funciones que permiten a los desarrolladores web" . Documentación para desarrolladores de Apple . Consultado el 13 de febrero de 2024 .
- 1 2 3 Chinnathambi, Kirupa (6 de julio de 2016). Guía para principiantes absolutos de JavaScript . Pearson Education. ISBN 978-0-134-49862-1.
- ↑ "Inspeccionar y editar páginas y estilos | Herramientas para desarrolladores web" . Google Developers . Consultado el 6 de septiembre de 2018 .
- 1 2 Brosset, Patrick (27 de junio de 2023). "Consejos y trucos útiles de DevTools" . Smashing Magazine .
- ↑ Lyles, Taylor (11 de marzo de 2020). "Google ahora permite a los desarrolladores ver las limitaciones visuales en sus herramientas para desarrolladores de Chrome" . The Verge . Consultado el 13 de febrero de 2024 .
- ↑ "Panel de recursos - Google Chrome" . Desarrolladores de Chrome . Consultado el 6 de septiembre de 2018 .
- ↑ "Firefox estrena nueva barra de herramientas para desarrolladores" . El blog de Mozilla . Consultado el 6 de septiembre de 2018 .
- ↑ "Medir los tiempos de carga de recursos | Herramientas para desarrolladores web" . Google Developers . Consultado el 6 de septiembre de 2018 .
- ↑ Claburn, Thomas. "Google añade 16 funciones a las herramientas para desarrolladores de Chrome 117" . The Register . Consultado el 13 de febrero de 2024 .
- ↑ "Panel de perfiles - Google Chrome" . developers.google.com . Consultado el 6 de septiembre de 2018 .
- ↑ McCormick, Libby (3 de marzo de 2016). "Mensajes de error de la consola de herramientas para desarrolladores F12 (Windows)" . msdn.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ↑ McCormick, Libby (3 de marzo de 2016). "Uso de la herramienta Profiler para analizar el rendimiento de su código (Windows)" . msdn.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ↑ Bisson, Simon (11 de febrero de 2020). "Herramientas para desarrolladores en el nuevo Microsoft Edge" . InfoWorld . Consultado el 13 de febrero de 2024 .
- ^ "herramientas de desarrollo - Mozilla | MDN" . desarrollador.mozilla.org . 10 de agosto de 2023 . Consultado el 13 de febrero de 2024 .
- Herramientas de programación
- Desarrollo web
