browser - significado - Recomendaciones para herramientas complementarias del navegador para ayudar con el desarrollo
browser significado (12)
¿Alguien puede sugerir algunas buenas herramientas / extensiones de complementos para ayudar con el desarrollo? Tengo Firebug instalado en Firefox, que es ideal para tratar con CSS, HTML y JavaScript; ¿cualquier otra sugerencia?
Firefox:
Inspeccione esto si usa el inspector DOM en absoluto
Mídalo para decirle distancias de píxeles (si lo necesita)
IE View o Safari View para facilitar la prueba en otros navegadores
Validador HTML si le importa la validación
Console2 para mejorar su consola de error js
El bookmarklet de Javascript Shell también es útil (y mira a los demás allí también)
Esto es adicional a la barra de herramientas de desarrollo web mencionada por otros
Esta lista de Cebjyre está casi completa (ya que FireBug ya fue mencionado en la pregunta). Solo agregaría Tamperdata . De vez en cuando es muy útil.
Además de las excelentes herramientas ya mencionadas, considero que Charles es extremadamente útil. Especialmente porque hago mucho trabajo con Flash Remoting que maneja excelentemente.
Charles es un proxy HTTP / monitor HTTP / Reverse Proxy que permite a un desarrollador ver todo el tráfico HTTP entre su máquina e Internet. Esto incluye solicitudes, respuestas y los 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 una plataforma cruzada, cuesta $ 50, pero hay una evaluación de "30 minutos por sesión" que puedes descargar.
Aquí están mis complementos orientados al desarrollo para Firefox 3 :
Definitivamente deberías instalar Safari. Tiene una serie de herramientas integradas. Lo uso en combinación con otros navegadores todo el tiempo.
- Cronología de la red
- Error Console
- Inspector web
- Editor de fragmentos
Además, le permite configurar el agente de usuario para sus solicitudes.
Considere esto, tiene un menú separado de nivel superior llamado Develop .
El otro must-have para Firefox es la Barra de herramientas para desarrolladores web de Chris Pederick.
En el caso de IE, las próximas herramientas pueden ser útiles
- Microsoft Developer Toolbar - dom | styles viewer
- Fiddler HTTP Debugger - monitor http
- Fuente instantánea - dom | styles viewer
- Companion.JS - dom | styles viewer, extended error console
La extensión "uber" para IE - "Herramientas de desarrollo", proporcionada como parte de IE8
Esto es lo que uso:
Firefox:
- Inspector DOM : Utilizo esto más que cualquier otra cosa para el desarrollo web
- Launchy : para abrir sitios en otros navegadores / aplicaciones
- Tamper Data : esto puede ser útil para depurar solicitudes GET / POST
- Web Developer Toolbar : tiene tantas funciones útiles para la depuración: las herramientas de validación del W3C, la regla incorporada, las herramientas de redimensionamiento, la manipulación de fuentes, las herramientas fáciles de caché / css / script
ES DECIR:
- Barra de herramientas para desarrolladores de Internet Explorer : ni siquiera es tan útil como la de Firefox, pero al menos te proporciona un inspector DOM decente
Misc:
- Handmarkletslets de Jesse : el bookmarklet de cáscara es especialmente útil
- También instalé Safari y Opera , pero la mayoría de las veces los utilizo para realizar pruebas y evaluaciones comparativas, ya que sus herramientas de desarrollo no son tan robustas como Firefox, y no son tan problemáticas como IE.
- Lynx : Utilizo esto para asegurarme de que todos los sitios JS-heavy sigan funcionando, de modo que estoy seguro de que se verán bien para google, los lectores de pantalla y cualquier otra aplicación tipo bot.
Firefox:
- Inspeccione esto si usa el inspector DOM en absoluto
- Mídalo para decirle distancias de píxeles (si lo necesita)
- IE View o Safari View para facilitar la prueba en otros navegadores
- Validador HTML si le importa la validación
- Consola 2 para mejorar su consola de error js
- El bookmarklet de Javascript Shell también es útil (y mira a los demás allí también)
Editar: Esto se suma a la barra de herramientas de desarrollo web mencionada por otros
Opera tiene:
Dragonfly (herramientas -> avanzadas -> herramientas de desarrollador)
Métodos de UserJS para interceptar cosas
opera: config # CompatMode% 20Override para forzar peculiaridades o modo estándar
Puede ver el origen de los archivos, editarlos, aplicar cambios y volver a cargar desde el caché.
Para Firefox:
Firebug es increíble para la investigación y el desarrollo.
Web Developer Toolbar es bueno también. Realmente ayuda con CSS y el diseño de página, así como mucho más.
También uso Live HTTP Headers (creo que se llama, pero está en mi máquina de trabajo, por lo que no puedo encontrar el enlace ahora). Lo cual 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 UserAgent Switcher . Muy útil para pretender ser teléfonos móviles diferentes.
Tiendo a usar Firefox solo para el desarrollo, y solo lo pruebo en otros navegadores ya que la mayoría no tiene la amplia gama de complementos para ayudar al desarrollo que Firefox tiene.
YSlow es un complemento dulce de Firebug para solucionar el tiempo de carga de una página.
Developer Console y DOM Snapshot para Opera:
La maravilla es que estos son bookmarklets implementados con JS. La succión es que requieren Internetz.