Herramientas de desarrollo web

Ir a: navegación, búsqueda de

Herramientas de desarrollo web permiten desarrolladores web para probar y de depuración su código. son diferentes de constructores de sitio web y IDEs en que no asisten en la creación directa de una página web, más bien son herramientas que se utilizan para probar el usuario frente a la interfaz de una aplicación web o sitio Web.

Herramientas de desarrollo web como complementos de navegador o construcción en características de los navegadores web. Los navegadores web más populares hoy en día como, Google Chrome, Firefox, Opera, Internet Explorer, y Safari[1] han construido en herramientas para ayudar a los desarrolladores web, y muchos complementos adicionales pueden encontrarse en sus centros de descargar plugin respectivos.

Herramientas de desarrollo web permiten a los desarrolladores trabajar con una variedad de tecnologías web, incluyendo HTML, CSS, la DOM, JavaScripty otros componentes que son manejadas por el navegador web. Debido a la creciente demanda de navegadores web para hacer más[2] los navegadores web populares han incluido más funciones para los desarrolladores.[3]

Contenido

  • 1 Soporte de herramientas de Desarrollador Web
  • 2 Características comunes
    • 2.1 HTML y DOM
    • 2.2 Página Web activos, recursos e información de la red
    • 2.3 Perfiles y auditoría
      • 2.3.1 Depuración de JavaScript
  • 3 Extensiones y plugins
  • 4 Véase también
  • 5 Referencias

Soporte de herramientas de Desarrollador Web

Cinco de las web más popular navegadores web[4] con apoyo de herramientas de desarrollo web que permite a diseñadores y desarrolladores web a echar un vistazo a la marca para arriba de sus páginas. Estas son todas las herramientas que se construyen en el navegador y no necesitan módulos adicionales o configuración.

  • Google Chrome – Herramientas para desarrolladores web[5]
  • Internet Explorer – F12 Herramientas para desarrolladores Web (Desde la versión 8)[6]
  • Safari – Herramientas de desarrollo Web de Safari[7] (Desde la versión 3)[8]
  • Firefox -F12 Consola de web / navegador de la consola (desde Firefox 4)[9][10] (también existen muchos addons,[11] incluyendo Firebug)
  • Opera – Opera Dragonfly[12]

Características comunes

Las herramientas de desarrollador de web integrado en el navegador se acceden comúnmente revoloteando sobre un elemento de una página web y seleccionando el "Inspeccionar elemento" u opción similar de la menú contextual. Como alternativa la F12 clave tiende a ser otro atajo común.[13]

HTML y DOM

Editor y visualizador HTML y DOM es generalmente comúnmente incluidos en la web de herramientas de desarrollo. La diferencia entre el visor de HTML y DOM y la función de origen de la vista en los navegadores es que el visor de HTML y DOM le permiten ver el DOM como se dictó además de lo que le permite realizar cambios en el HTML y DOM y ver el cambio que se refleja en la página después de hace el cambio.[14]

Además de seleccionar y editar, los paneles de elementos HTML generalmente también serán propiedades de pantalla del objeto DOM, como dimensión de la pantalla y las propiedades CSS.[15]

Página Web activos, recursos e información de la red

Páginas web típicamente carga y requieren contenido adicional en forma de imágenes, scripts, fuentes y otros archivos externos. Herramientas de desarrollo web también permiten a los desarrolladores a recursos que están cargados y disponibles en la página web en un listado de estructura de árbol.[16][17]

Herramientas de desarrollo web también permiten a los desarrolladores ver información sobre el uso de la red, como ver el tiempo de carga y el uso de ancho de banda son y que Encabezados HTTP están siendo enviados y recibidos.[18]

Perfiles y auditoría

Perfiles permite a los desarrolladores capturar información sobre el desempeño de una página web o aplicación web. Con esta información los desarrolladores pueden mejorar el rendimiento de sus guiones. Características de la auditoría puede proporcionar a los desarrolladores sugerencias, después de analizar una página, para optimizaciones disminuir la carga de la página el tiempo y aumentan la capacidad de respuesta. Herramientas de desarrollo web por lo general también proporcionan una línea de tiempo características proporciona un registro del tiempo que tarda en renderizar la página, uso de memoria y los tipos de eventos que tienen lugar.[19][20]

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

Depuración de JavaScript

JavaScript se utiliza comúnmente en los navegadores web. Herramientas de desarrollo web comúnmente incluyen un panel para Depurar secuencias de comandos por permitiendo a los desarrolladores añadir reloj expresiones, puntos de interrupción, ver la pila de llamadas, pausa, paso sobre paso en y paso fuera de funciones durante la depuración de JavaScript.

Una consola de JavaScript es comúnmente incluida. Las consolas permiten a los desarrolladores escribir comandos JavaScript y llamar a funciones, o errores de vista que pueden haber sido encontrados durante la ejecución de un script.[22][23][24]

Extensiones y plugins

Los navegadores web modernos apoyan el uso de plugins o extensiones para agregar o aumentar la funcionalidad.[25] Hay muchos plugins populares que agregan características adicionales que las apoyadas por las herramientas de desarrollo integrado. Características pueden variar desde ser capaz de desactivar JavaScript y CSS para poder editar galletas con mayor facilidad.[26][27][28][29]

Véase también

  • Google Chrome
  • Internet Explorer
  • Mozilla Firefox
  • Navegador Safari
  • Opera Web Browser
  • Desarrollador Web (software)

Referencias

  1. ^ https://www.fraakz.com/Top-web-browsers-in-2012.html
  2. ^ https://www.Brighthub.com/Internet/Web-Development/articles/25776.aspx
  3. ^ https://devworks.thinkdigit.com/software/browsers-are-the-New-IDE-for-Web_9995.html
  4. ^ https://www.webdevelopersnotes.com/articles/popular-web-browsers.php
  5. ^ https://developer.Chrome.com/DevTools
  6. ^ https://msdn.Microsoft.com/en-us/library/IE/hh673541 (v=vs.85).aspx
  7. ^ https://developer.Apple.com/Technologies/Safari/Developer-Tools.html
  8. ^ Historial de versiones de Safari
  9. ^ https://hacks.mozilla.org/2013/08/The-Browser-Console/
  10. ^ https://developer.mozilla.org/en-US/docs/Tools/Web_Console
  11. ^ https://Tips.webdesign10.com/Web-Developer-Toolbar.htm
  12. ^ https://www.opera.com/Dragonfly/
  13. ^ https://developers.Google.com/chrome-Developer-Tools/docs/Overview#Access
  14. ^ https://msdn.Microsoft.com/en-us/library/gg589512 (v=vs.85).aspx
  15. ^ https://developers.Google.com/chrome-Developer-Tools/docs/Elements
  16. ^ https://developers.Google.com/chrome-Developer-Tools/docs/Resources
  17. ^ https://blog.mozilla.org/blog/2012/10/09/Firefox-debuts-New-Developer-Toolbar/
  18. ^ https://developers.Google.com/chrome-Developer-Tools/docs/Network
  19. ^ https://developers.Google.com/chrome-Developer-Tools/docs/profiles
  20. ^ https://msdn.Microsoft.com/en-us/library/hh180764 (v=vs.85).aspx
  21. ^ https://msdn.Microsoft.com/en-us/library/gg699341 (v=vs.85).aspx
  22. ^ https://hacks.mozilla.org/2012/08/New-Firefox-Command-Line-Helps-You-develop-Faster/
  23. ^ https://www.opera.com/Dragonfly/Documentation/Console/
  24. ^ https://developers.Google.com/chrome-Developer-Tools/docs/Console
  25. ^ https://www.mozilla.org/en-US/plugincheck/more_info.html
  26. ^ https://Chrome.Google.com/Webstore/detail/Edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg?HL=en
  27. ^ https://addons.mozilla.org/en-US/firefox/addon/Web-Developer/
  28. ^ https://addons.opera.com/en/Extensions/details/The-Developer-briefcase/?display=en
  29. ^ https://developer.Apple.com/Technologies/Safari/Extensions.html

Otras Páginas

Obtenido de"https://en.copro.org/w/index.php?title=Web_development_tools&oldid=766857345"