Vuurwants Het is een essentieel hulpmiddel voor degenen die websites programmeren of optimaliseren, of het nu ontwerpers of webmasters zijn. Dus we kunnen programmeer- of ontwerpfouten elimineren, weten hoe ze werken en hoe de structuur van een webpagina is, hoe alle elementen waaruit deze bestaat.
We installeren de Firebug-plug-in
Om de plug-in te installeren, gaan we naar de firebug-downloadwebsite en daar zoeken we naar de nieuwste versie van de tool om te downloaden.
Console-tabblad
Troosten Vuurwants Hier worden de berichten weergegeven over wat het web doet en de fouten die optreden. We kunnen berichten zien over de oproepen naar functies of pagina's die het web maakt terwijl we communiceren, ons functies tonen, oproepen tot callback of webservices en de waarden die tijdens runtime worden uitgewisseld terwijl de stroom van de applicatie wordt gecontroleerd.
Laten we enkele voorbeelden bekijken, we gaan naar het web motores.com.ar, we klikken met de rechtermuisknop en activeren Vuurwants.
We kunnen ook zien hoe het bij het toevoegen van een product aan de winkelwagen de volgende parameters verzendt: functie, producthoeveelheid en de product-ID.
Ajax-functie aangeroepen insertItem cant 1 Id 5850326Hoewel we kunnen zien dat het alleen wordt toegevoegd als we zijn ingelogd als gebruikers, anders zal het ons vragen om ons te registreren.
Zo kunnen we zien hoe de applicatie werkt en welke parameter het verzendt of ontvangt en welke reacties het geeft en wat de reactietijd was, bijvoorbeeld om een product toe te voegen dat 335 milliseconden duurde.
HTML-tabblad
stelt u in staat om de structuur van het web te zien en de webpaginacode in realtime te bewerken. We kunnen bijvoorbeeld de code wijzigen HTML van de website of de css-code en deze direct bekijken zonder dat die wijzigingen permanent zijn. Als we bijvoorbeeld toegang krijgen tot de Ebay-website, kunnen we Firebug gebruiken om de kleur van het hoofd- of webinhoudsblok te wijzigen.
achtergrond: rood geen herhaal scrollen 0 0;Als u klaar bent met schrijven, wordt het centrale blok rood. Als we de pagina bijwerken, gaan de wijzigingen verloren en keert het terug naar het oorspronkelijke ontwerp.
We kunnen ook proberen de html-code en de css-code te manipuleren om het Ebay-logo voor het Google-logo te wijzigen, dit wordt gedaan door de url van de afbeelding van het Ebay-logo te wijzigen in een andere url van een afbeelding die we willen.
Deze functionaliteit werkt niet om een compleet ontwerp te veranderen, maar om kleine tests uit te voeren en veranderingen te visualiseren, zonder dat je een editor nodig hebt.
Tabblad CSS
Het paneeltabblad CSS Het toont alle CSS-klassen en identifiers die we maken of die het web dat we analyseren heeft. Vanuit dit paneel kunnen we onze klassen en CSS-zinnen wijzigen zoals we eerder deden op het tabblad Stijlen van het HTML-paneel.
Tabblad Script
Dit paneel is voor het debuggen van code JavaScript of jQuery. Het laat ons alles zien wat een script doet, zijn variabelen, zijn functies, debuggen door breekpunten, de stapsgewijze uitvoering van een script, een scherm om de variabelenstapel te besturen en we kunnen ook het gedrag van de functies zien.
DOM-tabblad
het paneel ZON of DocumentobjectmodusHij is degene die informatie krijgt over alle verschillende DOM-eigenschappen en hun methoden. De DOM maakt deel uit van de elementen van een web en stelt programmeurs in staat om XHTML-webpagina's te openen en te manipuleren.
JQuery biedt methoden om de DOM efficiënt te manipuleren. We hebben toegang tot elk attribuut van elk element of om de HTML-code uit een alinea of blok te extraheren. Daarnaast biedt het methoden zoals: .attr (), .HTML (), Y .val () Ze fungeren als getters en ophalen van informatie uit DOM-elementen voor later gebruik.
Laten we in dit jQuery- en DOM-voorbeeld bekijken hoe u een div kunt besturen en een tekst kunt extraheren:
JQuery en DOMTekst uit blok extraheren:
Dit is een DOM-testtekst
de tags HTML Het element is toegankelijk via de css-klasse of id en vervolgens de eigenschap die tekst of iets anders kan zijn waarmee jQuery en DOM mogelijk zijn.
Tabblad Netwerk
Het doel van het netwerkpaneel is om het webverkeer en de belasting en het verbruik van elk HTTP-webverzoek te controleren, dit rapport bestaat uit een lijst met vermeldingen, waarbij elk van deze een retourverzoek / antwoord van de pagina vertegenwoordigt.
Het netwerkpaneelvenster geeft een lijst met verzoeken weer, terwijl het web wordt geladen en gebruikt. Elk item in de lijst toont informatie die door het verzoek wordt geproduceerd en een grafische tijdlijn toont de verbruikte bytes, de tijd die nodig is om te reageren, wat de laadfasen in de tijd weergeeft. Hieronder volgt een lijst van de informatie die voor elk verzoek wordt weergegeven:
- HTTP-verzoekmethode
- HTTP-antwoordcode en beschrijving (200.301.404, enz.)
- Bestandsnaam die wordt aangeroepen
- Domeinnaam van waar de reactie
- Reactiegrootte in bytes
- Tijd in milliseconden die nodig is om te reageren.
