GetFirebug logo



Tajemství v používání
a
programování Firebugu

WebExpo, Praha, Říjen 2009
Jan Odvárko
odvarko@gmail.com

getfirebug.com

Firebug - Historie

  • Joe Hewitt (Leden 2006)
    • Open Source od Prosince 2006
    • Vývoj ukončen ~ Květen 2007
  • Firebug Working Group (Listopad, 2007)
    • John J. Barton (IBM)
    • Steve Souders (Google)
    • Jan Odvarko (Mozilla)
    • Rob Campbell (Mozilla)
    • Další...
  • Výjimečná komunita (programátoři)

Firebug - Rozšíření Firefoxu

  • Integrace s Firefoxem
    • Vždy připraven!
    • Reflexe HTML, CSS
    • HTML/CSS Inspektor
  • Firebug Lite
    • Podpora pro ostatní prohlížeče
    • Javascript Injection/Bookmarklet
    • Omezené funkce debugger
  • Firebug = JavaScript + XUL + HTML

JavaScript Debugger

  • Debugging
    • Statické skripty
    • Dynamické skripty
      eval("{java-script-source}")
    • Skripty Událostí
  • Debug Tools
    • Profiler
    • Watch panel (hodnoty proměnných)
    • Call Stack (pořadí volání funkcí)
  • Break On Next + Breakpoints


Konzole & Příkazová řádka

  • Konzole
    • Logování chyb, varování, XHR
    • Break On Error
    • Vlastní šablony pro logy extensions
  • Příkazová řádka
    • Vykonání JS v kontextu stránky.
    • Připravené API
      $(elem-id), $$(css-selector), cd(iframe), ...
    • Vlastní API extensions


Document Object Model

  • Editace, okamžitá změna stránky
  • Break On Property Change
  • Seznam definovaných funkcí

HTML & CSS

  • Editace CSS (okamžitá změna stránky)
  • HTML Debugging
  • Break on Mutation
    • Změna atributu
    • Nový element
    • Smazaný element





Next: Breakpoint Bar

HTTP Monitor

  • Seznam dotazů vykonaných stránkou + detaily
  • JSON Explorer
  • XML Explorer
  • Další: WDDX Explorer (Web Distributed Data eXchange)?
  • Exportování HTTP Logů:
    • NetExport Extension
    • HTTP Archive 1.1 (HAR)

Debugging HTTP

  • Break on XHR
  • Podmíněné breakpointy
    • Hodnota URL parameteru
      'param-name' == 1
    • Poslaná data
      $postBody.indexOf("keyword")




Programování Firebugu
pomocí rozšíření

Firefox & Firebug Extensions

Firebug Extensions

  • ~30 rozšíření pro Firebug!
  • Zajímavá platforma pro vývojové nástroje
  • Chromebug: Debugger pro Firefox rozšíření
  • YSlow: Analýza rychlosti nahrávání webových stránek
  • Firecookie: Správa & debugging cookies
  • FirePHP: PHP logování (server)
  • Rainbow: Barevná syntaxe pro JavaScript
  • NetExport: Export HTTP logů do *.har souboru
  • Ostatní: getfirebug.com/extensions

Chromebug

  • Jak debugovat Firebug?
  • Stejné funkce, avšak aplikované na Firefox rozšíření
  • Kontext: Firefox window
  • Run: firefox.exe -chromebug
  • Firebug musí být instalovaný

Architektura Firebugu

softwareishard.com/blog/category/firebug-tutorial

Hello World! Panel

FBL.ns(function() { with (FBL) {

function HelloWorldPanel() {}
HelloWorldPanel.prototype = extend(Firebug.Panel,
{
    name: "HelloWorld",
    title: "Hello World!",

    initialize: function() {
      Firebug.Panel.initialize.apply(this, arguments);
    },

    destroy: function(state) {
        Firebug.Panel.destroy.apply(this, arguments);
    }
});

Firebug.registerPanel(HelloWorldPanel);

}});
 

Budoucnost

  • Lepší podpora pro Firebug eko-system (testování, dokumentace, bundles)
  • Memory panel, GC události, closures
  • Break on CSS, Break On...
  • Validace Stránky
  • Debuggger: Krok zpět
  • Uložení změn, undo & redo, FireDiff extension
  • Události EventBug extension
  • Storage panel (local storage, session storage, globalStorage, lokální databáze)

Odkazy & Otázky