Recomendaciones de herramientas complementarias del navegador para ayudar con el desarrollo [cerrado]
-
09-06-2019 - |
Pregunta
¿Alguien puede sugerir algunas buenas herramientas/extensiones complementarias del navegador para ayudar con el desarrollo?Tengo Firebug instalado en Firefox, que es excelente para trabajar con CSS, HTML y JavaScript;¿cualquier otra sugerencia?
Solución
Firefox:
- Inspeccionar esto si usas el inspector DOM
- Mídelo para indicarle distancias de píxeles (si lo necesita)
- Vista de IE o Vista Safari para facilitar las pruebas en otros navegadores
- Validador HTML si te importa la validación
- Consola2 para mejorar tu consola de errores js
- El Shell de Javascript bookmarklet también es útil (y mira los demás allí también)
Editar:Esto es además de la Barra de herramientas de desarrollo web mencionado por otros
Otros consejos
Para Firefox:
insecto de fuego Es fantástico para la investigación y el desarrollo.
Barra de herramientas para desarrolladores web es bueno también.Realmente ayuda con CSS y diseño de página, así como con mucho más.
yo también uso Encabezados HTTP en vivo (Creo que se llama, pero está en mi máquina de trabajo, así que no puedo encontrar el enlace ahora).Lo que nos ha ayudado con problemas de almacenamiento en caché y cosas por el estilo.
Hago mucho desarrollo de teléfonos móviles, así que también uso Conmutador de agente de usuario.Muy útil para pretender ser diferentes teléfonos móviles.
Tiendo a usar Firefox solo para el desarrollo y solo pruebo en otros navegadores, ya que la mayoría no tiene la amplia gama de complementos para ayudar al desarrollo que tiene Firefox.
El otro imprescindible para Firefox es el de Chris Pederick Barra de herramientas para desarrolladores web.
Definitivamente deberías instalar Safari.Tiene una serie de herramientas integradas.Lo uso en combinación con otros navegadores todo el tiempo.
- Línea de tiempo de la red
- Consola de errores
- inspector web
- Editor de fragmentos
Además, le permite configurar el agente de usuario para sus solicitudes.
Considere esto, tiene un menú de nivel superior separado llamado Desarrollar.
La ópera tiene:
Dragonfly (herramientas -> avanzadas -> herramientas de desarrollo)
Métodos UserJS para interceptar cosas.
opera:config#CompatMode%20Override para forzar el modo peculiar o estándar
Widgets para desarrolladores web
Puede ver el origen de los archivos, editarlos, aplicar cambios y recargarlos desde la memoria caché.
En el caso de IE, las siguientes herramientas pueden resultar útiles
- Barra de herramientas para desarrolladores de Microsoft - dom|visor de estilos
- Depurador HTTP Fiddler - monitor http
- fuente instantánea - dom|visor de estilos
- Compañero.JS - dom|visor de estilos, consola de error extendida
La extensión "uber" para IE: "Herramientas de desarrollo", proporcionada como parte de IE8
Consola de desarrollador y Instantánea DOM para ópera:
Lo genial es que estos son bookmarklets implementados con JS.Lo malo es que necesitan Internet.
Firefox:
Inspeccione esto si usa el inspector DOM
Mídelo para indicarte las distancias de los píxeles (si lo necesitas)
IE View o Safari View para facilitar las pruebas en otros navegadores
Validador HTML si te importa la validación
Console2 para mejorar tu consola de errores js
El bookmarklet de Javascript Shell también es útil (y mire los demás allí también)
Esto se suma a la barra de herramientas de desarrollo web mencionada por otros.
Esta lista de Cebjyre está casi completa (ya que FireBug ya se mencionó en la pregunta).solo agregaria Alteración de datos.De vez en cuando es muy útil.
Aquí están mis complementos orientados al desarrollo para Firefox 3:
Y lento es un excelente complemento de Firebug para solucionar problemas del tiempo de carga de una página.
Aparte de las excelentes herramientas ya mencionadas, encuentro Charles ser extremadamente útil.Especialmente porque trabajo mucho con Flash Remoting, que se maneja de manera excelente.
Charles es un proxy HTTP/monitor HTTP/proxy inverso que permite a un desarrollador ver todo el tráfico HTTP entre su máquina e Internet.Esto incluye solicitudes, respuestas y encabezados HTTP (que contienen las cookies y la información de almacenamiento en caché).
Charles puede actuar como intermediario para la comunicación HTTP/SSL, lo que le permite depurar el contenido de sus sesiones HTTPS.
Es multiplataforma, cuesta $50, pero hay una evaluación de "30 minutos por sesión" que puedes descargar.
Esto es lo que uso:
Firefox:
- Inspector DOM:Utilizo esto más que cualquier otra cosa para el desarrollo web.
- Lanzador:para abrir sitios en otros navegadores/aplicaciones
- Alteración de datos:esto puede ser útil para depurar solicitudes GET/POST
- Barra de herramientas para desarrolladores web:esto tiene muchas características útiles para la depuración:las herramientas de validación del W3C, regla incorporada, herramientas de cambio de tamaño, manipulación de código fuente, herramientas sencillas de caché/css/script
ES DECIR:
- Barra de herramientas para desarrolladores de Internet Explorer:No es tan útil como el de Firefox, pero al menos te ofrece un inspector DOM decente.
Varios:
- Los prácticos marcadores de Jesse:el caparazón El bookmarklet es especialmente útil
- yo también instalo Safari y Ópera, pero sobre todo solo los uso para pruebas y evaluaciones comparativas, ya que sus herramientas de desarrollo no son tan sólidas como Firefox y no tienen tantos errores como IE.
- Lince:Utilizo esto para asegurarme de que cualquier sitio con mucho JS siga funcionando, de modo que esté seguro de que se verá bien en Google, lectores de pantalla y cualquier otra aplicación tipo bot.