firefox - una - ¿Cuál es tu consejo o truco favorito de Firebug?

mozilla help

Question

Creo que a todos los desarrolladores web les encanta la extensión Firebug de Firefox para resolver problemas de CSS, JavaScript o HTTP.

Lo uso con mucha frecuencia, pero estoy seguro de que no conozco algunas gemas ocultas. ¿Cuál es tu truco o consejo favorito (no evidente) para Firebug?

Answer 1

A veces, al depurar Ajax, la consola no muestra todas las solicitudes (por ejemplo, si está utilizando Ajax de dominio cruzado o iframes ocultos). Todavía puede verlos si cambia a la pestaña "Red".

Answer 2

Ahora uso Firebug para aplicaciones Flex y Flash para descubrir qué ocurre (ya que el rastreo requiere un lugar para rastrear). El método se ve así, a veces

public static function debug(text:Object):void {
    trace(text); // trace is nice if you''ve got it
    ExternalInterface.call("console.log", text.toString());
}   

Funciona de maravilla...

(Todavía no estoy seguro si necesito que la consola sea un objeto Javascript existente, en cuyo caso necesitaría combinar la solución de roosteronacid con esta. Como usted controla la página HTML, generalmente, todo es posible).

Answer 3

Aquí está uno de mis consejos.

Al depurar JavaScript, puede establecer puntos de interrupción condicionales haciendo clic derecho en el símbolo del punto de interrupción rojo:

Answer 4

Aunque no es realmente un truco ni nada, ni siquiera es específico de Firebug, es lo que más me gusta de Firebug ya que literalmente lo uso todos los días si no varias veces por hora y es por supuesto la capacidad de editar directamente HTML y CSS y mirar el resultado aparece instantáneamente Es un ahorro de tiempo increíble sobre simplemente editar y volver a cargar para verificar las cosas, en cuanto a diseño. Todo lo que hago probablemente tomaría el doble de tiempo sin esa característica.

Answer 5

Cada vez que veo un anuncio molesto y llamativo que me distrae de la lectura, simplemente enciendo Firebug, uso el inspector para inspeccionar el elemento del anuncio (o elemento principal) y luego configura su atributo CSS "mostrar" en "ninguno". Presto, sin anuncios!

Answer 6

Cambia el estilo y los valores de CSS sobre la marcha para probar mientras depuro mi CSS y diseño ...

Answer 7

Escribir y probar el código directamente dentro de Firebug, especialmente las funciones de codificación de ayuda.

La sensación de Coding Live es genial. Vea algunas funciones recientes de ayuda que he escrito en Firebug.

Answer 8

Instalando YSlow for Firebug desde Yahoo.

Answer 9

La consola Firebug para una salida de depuración fácil. Es una excelente alternativa para alert(''blah'') .

Answer 10

Mi cosa favorita absoluta es la variable incorporada $0 que apunta a lo que ha inspeccionado más recientemente. Solo me enteré de esto recientemente, y es muy útil.

Answer 11

Muchas personas a veces se olvidan de usar estos:

console.log (x, y, z) -> imprime las 3 variables en 1 línea de consola
console.warn ("¡tengo fondo!") -> marca esta línea, para detectar fácilmente los ojos;)
console.dir ({a: 1, b: 2, c: 3}) -> imprime datos de json / Array de una forma agradable.

Además, utilizo en gran medida la pestaña NET, que es muy útil para ver datos de tráfico JSON, también para analizar scripts de bloqueo y medir los tiempos de las solicitudes HTTP.

Answer 12

No es un truco de Firebug sí mismo, pero otra buena extensión para Firebug es Firecookie . Permite administrar fácilmente las cookies.

Answer 13

Otra buena extensión de Firebug es FireSpider , que te permite detectar fácilmente enlaces rotos, etc. en tus sitios web.

Answer 14

Si hace clic en algún nombre o valor de propiedad de CSS en la pestaña Estilo, puede desplazarse por todos los valores posibles usando las teclas de flecha ARRIBA y ABAJO. También funciona en tamaños incrementándolos en 1 (si presiona ARRIBA en un valor de 10px irá 11px, 12px, etc.) - útil cuando intenta calcular el tamaño / margen del elemento correcto ya que no tiene que ingresar cada número manualmente

Answer 15

Si no está seguro de cuántos argumentos se pasan a alguna función de devolución de llamada y qué son:

$(''li'').each(function(/* what''s passed here? */) {
    //...
});

puede reemplazar rápidamente esta función con console.log y ver todos los parámetros en un registro:

$(''li'').each(console.log);

o use la propiedad js arguments para obtener una matriz de argumentos pasados:

$(''li'').each(function(/* what''s passed here? */) {
    console.log(arguments)
});

Answer 16

FirePHP permite producir mensajes de depuración desde PHP que se envían como encabezados y que Firebug registra.

Pixelperfect permite colocar una imagen superpuesta para alinear los elementos HTML con su borrador.

Answer 17

FireQuery . Inyectará jQuery en la página y le permitirá usarlo desde la pestaña de la consola, lo que facilita la prueba de jQuery o simplemente ejecutar comandos en contra de la página en la que se encuentra. También agrega algunas extensiones a la pestaña HTML que le permitirán ver cosas como las etiquetas de data de jQuery y los eventos adjuntos. Es imprescindible si usa Firebug y desarrolla jQuery.

Answer 18

ACTUALIZAR:

Parece que ahora puede anular el objeto de la consola. Te sugiero que Insin (que ha publicado un comentario sobre esta respuesta).

Solo Firebug ofrece el objeto de console a JavaScript.

Esta solución evitará que JavaScript en Internet Explorer y otros navegadores se rompan cuando se usa el objeto de console de Firebug en la fase de desarrollo.

Esta es una gran solución para depurar la misma aplicación en varios navegadores. (No más comentarios sobre todas las llamadas a objetos de la console ).

try
{
    var console = {
        log: function () { return; },
        debug: function () { return; },
        info: function () { return; },
        warn: function () { return; },
        error: function () { return; },
        "assert": function () { return; },
        dir: function () { return; },
        dirxml: function () { return; },
        trace: function () { return; },
        group: function () { return; },
        groupEnd: function () { return; },
        time: function () { return; },
        timeEnd: function () { return; },
        profile: function () { return; },
        profileEnd: function () { return; },
        count: function () { return; }
    };
}

catch (e) { }

Incluso puede modificar el objeto de la console para que funcione en otros navegadores:

try
    {
        var console = {
            log: function () { for (msg in arguments) { alert(msg); } },
            ....

Una buena ventaja es que Visual Studio ahora puede reconocer el objeto de la console y sus métodos.

Answer 19

CodeBurner es un complemento de documentación para Firebug, que muestra material de referencia para cualquier elemento HTML o propiedad de CSS. Agrega un panel de Referencia que contiene:

• cumplimiento de estándares
• compatibilidad con el navegador
• sintaxis
• muestras de código

Enlace al complemento en Mozilla

Tú también puedes:

• buscar todos los elementos, atributos y propiedades de CSS conocidos.
• busca el elemento seleccionado a través de los menús contextuales de los siguientes paneles Firebug:
  • HTML y CSS
  • DOM crumbtrail
  • Inspector

Answer 20

Si tienes la costumbre de escribir scripts de Greasemonkey, la función $x Firebug es invaluable para depurar tu XPATH. En la pestaña HTML, también puede hacer clic con el botón derecho en cualquier elemento y "Copiar XPATH" para acelerar su camino hacia el document.evaluate . Evalúe el cielo.

Registrar todos los eventos para cualquier elemento en particular haciendo clic derecho sobre él en la pestaña HTML y seleccionando "Registrar eventos" también es bastante ingenioso.

En la pestaña DOM, el menú desplegable Opciones le permite mostrar solo propiedades y funciones que han sido definidas por el usuario, lo que es útil para descubrir exactamente qué impacto tiene en el espacio de nombres global o problemas de depuración donde alguien ha introducido accidentalmente variables globales.