Firebug Je to zásadní nástroj pro ty, kteří programují nebo optimalizují webové stránky, ať už jsou to designéři nebo webmasteři. Můžeme tedy odstranit chyby v programování nebo návrhu, vědět, jak fungují a jaká je struktura webové stránky, jak všechny prvky, které ji tvoří.
Nainstalujeme plugin Firebug
Chcete -li nainstalovat plugin, přejděte na web pro stahování firebugu a tam hledáme nejnovější verzi nástroje ke stažení.
Karta konzoly
Řídicí panel Firebug Zde se budou zobrazovat zprávy o tom, co web dělá, a o chybách, které se vyskytují. Můžeme vidět zprávy o voláních funkcí nebo stránek, které web dělá, když komunikujeme, ukazující nám funkce, vyvolání zpětného volání nebo webových služeb a hodnoty, které jsou vyměňovány za běhu při řízení toku aplikace.
Podívejme se na několik příkladů, přistupujeme na web motores.com.ar, klikneme pravým tlačítkem a aktivujeme Firebug.
Můžeme také vidět, jak při přidávání produktu do nákupního košíku odesílá následující parametry: funkce, množství produktu a ID produktu.
Funkce Ajax vyvolala insertItem převýšení 1 Id 5850326Přestože vidíme, že bude přidán pouze v případě, že jsme přihlášeni jako uživatelé, v opačném případě bude vyžadovat naši registraci.
Můžeme tedy vidět, jak aplikace funguje a jaký parametr odesílá nebo přijímá a jaké odpovědi poskytuje a jaká byla doba odezvy, například pro přidání produktu, který trval 335 milisekund.
Karta HTML
umožňuje zobrazit strukturu webu a upravit kód webové stránky v reálném čase. Můžeme například upravit kód HTML webu nebo kódu CSS a zobrazte jej přímo, aniž by tyto změny byly trvalé. Pokud například přistoupíme na web Ebay, můžeme pomocí Firebugu změnit barvu hlavního nebo webového obsahu bloku.
pozadí: červená žádné opakování svitek 0 0;Když dokončíte psaní, centrální blok zčervená, pokud stránku aktualizujeme, změny budou ztraceny a vrátí se do původního designu.
Můžeme také zkusit manipulovat s html kódem a css kódem a změnit logo Ebay pro Google, to se provádí změnou adresy URL obrázku loga Ebay na jinou URL obrázku, který chceme.
Tato funkce nefunguje ke změně kompletního designu, ale k provádění malých testů a vizualizaci změn bez nutnosti přístupu k editoru.
Karta CSS
Karta panelu CSS Ukazuje všechny třídy a identifikátory CSS, které vytváříme nebo které web, který analyzujeme, má. Z tohoto panelu můžeme upravovat své třídy a věty css jako dříve na kartě Styly na panelu HTML.
Karta skript
Tento panel slouží k ladění kódu JavaScript nebo jQuery. Ukazuje nám vše, co skript dělá, jeho proměnné, jeho funkce, ladění pomocí zarážek, postupné spouštění skriptu, obrazovku pro ovládání zásobníku proměnných a můžeme také vidět chování funkcí.
Karta DOM
Panel SLUNCE nebo Režim objektu dokumentuJe to on, kdo získává informace o všech různých vlastnostech DOM a jejich metodách. DOM je součástí prvků webu a umožňuje programátorům přístup a manipulaci s webovými stránkami XHTML.
JQuery poskytuje metody pro efektivní manipulaci s DOM. Můžeme přistupovat k libovolnému atributu jakéhokoli prvku nebo extrahovat kód HTML z odstavce nebo bloku. Kromě toho poskytuje metody, jako je .attr (), .HTML (), Y .val () Fungují jako getry a získávání informací z prvků DOM pro pozdější použití.
Podívejme se v tomto příkladu jQuery a DOM, jak ovládat div a extrahovat text:
Jquery a DOMExtrahovat text z bloku:
Toto je testovací text DOM
Štítky HTML K prvku se přistupuje prostřednictvím třídy nebo id css a poté vlastnosti, která může být textová nebo jiná, která umožňuje jQuery a DOM.
Karta Síť
Účelem panelu Síť je monitorovat webový provoz a zatížení a spotřebu každého webového požadavku HTTP. Tato sestava je tvořena seznamem záznamů, kde každý z nich představuje požadavek / odpověď zpáteční provedenou stránkou.
Okno síťového panelu představuje seznam požadavků při načítání a používání webu. Každá položka v seznamu zobrazuje informace, které jsou vytvářeny požadavkem, a grafická časová osa ukazuje spotřebované bajty, čas potřebný k odpovědi, což představuje fáze načítání v čase. Následuje seznam informací, které se zobrazují u každého požadavku:
- Metoda požadavku HTTP
- Kód a popis odpovědi HTTP (200 301 404 atd.)
- Název souboru, který je vyvolán
- Název domény, odkud odpověď
- Velikost odpovědi v bajtech
- Čas v milisekundách trvá, než odpovíte.
