Firebug-tool voor webontwikkelaars

Het is een pakket hulpprogramma's waarmee u de laadsnelheid kunt analyseren en testen op basis van elk onderdeel, elk bestand, we kunnen ook de broncode, CSS, HTML en Javascript van een webpagina direct en in realtime bewerken, controleren en debuggen. op internet. Het dient ook om het gedrag van een variabele of url met parameters te analyseren, om te kunnen zien welke parameters worden verzonden en wat de server reageert.
Enkele van de functies die het met zich meebrengt Vuurwants:

• HTML-bewerking in realtime.
• CSS realtime bewerken.
• Javascript realtime bewerken.
• CSS-indeling.
• Javascript debugger.
• Geïntegreerde zoekmachine.
• Monitoring van netwerkactiviteit.
• DOM-verkenner.
• Foutafhandelaar in Javascript, CSS en XML

We beginnen met het downloaden en installeren van de plug-in Vuurwants:
[kleur = # 2f4f4f] Firebug downloaden [/ kleur]

Vanaf de Mozilla-add-onswebsite mogen we de add-on openen en installeren
Zodra Firebug is geïnstalleerd en Firefox opnieuw is opgestart, hebben we snel toegang tot Firebug door met de rechtermuisknop te klikken op het scherm van het web waaraan we willen werken of vanuit het menu Extra
We nemen het web van het voorbeeld van de verenigde naties http://www.un.org/en/, we maken een rechtse lik op het scherm en een scherm met Firebug zal openen.

VERGROTEN

In dit geval zien we op het netwerktabblad het gewicht in kb en in welke volgorde de browser de elementen heeft weergegeven en hoe lang het duurde voordat elk element werd weergegeven, het is interessant om op te merken dat van de 6,61 seconden die de pagina nodig heeft om renderen, komt twee seconden overeen met één enkele afbeelding, de taalbalk, dan kunnen we bedenken of deze kan worden geoptimaliseerd.
Op het tabblad HTML en CSS kunnen we naar een blok van de structuur verwijzen en het zal ons de code laten zien.

VERGROTEN

Hier verwijzen we bijvoorbeeld naar de bovenste banner-div die overeenkomt met id #topbanner in het style.css-bestand. Als we op de css-code klikken, kunnen we deze wijzigen en dit wordt tijdelijk op het web weergegeven. Het console-tabblad is het tabblad waarmee we javascript-aanroepen en fouten kunnen zien en controleren in geval van een storing. In geval van een fout toont het de bestanden en het nummer van de coderegel waar de fout optreedt.

VERGROTEN

Vuurwants helpt ons om DOM-objecten snel te vinden en ze vervolgens on-the-fly te bewerken. Maakt het mogelijk om DOM-inspectie uit te voeren.
De Document Object Model of DOM ('Documentobjectmodel' of 'Objectmodel voor documentweergave') het is in wezen een applicatie-programmeerinterface die een standaardset objecten biedt voor het weergeven van HTML- en XML-documenten.