¿Qué características tienen que Firebug herramientas para desarrolladores de Chrome no tienen? [cerrado]

StackOverflow https://stackoverflow.com/questions/3124974

  •  30-09-2019
  •  | 
  •  

Pregunta

Soy un desarrollador novato web, y he tenido Firebug recomienda para depurar varias veces. Hasta ahora, sin embargo, yo sólo he estado usando Chrome incorporado en las herramientas de desarrollo. Parece que hacer todo lo que Firebug hace, y es más limpio y más organizado como un bono.

Mientras que consigo más avanzado en mi depuración, hay características que Firebug tiene que perderá en la DevTools de Chrome? Si es así, ¿cuáles son?

relacionadas: Firebug como depurador para Google Chrome

¿Fue útil?

Solución

He utilizado Firebug desde el principio y fue un regalo del cielo, como la invención del fuego. Pero entonces Chrome salió con su depurador y lo probé. Seguí usando Firebug, pero mantuvo un ojo en herramientas de dev Chome y, finalmente, no podía ya encontrar una razón para no interruptor después herramientas JSON se añadieron en v12.

DevTools de Chrome patear el trasero porque tiene:

  • construido en la línea de tiempo, perfiles y el analizador Montón
  • construido en la herramienta de auditoría
  • Puede acceder y Edición local / sessionStorage, galletas, SqlLite DB, WebSQL, AppCache etc ...
  • Red de WebSockets oler
  • JS depurador tiene algunas características más (por ejemplo, puntos de interrupción Webworker)
  • JS depurador te permite editar JS sobre la marcha y ejecutarlo (jsFiddle w / o el violín)
  • Cada ventana aparece una pantalla devtools si lo desea; Firebug es un conjunto unitario
  • Firebug perturba la página al disminuir su carga y hacia abajo mediante la inyección de CSS para su función de inspector

ACTUALIZACIÓN: 2 años más tarde tengo que felicitar al equipo de Firefox para hacer grandes avances. Dicho esto, el equipo de Chrome y depurador hacen grandes saltos hacia adelante sobre una base mensual, lo que lleva a la industria. Me actualizar la lista anterior, pero francamente llenaría toda la página.

Otros consejos

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

me siento mucho más cómodo el uso de Firebug. No puedo pensar en detalles en este momento, pero a veces voy a tratar de depuración algo en Safari o Chrome y parece que un PITA tal que lanzo Firefox y consigo lo hace rápidamente.

La pestaña DOM es una ventaja, por ejemplo. Es más accesible y bien diseñada que el equivalente de cromo. Yo prefiero la forma DOM y otros objetos JS se registran en la consola de Firebug, también.

Firebug plug-ins como Pixel Perfect son muy útiles también. No sé si existe alguna de estas herramientas para Chrome.

En general, no importa porque hay que prueba en ambos navegadores, de todos modos. E IE, lo que también podría compararlo con herramientas de IE (Dev que han mejorado, pero todavía no son buenas en comparación con FF o Webkit 's).

No creo que nada de allí avanzó en particular presente en Firebug, pero no en Chrome que se le echa en falta.

Las herramientas de desarrollo de Chrome se hizo cargo de las características de Firebug, por lo que todos los principales rasgos y la familiaridad son allí (como el $0, y el objeto console).

Hay algunas pequeñas diferencias, como las DevTools no tienen un CSS Panel (aunque las hojas de estilo CSS se pueden manipular en el Elementos Panel).

herramientas de Chrome, además, tienen los Línea de tiempo , Perfiles y almacenamiento paneles. El Línea de tiempo Panel registra la carga, la representación de CSS, JavaScript y el análisis. El Perfil perfiles de panel uso de recursos y los almacenamiento Panel muestra y permite cambios en la base de datos del sitio, almacenamiento local, almacenamiento de sesión y cookies.

Por último, ambas herramientas tienen sus propias variaciones de menor importancia, que hacen diversas acciones un poquito más fácil o más difícil. Mi consejo es utilizar Firebug para Firefox, y DevTools para los navegadores Webkit, ya que sólo Firebug Lite funciona en Chrome, y carece de muchas características del Firebug normal tiene (y los DevTools están integradas en Chrome).

Editar . Esto solía ser cierto, pero Chrome Herramientas de desarrollo que implementa

Firebug puede buscar en todos los scripts cargados en una página. Chrome Dev Tools sólo puede buscar en el guión seleccionado en ese momento, que yo sepa.

Por lo que yo puedo decir, Firebug es el único que puede editar código HTML y texto en vivo mientras se está escribiendo. Muy útil, si estás por ejemplo, tratando de ver cómo el texto encajaría en un recipiente y añadir un carácter a la vez.

En Chrome cuando se edita el código HTML, usted tiene que presione la tecla TAB o ENTER para salir de "modo de edición", y ver los cambios en su página.

En Firebug también puede introducir código HTML de inmediato. En Chrome, usted tiene que hacer clic derecho y elegir la opción "Edición de HTML". De lo contrario, se mostrará como negrita .

Realmente quieren cambiar a Chrome, ya que parece correr más rápido, pero la edición en vivo es demasiado importante para mí.

El incendiario selección ratón ha es grande, pero me parece que no puede encontrar en las Herramientas para desarrolladores de Chrome.

Me molesta porque no puedo encontrar una tecla de acceso rápido para él en Firebug, mientras que el cromo carece por completo.

Soy un desarrollador novato, por lo que el ratón se utiliza todavía la mayor parte del tiempo en el desarrollo.

En el momento en que se hizo esta pregunta Firebug era una bestia, pero ahora las herramientas para desarrolladores de Chrome (DevTools) son muy útiles para los desarrolladores web. Aunque no estoy despotricando sobre Firebug porque he aprendido el desarrollo web con Firefox con Firebug.

Fue una gran herramienta para el desarrollo web y es introducido todas las características principales de DevTools y DevTools de Firefox tiene. Sin embargo, me cambié a los DevTools Chrome aunque no cubren todas las características de Firebug, porque son la luz ponderado y mucho más rápido que Firebug, acceder localStorage es fácilmente definido y las fuentes se organizan allí en mi opinión.

A continuación, voy a la lista de cómo las características son únicas en Firebug,

  • Buscar

    Buscar opción está bien definido en Firebug, debido a su fácil acceso y que puede buscar palabras clave con mayúsculas y minúsculas y expresión regular .

  • DOM:

    La estructura del DOM se puede acceder fácilmente en Firebug con varios Opciones como Mostrar propiedades definidas por el usuario , Mostrar funciones definidas por el usuario y filtrar así sucesivamente.

  • Cookies:

    Firebug nos permite crear nuestros propias cookies y da suministro a Exportar las cookies .

  • Red / Neto:

    Firebug tiene un panel de Net wheras los DevTools llaman Red . Ambos son útiles para analizar todas las peticiones hechas al cargar los recursos y su estado. En Firebug, podemos entender fácilmente los recursos IP remota .

  • Fuentes:

    A pesar de que el Fuente Editar está disponible en los DevTools, siento Firebug es mejor con el uso de Fuente Editar , porque si se desea editar un archivo CSS dentro de los DevTools , usted tiene que ir a Fuentes Panel, a continuación, presione Ctrl + O para buscar el archivo. Sólo entonces se puede editar el archivo. En Firebug se puede encontrar fácilmente el Fuente Editar en cada pestaña del menú.

  • Soporte para dojo:

    Una vez que era un desarrollador dojo Firebug era fácilmente extendida para soportar dojo developement utilizando el Dojo Firebug Extensión .

Objetivamente visto Firebug 2.0 tiene muchas características pequeñas, que los DevTools Chrome no tienen. Algunos de ellos se enumeran aquí:

Consola Panel

HTML Panel

CSS Panel

DOM Panel

  • Muestra todas las propiedades DOM en un solo lugar
  • cierres
  • Permite filtrar la visualización por las propiedades, funciones, etc.

Net Panel

  • Permite parar en XmlHttpRequests
  • información muestra caché por solicitud

cookies Panel

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

General

  • Abrir HTML, CSS y JavaScript en editor externo
  • permite personalizar los atajos

A "característica" que va más allá de la capacidad de uso es que Firebug es abierto fuente . Para que todos puedan participar en él.

Una vez dicho esto, el cromo DevTools (así como la DevTools Firefox) tienen muchas más características y otras ventajas más pequeños y más grandes más de Firebug como el equipo detrás de Firebug es muy pequeña en comparación con los equipos detrás de los otros DevTools.

Además, Firebug se integra en 3+ el built-in de Firefox DevTools , lo que significa esas versiones heredan todas las características de la DevTools Firefox y pueden añadir características adicionales.

Firebug tiene la posibilidad de tener otro plugin de adjuntar al mismo, como Firecookie . Para el resto son bastante similares, es una cuestión de gustos, en mi opinión.

También añadir que se puede copiar selector CSS XPATH complemento para un elemento HTML.

Eso es realmente útil a veces! :))) jajaja

Creo que las herramientas de desarrollo son similares pero he tenido problemas para obligar a que Chrome no caché nada. Incluso si se establece la configuración de Chrome "caché Desactivar" no funciona al 100% de las veces; No estoy seguro de por qué.

Yo no tenía este problema con Firefox / Firebug, así que todavía estoy usando.

Adición de mis pocos centavos ...

  1. Chrome inspector no podía ordenar alfabéticamente las propiedades CSS donde como Firebug podría hacer esto como un encanto. Ayuda cuando se inspecciona algún elemento css y necesidad de agarrar Firebug es muy útil en este sentido.

    De acuerdo con buena práctica de codificación CSS, siempre es mejor tener sus propiedades CSS ordenados alfabéticamente en el código.

  2. Cuando se trabaja en un proyecto involucrado con mucha scripts.In incendiario bajo etiqueta de script tiene la opción de buscar un archivo js en el buzón de sugerencias proporcionado. En tanto que con el cromo tendrá una vista de árbol de hoja de metal para localizar el archivo JS que es tedioso para ver el namespacing de su archivo js y recorrer el árbol.

    Esta opción podría no afectar a cualquier persona que se involucra con archivos pequeños JS en su proyecto. Esta característica es una explosión con Firebug que utilizo cuando mis guiones son más de 1000 archivos JS.

Casi hizo el cambio hoy, pero me di cuenta de que no puedo hacer clic derecho sobre CSS modificado en Chrome y copiar la Regla o declaraciones de estilo como pueda en Firebug. DIOS Deseo Firefox no de repente empezar a chupar de lo contrario no tendría este problema.

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

I love herramienta de Chrome dev pero en algún momento me perdí estas características de gran alcance de Firebug.

  • Condicional punto de interrupción :. Pausa sólo con la condición específica
  • llamadas función de registro : marcar la función y ver todo lo que quiere saber en la consola.
  • Rotura encendido Cambiar propiedad . Objetos Mark y depurador se detendrá si la propiedad se ve modificado

"Editar y vuelva a enviar" función de solicitud

Con la característica de Firefox Herramientas para desarrolladores (Replay XHR o algo en Firebug) "Editar y vuelva a enviar", puede reproducir la solicitud XHR con los cambios en la solicitud, incluyendo las cabeceras de petición, solicitud cuerpo, http método e incluso url. Google Chrome Replay XHR simplemente reproduce la solicitud, y no permite ninguna modificación a la solicitud.

Yo uso Firefox Devtools cuando necesito esta función.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top