Las herramientas de desarrollo web (a menudo llamadas devtools ) permiten a los desarrolladores web probar y depurar su código. 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 . Los navegadores web más populares, como Google Chrome , Firefox , Internet Explorer , Safari , Microsoft Edge y Opera , [1] 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, incluidos HTML , CSS , DOM , JavaScript y otros componentes que maneja el navegador web. Debido a la creciente demanda de los navegadores web para hacer más, [2] los navegadores web populares han incluido más funciones orientadas a los desarrolladores. [3]
Soporte de herramientas de desarrollo web
Varios navegadores web notables tienen soporte para herramientas de desarrollo web que permiten a los diseñadores y desarrolladores web ver la composición de sus páginas. Todas estas son herramientas que están integradas en el navegador y no requieren módulos o configuración adicionales.
- Firefox : F12abre la Consola web / Consola del navegador (desde Firefox 4). [4] [5] La consola web se aplica a una sola pestaña de contenido; la Consola del navegador se aplica a todo el navegador. [6] También existen muchos complementos, [7] incluido Firebug .
- Google Chrome : Herramientas para desarrolladores de Chrome (DevTools) [8]
- Internet Explorer y Microsoft Edge : F12abre las herramientas de desarrollo web (a partir de la versión 8) [9] [10]
- Ópera - Libélula de la ópera [11]
- Safari - Herramientas de desarrollo web de Safari [12] (a partir de la versión 3) [13]
Funciones más utilizadas
Se suele acceder a las herramientas de desarrollo web integradas en el navegador colocando 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 F12tecla tiende a ser otro atajo común. [14]
HTML y DOM
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 ver fuente en los navegadores web, es que el visor HTML y DOM le permite ver el DOM tal como se renderizó, además de permitirle realizar cambios en HTML y DOM y ver el cambio reflejado en la página después de que se realiza el cambio. [15]
Además de seleccionar y editar, los paneles de elementos HTML normalmente también mostrarán las propiedades del objeto DOM, como la dimensión de visualización y las propiedades de la hoja de estilo en cascada. [dieciséis]
Activos, recursos e información de la red de la página web
Las páginas web normalmente 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 que están cargados y disponibles en la página web en una lista de estructura de árbol. [17] [18]
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. [19]
Elaboración de perfiles y auditoría
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 sugerencias a los desarrolladores, después de analizar una página, para realizar optimizaciones para reducir el tiempo de carga de la página y aumentar la capacidad de respuesta. Las herramientas de desarrollo web también suelen proporcionar una línea de tiempo que proporciona un registro del tiempo que se tarda en representar la página, el uso de la memoria y los tipos de eventos que están teniendo lugar. [20] [21]
Estas características permiten a los desarrolladores optimizar su página web o aplicación web. [22]
Depuración de JavaScript
JavaScript se usa comúnmente en los navegadores web. Las herramientas de desarrollo web comúnmente incluyen un panel para depurar scripts al permitir a los desarrolladores agregar expresiones de observación, puntos de interrupción, ver la pila de llamadas y pausar, pasar, ingresar y salir de funciones mientras se depuran JavaScript.
Normalmente se incluye una consola de JavaScript. Las consolas permiten a los desarrolladores escribir comandos JavaScript y llamar a funciones, o ver errores que pueden haberse encontrado durante la ejecución de un script. [23] [24] [25]
Extensiones y complementos
Los navegadores web modernos admiten el uso de complementos o extensiones para agregar o aumentar la funcionalidad. [26] Hay muchos complementos comunes que pueden proporcionar una amplia gama de características adicionales.
Ver también
- Desarrollador web (software)
- Ciclo de vida del desarrollo web
- World Wide Web
Referencias
- ^ http://www.fraakz.com/top-web-browsers-in-2012.html
- ^ "Demanda creciente de desarrolladores web" . Bright Hub . Consultado el 6 de septiembre de 2018 .
- ^ "Último desarrollo de aplicaciones | Desarrollo web móvil - Desarrollo de aplicaciones, Tendencias de aplicaciones" . devworks.thinkdigit.com . Consultado el 6 de septiembre de 2018 .
- ^ "La consola del navegador" . Mozilla Hacks: el blog para desarrolladores web . Consultado el 6 de septiembre de 2018 .
- ^ "Consola web" . Documentos web de MDN . Consultado el 6 de septiembre de 2018 .
- ^ "Consola del navegador" . Red de desarrolladores de Mozilla. 13 de agosto de 2016 . Consultado el 15 de marzo de 2017 .
- ^ http://tips.webdesign10.com/web-developer-toolbar.htm
- ^ "Descripción general de Chrome DevTools - Google Chrome" . developer.chrome.com . Consultado el 6 de septiembre de 2018 .
- ^ McCormick, Libby. "Herramientas de desarrollo F12 (Windows)" . msdn.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ^ erikadoyle. "Herramientas de desarrollo de Microsoft Edge - Desarrollo de Microsoft Edge" . docs.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ^ "Navegador Opera | Navegador web más rápido, seguro e inteligente" . www.opera.com . Consultado el 6 de septiembre de 2018 .
- ^ Inc., Apple. "Herramientas - Safari - Desarrollador de Apple" . developer.apple.com . Consultado el 6 de septiembre de 2018 .
- ^ Historial de versiones de Safari
- ^ https://developers.google.com/chrome-developer-tools/docs/overview#access
- ^ McCormick, Libby. "Introducción a las herramientas de desarrollo F12 (Windows)" . msdn.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ^ "Inspeccionar y editar páginas y estilos | Herramientas para desarrolladores web" . Desarrolladores de Google . Consultado el 6 de septiembre de 2018 .
- ^ "Panel de recursos - Google Chrome" . developers.google.com . 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 tiempos de carga de recursos | Herramientas para desarrolladores web" . Desarrolladores de Google . Consultado el 6 de septiembre de 2018 .
- ^ "Panel de perfiles - Google Chrome" . developers.google.com . Consultado el 6 de septiembre de 2018 .
- ^ McCormick, Libby. "Mensajes de error de la consola de herramientas de desarrollador F12 (Windows)" . msdn.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ^ McCormick, Libby. "Uso de la herramienta Profiler para analizar el rendimiento de su código (Windows)" . msdn.microsoft.com . Consultado el 6 de septiembre de 2018 .
- ^ "La nueva línea de comandos de Firefox te ayuda a desarrollar más rápido" . Mozilla Hacks: el blog para desarrolladores web . Consultado el 6 de septiembre de 2018 .
- ^ "Navegador Opera | Navegador web más rápido, seguro e inteligente" . www.opera.com . Consultado el 6 de septiembre de 2018 .
- ^ "Uso de la consola | Herramientas para desarrolladores web" . Desarrolladores de Google . Consultado el 6 de septiembre de 2018 .
- ^ "Más funciones del navegador, menos actualizaciones de complementos | Firefox" . Mozilla . Consultado el 6 de septiembre de 2018 .