Soy un desarrollador web novato y me recomendaron Firebug para depurar varias veces. Sin embargo, hasta ahora he estado usando las herramientas de desarrollo integradas de Chrome. Parece hacer todo lo que hace Firebug, y además es más limpio y organizado.
A medida que avanzo en mi depuración, ¿hay características que Firebug tiene que me perderé con DevTools de Chrome? Si es así, ¿Que son?
Relacionado: depurador similar a Firebug para Google Chrome
Respuestas:
Usé Firebug desde el principio y fue una bendición como la invención del fuego. Pero luego Chrome salió con su depurador y lo probé. Seguí usando Firebug, pero estuve atento a las herramientas de desarrollo de Chome y finalmente ya no pude encontrar una razón para no cambiar después de que se agregaron las herramientas JSON en v12.
DevTools de Chrome patea traseros porque tiene:
ACTUALIZACIÓN: 2 años después, tengo que felicitar al equipo de Firefox por hacer grandes avances. Dicho esto, el equipo y el depurador de Chrome dan grandes pasos hacia adelante mensualmente, liderando la industria. Actualizaría la lista anterior, pero, francamente, llenaría toda la página.
Las herramientas de desarrollo de Chrome se hicieron cargo de las funciones de Firebug, por lo que todas las funciones principales y la familiaridad están ahí (como el objeto $0, y console).
Hay algunas pequeñas diferencias, como que las DevTools no tienen un panel CSS (aunque las hojas de estilo CSS se pueden manipular en el panel Elementos ).
Las herramientas de Chrome también tienen los paneles Línea de tiempo , Perfiles y Almacenamiento . El panel Línea de tiempo registra la carga, la representación CSS y el análisis de JavaScript. El panel Perfil perfila el uso de recursos y el panel Almacenamiento muestra y permite cambios en la base de datos del sitio, el almacenamiento local, el almacenamiento de sesiones y las cookies.
Finalmente, ambas herramientas tienen sus propias variaciones menores, lo que hace que varias acciones sean un poco más fáciles o más difíciles. Mi consejo es usar Firebug para Firefox y DevTools para navegadores Webkit, ya que solo Firebug Lite funciona en Chrome y carece de muchas características que tiene el Firebug normal (y las DevTools están integradas en Chrome).
Me siento mucho más cómodo usando Firebug. No puedo pensar en detalles en este momento, pero a veces intento depurar algo en Safari o Chrome y parece un PITA tal que lanzo Firefox y hago lo que sea rápidamente.
La pestaña DOM es una ventaja, por ejemplo. Es más accesible y está mejor diseñado que el equivalente de Chrome. También prefiero la forma en que DOM y otros objetos JS se registran en la consola en Firebug.
Los complementos de Firebug como Pixel Perfect también son muy útiles. No sé si existe alguna herramienta de este tipo para Chrome.
En general, no importa porque, de todos modos, debe probar en ambos navegadores. E IE, también podría compararlo con las herramientas de desarrollo de IE (que han mejorado, pero aún no son buenas en comparación con FF o Webkit).
No creo que haya nada avanzado en particular presente en Firebug pero no en Chrome que te pierdas.
EDITAR : Esto solía ser cierto, pero Chrome Dev Tools lo implementó.
Firebug puede buscar en todos los scripts cargados en una página. Las herramientas de desarrollo de Chrome solo pueden buscar en el script actualmente seleccionado, AFAIK.
Por lo que puedo decir, Firebug es el único que puede editar código HTML y texto en vivo mientras lo escribe. Muy útil, si, por ejemplo, está intentando ver cómo encajaría el texto en un contenedor y agregar un carácter a la vez.
En Chrome, cuando edita el HTML, debe presionar TAB o ENTER para salir del "modo de edición" y ver los cambios en su página.
En Firebug también puede ingresar código HTML de inmediato. En Chrome, debe hacer clic derecho y elegir "Editar HTML". De lo contrario, aparecerá en <b> negrita </b>.
Realmente quiero cambiar a Chrome, ya que parece funcionar más rápido, pero la edición en vivo es demasiado importante para mí.
La selección de mouse que tiene firebug es excelente, pero parece que no puedo encontrarla en las herramientas de desarrollo de Chrome.
Me molesta porque no puedo encontrar una tecla de acceso rápido en Firebug, mientras que Chrome carece de ella por completo.
Soy un desarrollador novato, por lo que el mouse todavía se usa la mayor parte del tiempo al desarrollar.
En el momento en que se hizo esta pregunta, Firebug era una bestia, pero ahora las herramientas de desarrollo de Chrome (DevTools) son útiles para los desarrolladores web. Aunque no estoy despotricando sobre Firebug porque he aprendido el desarrollo web usando Firefox con Firebug.
Fue una gran herramienta para el desarrollo web e introdujo todas las características principales de DevTools y DevTools de Firefox. Sin embargo, cambié a Chrome DevTools aunque no cubren todas las características de Firebug, porque son livianas y mucho más rápidas que Firebug, acceder a localStorage se define fácilmente y las fuentes están organizadas allí en mi opinión.
Aquí voy a enumerar cómo las características son únicas en Firebug,
Buscar :
La opción de búsqueda está bien definida en Firebug, porque es de fácil acceso y podemos buscar palabras clave que distinguen entre mayúsculas y minúsculas y expresiones regulares .
DOM:
Se puede acceder fácilmente a la estructura DOM en Firebug con varias opciones de filtrado como Mostrar propiedades definidas por el usuario , Mostrar funciones definidas por el usuario, etc.
Galletas:
Firebug nos permite crear nuestras propias cookies y proporciona la posibilidad de exportar cookies .
Red / Red:
Firebug tiene un panel Net , donde DevTools lo llama Red . Ambos son útiles para analizar todas las solicitudes realizadas para cargar los recursos y su estado. En Firebug, podemos captar fácilmente la IP remota de los recursos .
Fuentes:
Aunque Source Edit está disponible en DevTools, creo que Firebug es mejor cuando se usa Source Edit , porque si desea editar un archivo CSS dentro de DevTools, debe ir al panel de Fuentes y luego presionar Ctrl+ Opara encontrar el archivo. Solo entonces podrá editar el archivo. En Firebug, puede encontrar fácilmente la edición de fuente en cada pestaña del menú.
Soporte para dojo:
Una vez que fui desarrollador de dojo, Firebug se extendió fácilmente para admitir el desarrollo de dojo mediante el uso de la extensión de Dojo Firebug .
Firebug 2.0 visto objetivamente tiene muchas características pequeñas, que Chrome DevTools no tiene. Algunos de ellos se enumeran aquí:
General
Una "característica" que va más allá de la usabilidad es que Firebug es de código abierto . Para que todos puedan participar.
Habiendo dicho eso, las DevTools de Chrome (así como las DevTools de Firefox) tienen muchas más funciones y otras ventajas más pequeñas y más grandes sobre Firebug ya que el equipo detrás de Firebug es muy pequeño en comparación con los equipos detrás de las otras DevTools.
Además, Firebug 3+ se integra en Firefox DevTools incorporado , lo que significa que esas versiones heredan todas las características de Firefox DevTools y pueden agregar características adicionales.
Firebug tiene la posibilidad de tener otros complementos adjuntos como Firecookie . Por lo demás, son bastante similares, en mi opinión se trata de gustos.
chrome.devtoolsAPI .
Creo que las herramientas de desarrollo son similares, pero he tenido problemas para obligar a Chrome a no almacenar nada en caché. Incluso la configuración de Chrome "Desactivar caché" no funcionó el 100% del tiempo; No estoy seguro de por qué.
No tuve este problema con Firefox / Firebug, por lo que todavía lo estoy usando.
Añadiendo mis pocos centavos ...
Chrome Inspector no pudo ordenar las propiedades CSS alfabéticamente, mientras que Firebug podría hacer esto como un encanto. Ayuda cuando inspecciona algún elemento CSS y necesita agarrarlo. Firebug es útil en esto.
De acuerdo con una buena práctica de codificación CSS, siempre es mejor tener sus propiedades CSS ordenadas alfabéticamente en su código.
Cuando estás trabajando en un proyecto que involucra muchos scripts, en firebug bajo la etiqueta de script tienes la opción de buscar un archivo js en el cuadro de sugerencias provisto. Donde, como con Chrome, tendrá una vista de árbol poco convincente para ubicar su archivo JS, lo cual es tedioso para ver el espacio de nombres de su archivo js y atravesar el árbol.
Es posible que esta opción no afecte a nadie que tenga pequeños archivos JS en su proyecto. Esta característica es un éxito con Firebug que uso cuando mis scripts tienen más de 1000 archivos JS.
Casi hice el cambio hoy, pero noté que no puedo hacer clic con el botón derecho en CSS modificado en Chrome y copiar las declaraciones de Regla o Estilo como puedo hacer en Firebug. DIOS Ojalá Firefox no comenzara a apestar repentinamente o no tendría este problema.
Me encanta la herramienta de desarrollo de Chrome, pero en algún momento me perdí esta poderosa función de Firebug.
Función de solicitud "Editar y reenviar"
Con la función "Editar y reenviar" en las herramientas de desarrollo de Firefox (Replay XHR o algo en Firebug), puede reproducir la solicitud XHR con cambios en la solicitud, incluidos los encabezados de la solicitud, el cuerpo de la solicitud, el método http e incluso la URL. Replay XHR de Google Chrome simplemente reproduce la solicitud y no permite ninguna modificación a la solicitud.
Utilizo Firefox Devtools cuando necesito esta función.