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 . 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, incluidas HTML , CSS , DOM , JavaScript y otros componentes que maneja el navegador web.
Los primeros desarrolladores web depuraron 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 para desarrolladores 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 los integró en el navegador desde la versión 8 en adelante. [4] [5] En 2017, Mozilla descontinuó Firebug en favor de herramientas de desarrollo integradas. [6]
Hoy en día, todos los navegadores web modernos son compatibles con herramientas de desarrollo web que permiten a los diseñadores y desarrolladores web observar la composición de sus páginas. Todas estas son herramientas que están integradas en el navegador y no requieren módulos ni configuración adicionales. [7]
Normalmente se accede a las herramientas de desarrollo web integradas en el navegador pasando el cursor sobre un elemento de una página web y seleccionando "Inspeccionar elemento" o una opción similar en el menú contextual . Alternativamente, la clave tiende a ser otro atajo común. [7]F12
El visor y editor de HTML y DOM se incluye comúnmente en las herramientas de desarrollo web integradas. La diferencia entre el visor HTML y DOM y la función de visualización de código fuente en los navegadores web es que el visor HTML y DOM le permite ver el DOM tal como se representó, además de permitirle realizar cambios en HTML y DOM y ver el cambio reflejado en la página después de realizar 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, Chrome también tiene la opción de simular daltonismo en la página. [19]
Las páginas web normalmente se cargan y requieren 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 de 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 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 aplicación web. Con esta información los desarrolladores pueden mejorar el rendimiento de sus scripts. Las funciones de auditoría pueden proporcionar sugerencias a los desarrolladores, después de analizar una página, sobre optimizaciones para disminuir 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 la memoria y los tipos de eventos que tienen lugar. [24] [25] [3]
Estas características permiten a los desarrolladores optimizar su página web o aplicación web. [26]
JavaScript se usa 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 observación, puntos de interrupción, ver la pila de llamadas y pausar, continuar y avanzar mientras depuran JavaScript. [7] [3]
A menudo también se incluye una consola, que permite a los desarrolladores escribir comandos JavaScript y llamar funciones, o ver los errores que se pueden haber 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 de desarrollo. [27] [28]