10 redenen waarom u Firebug zou moeten gebruiken

Firebug is een van de meest populaire tools die wordt gebruikt door webontwikkelaars. In dit artikel bekijken we tien van de meest aantrekkelijke functies.

1. Console

Het eerste dat je gaat opvallen bij het openen van Firebug (vanuit de
statusbalk of met de toetscombinatie ctrl + F12) wordt het consolepaneel. Na een snelle blik zou je kunnen denken dat het een alternatieve versie van de Error Console is
(Ctrl + Shift + J). Gemeenschappelijke kenmerken tussen de twee zijn:

• logging van fouten, waarschuwingen en mededelingen
• mogelijkheid om Javascript-code uit te voeren

Maar Firebug breidt de Firefox-functionaliteit uit, dus het kan
veel meer, zoals:

• logging errors voor Javascript, CSS, XML, XMLHttpRequest (AJAX) en
  Chrome (Firefox-internals)
• voer Javascript-code uit op de huidige webpagina
• extra Javascript-object ter beschikking gesteld (console)

Laten we enkele voorbeelden bekijken die zijn gebouwd op het console-object. Stel je voor dat je de
het volgende HTML-bestand.

Dit genereert het volgende resultaat.

2. HTML

Het tweede paneel, waarvan je zeker weet dat je veel gaat uitgeven
van tijd, is verdeeld over verschillende secties die we hieronder zullen bespreken.

1. Deze knop is equivalent aan het "Inspect Element" op een webpagina
   contextmenu. Behalve behulpzaam te zijn bij het snel picken van elementen op de pagina,
   het schetst ook het momenteel geselecteerde element.
2. In deze sectie hebben we de hiërarchie van de huidige
   geselecteerd element en de mogelijkheid om een ​​reeks acties uit te voeren (op elke
   individuele component van de hiërarchie), zoals:
   • binnen HTML kopiëren
   • XPath-expressies maken
   • gebeurteniswaarnemer koppelen (en inloggen in het consolepaneel)
   • element verwijderen
   • bewerkingselement en onderliggende knooppunten
   • verplaats het element in het tabblad DOM voor inspectie
3. Het hoofdvenster van het paneel; handig voor het doorlopen van de
   HTML-document, snelle wijziging van code en het vinden van gebroken code (zoals
   een div te vroeg sluiten). Het contextmenu biedt dezelfde functionaliteit
   zoals sectie nr. 2
4. In dit gedeelte de berekende stijl van de huidige pagina of het huidige element
   weergegeven. Het vermogen om stijlen actief te wijzigen en CSS te inspecteren
   overerving zijn de meest waardevolle functies.
5. Via deze sectie kan men gemakkelijk het doosmodel van bekijken
   een element: inhoudsgrootte, opvulling, offsets, marges en randen.

6. De DOM-sectie na toegang genereert een lijst met alle, van de momenteel
   geselecteerde elementen, methoden en eigenschappen.

3. CSS

Het belangrijkste verschil tussen dit paneel en de stijlsectie onder HTML is
dat je hier kunt werken aan niet-gecomprimeerde stijlen. Ik zal de secties schetsen en nummeren
(en functies deze keer).

1. Als de pagina waarop we werken meerdere stylesheets bevat, kunnen we het gewenste stylesheet selecteren.
2. Het hoofdgebied waar de CSS-code wordt weergegeven.
3. Pas CSS-eigenschappen eenvoudig aan.
4. Eenvoudig ontoelaatbare CSS-regels.

4. Script

Soms moet je bij het schrijven van Javascript-code je handen krijgen
vuil. Meestal zul je merken dat je werkt met de
Console paneel; alleen in extreme omstandigheden zal dat je naar het Script doen springen
paneel. Gezien deze extreme omstandigheden (die onvermijdelijk zijn), laten we dit panel opnieuw bekijken en ons er mee vertrouwd maken.

1. Dropdown-knop waaruit we het gewenste scriptbestand kunnen selecteren.
2. Debugging-functies: doorgaan met, stap in, overstappen
   en uitstappen. Ze komen alleen aan bij het uitvoeren van code
   breekpunt.
3. Hoofd venster. Hier plaatsen en verwijderen we breekpunten, evenals inspecteren
   Javascript code.
4. Vergelijkbaar met het DOM-paneel, drukt het Watch-gedeelte objectmethoden af
   en parameters voor huidige foutopsporingscode.
5. Toont de stapeling van functies in realtime.
6. Lijst met momenteel actieve breekpunten. Alleen breekpuntverwijdering kan worden gedaan
   vanaf hier.

5. DOM

Hetzelfde als HTML-> DOM. Gezien het feit dat niets verschilt van wat eerder werd genoemd, gaan we door naar het volgende gedeelte.

6. Net

Benieuwd hoe lang het duurde voordat je pagina werd geladen? Of wel
Wil je weten welk verzoek de meeste tijd kost om te voltooien? Gelukkig kan dit ook worden bereikt via het netwerkpaneel.

1. Verzoeken kunnen worden gefilterd op basis van hun type.
2. Elke aanvraag wordt in deze sectie getoond. Aan het einde van de lijst met verzoeken
   we zien een samenvatting van hen: aantal verzoeken, grootte, hoeveel werd gecached
   al en de totale tijd die ze nodig hadden om te voltooien.
3. Meer details kunnen worden onthuld, zoals: HTTP-headers, respons en cache (zelfde
   als reactie)

Prestatietests

Moet u de prestaties van een specifieke functie of lus testen? Gebruik de "timer" -functie van Firebug.

 function TimeTracker () console.time ("MyTimer"); for (x = 5000; x> 0; x -)  console.timeEnd ("MyTimer"); 

Drie stappen. We beginnen met "console.time" en geven een unieke sleutel door. Vervolgens voegen we onze code in. Ten slotte noemen we console.timeEnd, en nogmaals, doorgeven in onze unieke sleutel.

7. Referentie

Dit is een extra paneel van CodeBurner, een Firebug
toevoeging. Zoals de naam al aangeeft, heb je via dit paneel snel toegang tot je HTML
en CSS-code. Zelfs als het panel voor zichzelf spreekt, kijken we nog steeds naar ons
het.

1. Het zoek- en filtergedeelte.
2. Hier komen de resultaten op stapel, in ons geval is er maar één resultaat.
3. Compatibiliteitspaneel voor de nieuwste belangrijke browserversies. Ja, Chrome is dat
   niet in deze lijst, maar Chrome gebruikt dezelfde engine als Safari, namelijk Webkit, dus als
   het is Safari-compatibel en het werkt ook in Chrome.
4. En als de informatie die in dit paneel wordt getoond niet genoeg is, kunt u meer informatie vinden door op deze link te klikken, bijvoorbeeld: voorbeelden, compatibiliteit in meer browsers
   versies, beschrijving, enz.

8. PixelPerfect

Als je ooit PSD-slicing hebt gedaan, weet je hoe tijdrovend de meting is
van tussenruimte tussen compositie-elementen kan zijn. Dat is waar PixelPerfect bewijst dat het is
macht. Als u deze add-on in uw toolbox hebt, kunt u de perfecte slice uitvoeren.

1. Met deze knop kunnen we meerdere overlay-afbeeldingen voor de huidige pagina toevoegen.
2. Lijst met overlays, vanaf hier passen we de overlay toe of verwijderen we deze.
3. Overlay-instellingen.

9. YSlow

Nog een add-on voor Firebug, ontwikkeld door Yahoo!, wat kan duiden op snelheidsverbeteringen
gebaseerd op een reeks uitgevoerde tests.

Via YSlow kunnen we de algehele prestaties van onze website beoordelen. We kunnen gemakkelijk
spotproblemen die kunnen worden verbeterd en een reeks aanbevelingen beschikbaar zijn
ook.

Afgezien van de cirkeldiagrammen, hebben we ook JSLint en Smush.it tot onze beschikking.

10. FirePHP

Onze laatste, maar niet de minste belangrijke Firebug-component is FirePHP. Hiermee
add-on, we kunnen op transparante wijze informatie verzenden (waarschuwingen, fouten, logboekregistratie, info)
naar het consolepaneel vanuit onze PHP-code. Voorbeeld gebruik van FirePHP's website:

Sluitend

Ik hoop dat deze kleine lijst met Firebug-panels / add-on je leven als een zal maken
web persoon gemakkelijker - zoals het mij deed. Uiteindelijk weten we dat allemaal
Er zullen zeker bugs gebeuren, dus er is geen excuus om niet voorbereid te zijn.

Volg deze links om de add-ons te downloaden:

• Firebug,
• CodeBurner,
• PixelPerfect,
• YSlow
• FirePHP