usar quantum para lite descargar como chrome firebug google-chrome-devtools

quantum - firebug php



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

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?

Relacionado: depurador tipo Firebug para Google Chrome

Agregando mis pocos centavos ...

  1. Chrome Inspector no pudo ordenar alfabéticamente las propiedades de CSS, ya que Firebug podría hacer esto como un amuleto. Ayuda cuando inspecciona algún elemento de CSS y necesita agarrarlo. Firebug es útil para esto.

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

  2. Cuando trabajas en un proyecto relacionado con muchas secuencias de comandos. En Firebug, debajo de la etiqueta de secuencia de comandos, tienes la opción de buscar un archivo js en el cuadro de sugerencia proporcionado. Mientras que con Chrome tendrá una vista de árbol cojo para localizar su archivo JS, lo que es tedioso al ver el espacio de nombres de su archivo js y atravesar el árbol.

    Esta opción podría 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.

Casi hice el cambio hoy, pero noté que no puedo hacer clic derecho en CSS modificado en Chrome y copiar las declaraciones de Rule o Style como puedo en firebug. DIOS Desearía que Firefox no empezara a chupar repentinamente o no tendría este problema.

Con el depurador de Chrome puedo depurar el jsni de mi proyecto GWT donde FireBug solo muestra una función anónima y realmente no reconozco la función actuale.

Creo que las herramientas de desarrollo son similares, pero he tenido problemas para obligar a Chrome a no almacenar nada en la memoria caché. 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.

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 la herramienta 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,

  • Búsqueda :

    La opción de búsqueda está bien definida en Firebug, porque es fácilmente accesible y podemos buscar palabras clave con expresiones regulares y sensibles a mayúsculas y minúsculas .

  • DOM:

    Se puede acceder fácilmente a la estructura DOM en Firebug con diversas 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 ofrece la posibilidad de exportar cookies .

  • Red / Red:

    Firebug tiene un panel de red cuando 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 al usar Source Edit , porque si quieres editar un archivo CSS dentro de DevTools, debes ir al panel de Fuentes , luego presionar Ctrl + O para encontrar el archivo. Solo entonces puedes editar el archivo. En Firebug puedes encontrar fácilmente el Source Edit en cada pestaña del menú.

  • Soporte para dojo:

    Una vez que fui desarrollador de dojo Firebug se extendió fácilmente para apoyar el desarrollo de dojo mediante el uso de Dojo Firebug Extension .

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.

La selección de mouse que Firebug tiene es genial, 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 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.

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 solo en condiciones específicas.
  • Llamadas de función de registro : marque la función y vea todo lo que desea saber en la consola.
  • Interrupción del cambio de propiedad : Marque objetos y el depurador hará una pausa si la propiedad cambia.

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-ins 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 tienes 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 nada avanzado en particular presente en Firebug pero no en Chrome que te perderás.

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

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, debe presionar TAB o ENTER para salir de "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í.

Utilicé 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.

Las herramientas de desarrollo de Chrome patean el trasero porque tiene:

  • Construido en Timeline, Profiler y Heap analizador
  • Construido en la herramienta de auditoría
  • Puede acceder y editar Local / SessionStorage, Cookies, SqlLite DB''s, WebSQL, AppCache, etc ...
  • WebSockets olfateo de red
  • El depurador JS tiene algunas características más (p. Ej. Puntos de interrupción de WebWorker)
  • Depurador JS le permite editar JS sobre la marcha y ejecutarlo (JSFiddle sin el violín)
  • Cada ventana obtiene una ventana devtools si lo desea; Firebug es un singleton
  • Firebug perturba la página al ralentizar su carga e inyectando CSS para su característica de inspector

ACTUALIZACIÓN: 2 años más tarde tengo que felicitar al equipo de Firefox por 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.

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

Panel de consola

Panel HTML

Panel CSS

Panel DOM

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

Panel neto

  • Permite detenerse en XmlHTTPRequests
  • Muestra información de caché por solicitud

Panel de cookies

  • Crear y editar cookies
  • Controlar los permisos de las cookies
  • Muestra el tamaño de las cookies en bruto y formateado
  • Permite detener la ejecución de scripts en el cambio de cookies
  • Exportar cookies en formato estándar

General

  • Abra HTML, CSS y JavaScript en editor externo
  • Permite personalizar accesos directos

Una "característica" que va más allá de la usabilidad es que Firebug es de código abierto . Para que todos puedan participar en él.

Habiendo dicho eso, las DevTools de Chrome (así como las DevTools de Firefox) tienen muchas más características y otras ventajas más pequeñas y más grandes 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.

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.

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

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

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

Chrome Developer Tools se hizo cargo de las funciones de Firebug, por lo que todas las funciones principales y la familiaridad están ahí (como el $0 y el objeto de la console ).

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

Las herramientas de Chrome también tienen los paneles Línea de tiempo , Perfiles y Almacenamiento . El panel de la línea de tiempo registra la carga, el procesamiento de CSS y el análisis de JavaScript. El panel de Perfiles muestra el uso de los recursos y el panel de Almacenamiento 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, que hacen 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).