Herramientas de desarrollo web

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 que se utilizan para probar la interfaz de usuario de un sitio web o una aplicación web .

Las herramientas de desarrollo web vienen como complementos del navegador o funciones integradas en los navegadores web modernos. Los navegadores como Google Chrome, Firefox , Safari , Microsoft Edge y Opera tienen herramientas integradas para ayudar a los desarrolladores web, y se pueden encontrar muchos complementos adicionales en sus respectivos centros de descarga de complementos.

Las herramientas de desarrollo web permiten a los desarrolladores trabajar con una variedad de tecnologías web, incluyendo HTML , CSS , DOM , JavaScript y otros componentes que son manejados por el navegador web.

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 que existió fue la extensión Firebug de Mozilla , que poseía muchas de las características principales actuales de las herramientas de desarrollo actuales, lo que llevó a que Firefox se volviera popular entre los desarrolladores en ese momento. El motor WebKit de Safari también introdujo sus herramientas de desarrollo integradas en 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 en adelante. ^{[4] [5]} En 2017, Mozilla suspendió Firebug a favor de herramientas de desarrollo integradas. ^[6]

En la actualidad, todos los navegadores web modernos admiten herramientas para desarrolladores web que permiten a los diseñadores y desarrolladores web ver la composición de sus páginas. Todas estas herramientas están integradas en el navegador y no requieren módulos ni configuración adicionales. ^[7]

• Firefox : F12abre las herramientas de desarrollo 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 funciones adicionales que no están incluidas en la línea principal de Chromium . ^[13]F12
• Safari : el inspector web de Safari debe habilitarse desde su panel de configuración. ^{[14] [15] [3]}

Para acceder a las herramientas de desarrollo web integradas en el navegador, se suele pasar el cursor sobre un elemento de una página web y seleccionar la opción "Inspeccionar elemento" o similar en el menú contextual . Otra opción habitual es utilizar la tecla ^[7] .F12

El visor y editor de HTML y DOM se incluye habitualmente en las herramientas de desarrollo web integradas. La diferencia entre el visor de HTML y DOM y la función de visualización de código fuente de los navegadores web es que el visor de HTML y DOM permite ver el DOM tal como se representó, además de permitirle realizar cambios en el HTML y el DOM y ver el cambio reflejado en la página después de que se realiza el cambio. ^{[16] [3] [7]}

Además de seleccionar y editar, los paneles de elementos HTML normalmente también mostrarán 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 tienen la opción de simular el daltonismo para la página. ^[19]

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 que se cargan y están 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 por ejemplo, ver cuál es el tiempo de carga y el uso del ancho de banda y qué encabezados HTTP se envían y reciben. ^[22] Los desarrolladores pueden manipular y reenviar solicitudes de red. ^{[23] [18]}

La creación de perfiles permite a los desarrolladores capturar información sobre el rendimiento de una página web o una aplicación web. Con esta información, los desarrolladores pueden mejorar el rendimiento de sus scripts. Las funciones de auditoría pueden proporcionar a los desarrolladores sugerencias, después de analizar una página, para optimizarla y reducir el tiempo de carga de la página y aumentar la capacidad de respuesta. Las herramientas de desarrollo web normalmente también proporcionan un registro del tiempo que lleva renderizar la página, el uso de memoria y los tipos de eventos que se están produciendo. ^{[24] [25] [3]}

Estas características permiten a los desarrolladores optimizar su página web o aplicación web. ^[26]

JavaScript se utiliza comúnmente en los 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 vigilancia, puntos de interrupción, ver la pila de llamadas y pausar, continuar y avanzar paso a paso mientras depuran JavaScript. ^{[7] [3]}

A menudo también se incluye una consola que permite a los desarrolladores escribir comandos JavaScript y llamar a funciones, o ver errores que puedan haberse encontrado durante la ejecución de un script. ^{[7] [3] [16]}

La devtoolsAPI permite que las extensiones del navegador agreguen sus propias funciones a las herramientas para desarrolladores. ^{[27] [28]}

• Ciclo de vida del desarrollo web