¿Qué características tiene Firebug que las herramientas para desarrolladores de Chrome no tienen?

Question

Soy un desarrollador web novato, y he recomendado Firebug para la depuración varias veces. Hasta ahora, sin embargo, acabo de utilizar las herramientas para desarrolladores integradas de Chrome. Parece que hace todo lo que hace Firebug, y es más limpio y más organizado como una bonificación.

A medida que avanzo en mi depuración, ¿hay características que Firebug tiene que perderé con las DevTools de Chrome? Si es así, ¿Que son?

relacionadas: Firebug-like debugger for Google Chrome

Answer 1

He usado Firebug desde el principio y fue un regalo del cielo como la invención del fuego. Pero luego salió Chrome 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 agregaran las herramientas de JSON en v12.

DevTools de Chrome patear el trasero porque tiene:

• construido en el analizador de línea de tiempo, perfiles y Heap
• construido en la herramienta de auditoría
• pueden acceder y editar Locales/sessionStorage, galletas, SqlLite DB , WebSQL, AppCache, etc ...
• WebSockets olfateo de red
• Depurador JS tiene algunas características más (por ejemplo, puntos de interrupción WebWorker)
• Depurador JS, edite JS sobre la marcha y ejecútelo (JSFiddle sin el violín)
• Cada ventana tiene una ventana devtools si lo desea; Firebug es un producto único
• Firebug perturba la página al disminuir su carga hacia abajo y mediante la inyección de CSS para su función de inspector de

ACTUALIZACIÓN: 2 años más tarde tengo que felicitar al equipo de Firefox para hacer grandes avances. Dicho eso, el equipo y el depurador de Chrome hacen grandes avances mensualmente, liderando la industria. Actualizaría la lista anterior, pero francamente llenaría toda la página.

Answer 2

No se han topado con una característica Firebug me he perdido aún después de cambiar a Chrome.

Answer 3

Las herramientas para desarrolladores de Chrome asumieron las funciones de Firebug, por lo que todas las características principales y la familiaridad están ahí (como el objeto $0 y console).

Hay algunas pequeñas diferencias, tales como los DevTools no tienen un CSS panel (aunque hojas de estilo CSS se pueden manipular en el panel de elementos).

herramientas El cromo, además, tienen la línea de tiempo, Perfiles y almacenamiento paneles. El Línea de tiempo registros del panel de carga, representación CSS y análisis de JavaScript. El perfil uso de recursos de perfiles del panel y el Storage panel muestra y permite cambios en la base de datos del sitio, el almacenamiento local, el almacenamiento de la sesión y las cookies.

Finalmente, ambas herramientas tienen sus propias variaciones menores, lo que hace que las diferentes 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 le faltan muchas características que Firebug tiene (y las DevTools están integradas en Chrome).

Answer 4

Me siento mucho más cómodo usando Firebug. No puedo pensar en detalles por el momento, pero a veces intentaré depurar algo en Safari o Chrome y parece un PITA como el que lanzo Firefox y hago lo que sea que se haga rápidamente.

La pestaña DOM es una ventaja para uno. Es más accesible y bien diseñado que el equivalente de Chrome. Prefiero la forma en que DOM y otros objetos JS también se registran en la consola en Firebug.

Los plug-in de Firebug como Pixel Perfect son muy útiles también. No sé si existe alguna herramienta de este tipo para Chrome.

En general, no importa porque tiene que probar en ambos navegadores, de todos modos. Y IE, así que podría compararse con las herramientas de desarrollo de IE (que han mejorado, pero aún no son buenas en comparación con las de FF o Webkit).

No creo que haya algo avanzado en el presente particular en Firebug pero no en Chrome que te perderás.

Answer 5

Firebug tiene la posibilidad de tener otro complemento adjunto, como Firecookie. Por lo demás, son bastante similares; en mi opinión, todo se trata del gusto.

Answer 6

EDIT: 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 seleccionado actualmente, AFAIK.

Answer 7

La selección de mouse que firebug tiene es excelente, pero parece que no puedo encontrarlo en las Herramientas de desarrollo de Chrome.

Me molesta porque no puedo encontrar una tecla de acceso rápido para este en firebug, mientras que Chrome carece por completo.

Soy un desarrollador novato, por lo que el mouse se usa la mayor parte del tiempo cuando se desarrolla.

Answer 8

también agregue que puede xopy XPATH agregar el selector de CSS para un elemento HTML.

¡ESO es realmente útil a veces! :))) jajaja

Answer 9

Creo que las herramientas de desarrollo son similares, pero he tenido problemas para obligar a Chrome a no almacenar en caché nada. Incluso la configuración de "Deshabilitar la memoria caché" de Chrome no funcionó el 100% del tiempo; No estoy seguro por qué.

No tuve este problema con Firefox/Firebug, así que todavía lo estoy usando.

Answer 10

Adición de mis pocos centavos ...

1. Chrome inspector no podía ordenar las propiedades CSS alfabéticamente donde como Firebug podría hacer esto como un encanto. Ayuda cuando se inspecciona algún elemento de CSS y se necesita agarrarlo. Firebug es útil para esto.

   Según la buena práctica de codificación CSS, siempre es mejor tener tus propiedades CSS ordenadas alfabéticamente en tu código.

2. Cuando está trabajando en un proyecto relacionado con muchas secuencias de comandos. En Firebug debajo de la etiqueta de secuencia de comandos tiene la opción de buscar un archivo js en el cuadro de sugerencias proporcionado. Donde, como en cromo, tendrá una vista de árbol cojo para localizar su archivo JS, que es tedioso al ver el espacio de nombres de su archivo js y atravesar el árbol.

   Esta opción puede no afectar a nadie que participe con pequeños archivos JS en su proyecto. Esta característica es una explosión con firebug que uso cuando mis scripts son más de 1000 archivos JS.

Answer 11

Por lo que puedo decir, Firebug es el único que puede editar código HTML y texto en vivo a medida que lo escribe. Muy útil, por ejemplo, si está tratando de ver cómo se ajusta el texto en un contenedor y agrega un carácter a la vez.

En Chrome cuando edita el HTML, tiene que 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 el código HTML de inmediato. En Chrome, debe hacer clic derecho y seleccionar "Editar HTML". De lo contrario, aparecerá como <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í.

Answer 12

Casi he hecho el cambio hoy, pero noté que no puedo hacer clic derecho en CSS modificado en Chrome y copiar las declaraciones de Regla o Estilo, como puedo en Firebug. DIOS Me gustaría que Firefox no empezara a chupar repentinamente o no tendría este problema.

Answer 13

En el momento en que se formuló 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 aprendí 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 tiene 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, el acceso 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:

  opción de búsqueda está bien definido en Firebug, debido a su fácil acceso y podemos palabra clave de búsqueda con distingue entre mayúsculas y minúsculas y expresión regular.

• DOM:

  La estructura del DOM se puede acceder fácilmente en Firebug con varias opciones de filtrado como muestran propiedades definidas por el usuario,aparecen las funciones definidas por el usuario y así sucesivamente.

• Cookies:

  Firebug nos permite crear nuestras propias galletas y da suministro a galletas de exportación.

• Red/Neto:

  Firebug tiene un panel neto wheras los DevTools llaman red. Ambos son útiles para analizar todas las solicitudes realizadas para cargar los recursos y su estado. En Firebug, podemos comprender fácilmente los recursos 'Remote IP.

• Fuentes:

  pesar de que el Fuente Editar está disponible en los DevTools, siento Firebug es mejor con el uso Fuente Edición, porque si se desea editar un archivo CSS dentro de los DevTools , tiene que ir al panel Fuentes, luego presione Ctrl + O para encontrar el archivo. Solo entonces puedes editar el archivo. En Firebug puede encontrar fácilmente Source Edit debajo de cada pestaña del menú.

• Soporte para dojo:

  Una vez yo era un desarrollador dojo Firebug era ampliarse fácilmente para apoyar dojo Desarrollos utilizando el Dojo Firebug Extension.

Answer 14

Con el depurador de cromo puedo depurar el JSNI de mi proyecto GWT donde FireBug limita a mostrar una función anónima y que realmente no reconocer la función actuale en absoluto.

Answer 15

Me encanta la herramienta de desarrollo de Chrome, pero en algún momento me perdí esta poderosa característica de Firebug.

• punto de interrupción condicional: pausa sólo con la condición específica.
• Llamadas a la función de registro: marque la función y vea todo lo que desea saber en la consola.
• Interrumpir el cambio de propiedad: Marque los objetos y el depurador se detendrá si se modifica la propiedad.

Answer 16

Objeto visto Firebug 2.0 tiene muchas características pequeñas, que las herramientas de desarrollo de Chrome no tienen.Algunos de ellos se enumeran aquí:

Console panel

• XMLHttpRequests Muestra incluyendo toda la información de la solicitud
• Muestra de galletas cambia
• Algunos más Command Line API funciones
• separados Command Editor

HTML panel

• Edición en línea con auto-completion for attibutes and CSS styles
• Opciones para controlar si para resaltar los cambios, ampliarlos y desplazarse para verlos,
• Opciones para controlar la visualización entidad
• Quick Info Box

CSS panel

• Muestra hojas de estilo de la página de una manera formateada
• Selectors side panel

DOM panel

• Muestra todas las propiedades DOM en un solo lugar
• Muestra closures
• Permite filtrar la pantalla por propiedades, funciones, etc.

Net panel

• permite detener el XmlHttpRequests
• Muestra información de la caché por solicitud

Cookies panel

• crear y editar las cookies
• El control sobre los permisos de cookies
• muestra el tamaño cruda y con formato de cookies
• permite detener la ejecución del script en el cambio de galletas
• galletas de exportación en formato estándar

general

• Open H TML, CSS y JavaScript en editor externo
• permite personalizar atajos

una "característica" que va más allá de la usabilidad es que Firebug es open source. Para que todos puedan participar en él. Dicho esto, las DevTools de Chrome (así como las DevTools de Firefox) tienen muchas más características y otras ventajas más pequeñas que 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.

También, Firebug 3+ integrates into the built-in Firefox DevTools, lo que significa que esas versiones heredan todas las características de las DevTools de Firefox y pueden agregar características adicionales.