Vuurwants. Hoe gebruik je het en waarom is het nodig? Firebug voor Firefox! Hoe de Firebug-extensie te gebruiken

Het corrigeren van fouten is een noodzakelijke voorwaarde voor elk werk, of het nu gaat om het schrijven van een artikel voor een krant of het maken van een website. In het computertijdperk is het werken aan fouten al lang geautomatiseerd. Om grammaticale fouten te corrigeren, is er bijvoorbeeld een spellingcontrole in de testeditor op kantoor, die de schrijvende broederschap helpt romans, verhalen, artikelen te schrijven, zelfs, zou je kunnen zeggen, zonder het hele alfabet te kennen. Er zijn vergelijkbare tools voor hypertekstschrijvers - webontwikkelaars. Een voorbeeld van de meest populaire tool op dit moment is de Firebug-extensie voor Firefox.

Eerste dingen eerst Firebug

Firebug is een van de meest favoriete applicaties voor webontwerpers en programmeurs geworden. De populariteit van deze extensie dwong de makers van concurrerende browsers op hun beurt om vergelijkbare functionaliteit in hun webbrowsers op te nemen. Maar aangezien Firebug, zoals ze zeggen, nu een 'trendsetter' is, zullen we er in dit artikel eerst kennis mee maken, en dan, tegen de achtergrond ervan, analogen in andere browsers overwegen.

Firebug is gemaakt door programmeur Joe Hewitt en is, zoals we al zeiden, ontworpen om webpaginafouten te inspecteren - HTML-opmaak, CSS-stijlen, JavaScript-scripts. Met deze extensie kunt u ook probleemgebieden evalueren bij het laden van een pagina in de browser.

Firebug (getfirebug.com) wordt geïnstalleerd als een extensie voor Firefox. Na de installatie verschijnt er een bugpictogram in de rechterbenedenhoek van de browser; als u erop klikt, wordt een speciaal venster onderaan de browser geopend. Afhankelijk van de bedrijfsmodus kan aan de rechterkant een tweede extra venster verschijnen. Firebug kan ook worden gestart als een zelfstandige applicatie, wat handig is voor mensen met twee monitoren.

Er zijn zes belangrijke foutopsporingsmodi: HTML, CSS, JavaScript, console, DOM en netwerk. Elke modus heeft zijn eigen tabblad in het hoofdmenu van de webdebugger. Firebug is trouwens gerussificeerd.

Laten we het werken in elke modus eens nader bekijken.

HTML debuggen. Het inspecteren van een HTML-pagina met Fireburg is een plezier. Klik op het pijlpictogram in het hoofdmenu, beweeg de cursor over een element van de webpagina en de gemarkeerde code voor dit element verschijnt onmiddellijk in het HTML-venster. En je hoeft niet langer pijnlijk lang te zoeken naar een problematisch element dat diep in de code verborgen zit. Ook zal aanvullende informatie over de stijl, locatie van het element en zijn DOM-eigenschappen verschijnen in het rechter hulpvenster.

De inhoud van het gemarkeerde element kan met een lichte beweging van de hand onmiddellijk worden bewerkt en de aangebrachte wijzigingen zijn onmiddellijk zichtbaar.

Codevouwen wordt ondersteund. Met Firebug kunt u ook actief de Tab- en Omhoog-omlaag-knoppen gebruiken. Tab wordt gebruikt om tijdens het bewerken door de attributen van een element te bladeren. En met behulp van de toetsen “omhoog” en “omlaag” kunt u de waarde van de attributen wijzigen. Dat wil zeggen dat Firebug de waarde van een numeriek attribuut met 1 zal verhogen of verlagen als u respectievelijk op “omhoog” of “omlaag” drukt.

Belangrijk is het speciale tabblad in het extra secundaire venster genaamd "Layout". Elk element van een webpagina is opgenomen in opeenvolgend geneste marge-, rand- en opvulcontainers. Het tabblad "Lay-out" weerspiegelt deze containers zelf in de vorm van symbolische veelkleurige rechthoeken. Je kunt hun waarden op dezelfde manier wijzigen als de waarden van andere html-elementen, en je ziet meteen hoe het uiterlijk van de pagina verandert.

CSS bewerken. U kunt CSS-stijlen repareren in het secundaire HTML-modusvenster of in een afzonderlijke native modus. Ook het bewerken van CSS is erg handig: hier kun en moet je de omhoog-omlaag-toetsen gebruiken. Hiermee kunt u niet alleen de waarden wijzigen CSS-kiezers, maar ook de selectors zelf, aangezien Firebug een compleet woordenboek met trefwoorden bevat trapsgewijze tafels stijlen.

Elke CSS-eigenschap kan snel worden uitgeschakeld en weer ingeschakeld door op de grijze knop te klikken die aan de linkerkant verschijnt wanneer u over de CSS-eigenschap beweegt.

Wanneer u uw cursor over een kleur- of afbeeldingseigenschap beweegt, verschijnt er een klein voorbeeldvenster voor die kleur of afbeelding. Bovendien worden bij een afbeelding de afmetingen weergegeven.

Netwerkmodus. In deze modus kunt u de laadtijd controleren van alle bestanden waaruit een webpagina bestaat. Dit omvat het downloaden van banners, afbeeldingen, js-scripts en stijlbestanden. Het is erg belangrijk dat u de download van elk afzonderlijk bestand kunt bekijken.

"Ognezhuk" toont de downloadgrafiek voor elk bestand. Op de hitlijsten verschillende kleuren HTTP-verzoektijd, gegevensontvangsttijd en gegevenswachttijd worden weergegeven.

Voor elke download kunt u de http-header bekijken door op het kruisje naast elk verzoek te klikken.

JavaScript-foutopsporing. Firebug is een krachtige debugger voor JavaScript-scripts. Voor dit debuggen is er een speciale aparte modus "Scripts". Hier kunt u met één klik op het coderegelnummer breekpunten instellen. Bovendien kunnen breekpunten voorwaardelijk zijn, dat wil zeggen dat ze bijvoorbeeld alleen worden geactiveerd wanneer er op een knop op de pagina wordt gedrukt.

Bij het debuggen tijdens breekpunten toont een extra venster een stapel functieaanroepen die wachten om terug te keren. En op het tabblad "Observaties" van het extra venster worden de waarden van DOM-objecten weergegeven.

Troosten. Heel cool ding. De Fireburg-console lijkt bijna op bash op Linux. Vertegenwoordigt opdrachtregel. Hier kunt u JavaScript-opdrachten afzonderlijk of als volledige scripts typen en uitvoeren.

Bovendien heeft de Firebug-console zijn eigen speciale opdrachten. Er is bijvoorbeeld een console.log-opdracht, die vergelijkbaar is met printf in C:

>>> console.log("Hallo wereld!") Hallo wereld!

De console heeft een zeer belangrijke functie: een profiler. Met deze tool kunt u de prestaties van een script meten. In de consolemodus hoeft u alleen maar op de overeenkomstige knop te klikken en, nadat u de pagina opnieuw hebt geladen, opnieuw op de knop "Profiel" te klikken. Als gevolg hiervan wordt een gedetailleerd rapport weergegeven over de bedrijfstijd van elke functie van uw js-script.

DOM-modus ( Documentobject Model). Het Document Object Model is waar de browser intern de geladen webpagina in verandert. De DOM is een programmeerinterface waarmee JavaScript-scripts wijzigingen kunnen aanbrengen in het zichtbare browservenster. Dit Firebug-modusvenster bevat een hiërarchie van webpagina-objecten en maakt het mogelijk deze in realtime in realtime te manipuleren, zonder toevlucht te nemen tot dezelfde console.

En een ander belangrijk kenmerk van Firebug zijn de extensies, die een apart artikel verdienen. Net als de Firefox-browser zelf kan Firebug zijn mogelijkheden uitbreiden met extra extensies, variërend van syntaxisaccentuering tot een ingebouwde HTML-referentie. Deze uitbreidingsmogelijkheid maakt Firebug momenteel de onbetwiste leider in vergelijking met andere browsers.

Alternatief

Natuurlijk zitten de concurrenten van Firefox ook niet stil, ze werken actief in deze richting en bieden functionaliteit die vergelijkbaar is met Firebug in hun browsers. Deze functionaliteit wordt voortdurend verbeterd, dus de onderstaande beschrijvingen kunnen al verouderd zijn, zelfs op het moment dat dit nummer van de krant verschijnt. Daarom zal ik het kort houden en afzien van holivarvergelijkingen.

MEVROUW Internet Explorer 8. Het analoog van Firebug in IE 8 herhaalt zich in zijn functionaliteit de meeste Firefox-extensiemodi. Beschikbaar HTML-modus met vouwen en CSS, waarmee u met één klik het element kunt selecteren dat u op de pagina wilt bewerken, en ook wijzigingen in realtime kunt volgen. Beschikbaar extra indeling- analoog aan het tabblad "Indeling". De Unix-tabbladtoetsen omhoog en omlaag worden echter niet gebruikt.

Voor JavaScript-foutopsporing Er zijn overeenkomstige modi "Scenario" en "Profiel". De console is ook bescheiden aanwezig in een extra tabblad. Console.log-opdrachten worden echter niet ondersteund. Mogelijk nog niet ondersteund. En behoorlijk vervelend is er geen "Netwerk" -modus waarmee u de laadsnelheid van een webpagina kunt evalueren. Ook voor DOM-inspectie bestaat er geen handig hulpmiddel.

De IE 8-ontwikkeltool beschikt echter wel over een browsermodus die schakelt tussen IE 7 en IE 8. Dit is een belangrijke functie voor veel webontwerpers.

Apple Safari. De Safari-browser beschikt ook over een tool die lijkt op Firebug en die een stijlvoller ontwerp heeft dan het lelijke IE 8. Er is een weergave voor HTML, CSS en "Element Layout". Maar navigatie en zoeken naar het gewenste element vinden uitsluitend plaats in de html-code. Het bewerken van de attributen van het gevonden element is ook erg primitief zonder de tab-toetsen omhoog en omlaag. Maar er is ook het bekijken en wijzigen van de eigenschappen van het DOM-element.

De modus "Netwerk" is aanwezig. JavaScript-foutopsporing en profilering zijn inbegrepen. En er is een geavanceerde console met automatische aanvulling, evenals de opdracht console.log.

Google Chrome. De ontwikkeltool in Chrome lijkt qua uiterlijk bijna op de analoog van Apple Safari. In de derde versie van Google Browser is deze functionaliteit sterk verminderd. Er is alleen codeweergave, netwerkmodus en console. Maar we kunnen wel zeggen dat de foutopsporingstools voor Google Chrome en Apple Safari zowel extern als intern volledig identiek zullen zijn, omdat ze dezelfde WebKit-engine gebruiken.

Opera Libelle. De "Dragonfly" van de Opera-browser herhaalt praktisch de interface van de "Fire Bug" met een hoofd- en extra venster. Het bekijken van html-code en stijlen gebeurt in één DOM-tabblad. Er is codevouwen. Tegelijkertijd bevat het extra venster ook functionaliteit die wordt geboden door de tab- en omhoog-omlaag-toetsen, zoals in Firebug. Het tabblad Container is uitsluitend voor informatieve doeleinden.

De console is aanwezig en bevat een opdrachtregel waarmee u kunt uitvoeren JavaScript-scripts interactief. Er is een debugger en logboekregistratie voor scriptuitvoering. De console.log-functie ontbreekt echter.

In de "Netwerk"-modus bevatten de downloadgrafieken voor afzonderlijke webpaginabestanden alleen de daadwerkelijke download- en wachttijden - wat in principe voor de meeste gevallen voldoende is.

De alternatieven zijn dus qua functionaliteit en gemak inferieur aan Firefbug, maar, zoals ze in dergelijke gevallen zeggen, zijn ze redelijk geschikt voor plattelandsgebieden. De eerste kennismaking met de foutopsporingstools die in browsers zijn ingebouwd, zou zeker moeten beginnen met Firebug voor Firefox.

Michail ASTAPCHIK

In dit artikel leert u alles over het gebruik van Firebug in Firefox. Firebug is een plug-in die nuttig zal zijn voor alle bloggers, optimizers, lay-outontwerpers en webmasters. Het vergroot de mogelijkheden Mozilla-browser voor de mensen die aan websites werken.

Wat Firebug kan doen

De Firebug-plug-in heeft de volgende kenmerken:

HTML-inspectie en -bewerking, JavaScript-code,DOM
Debuggen en loggen van JavaScript-code
JS rechtstreeks uitvoeren via de opdrachtregel
automatisch zoeken fouten in JavaScript, XML, CSS
CSS-stijlen inspecteren en bewerken
CSS-statistieken weergeven
netwerkverzoeken weergeven bij het laden van de site

Google Chrome-gebruikers merken dit wellicht op standaard kenmerken ingebouwd in Chrome (toegankelijk door op F12 te drukken), maar het kiezen van een browser is een gevoelige en persoonlijke kwestie, dus voor sommigen is het handiger om Firefox te gebruiken met de Firebug-plug-in.

Een succesvolle installatie wordt aangegeven door het verschijnen van een bugpictogram.

Firebug gebruiken in de lay-out

Om snel een gedeelte van de sitecode te bekijken ( CSS-eigenschappen-stijlen, enz.), klik klik met de rechtermuisknop per element en klik vervolgens op “Element analyseren” (“Inspecteren”, F12, Ctrl+F12 - om in een nieuw venster te openen). De plug-in laat u zowel de codesectie zien als welke CSS-stijlen deze vormen verschijning, terwijl de html-code zelf blauw wordt gemarkeerd.

Hierna kunnen we de HTML direct bewerken. Waar is dit voor? Om snel te zien hoe de gewijzigde code er op de site uitziet - om niet 10 keer op te slaan bronbestanden op de server, en dit kan alleen door het gewenste resultaat te bereiken met behulp van een plug-in. En dan wijzigingen aanbrengen.

Ook een onmiskenbaar voordeel Vergelijkbaar met "bewerken in de browser" is het feit dat de wijzigingen lokaal plaatsvinden - alleen jij ziet ze. Dit geldt vooral voor drukbezochte websites, waar we het ons niet kunnen veroorloven HTML+CSS-code te implementeren zonder deze op fouten te controleren (sitevervorming).

Er zijn twee opties om Firebug te gebruiken om het gewenste stukje code te vinden. De eerste is om de muis over de site te bewegen en vervolgens wordt de bijbehorende HTML-code gemarkeerd in het plug-invenster. De tweede is om de muis eroverheen te bewegen HTML-code in het plug-invenster en vervolgens worden de elementen op de site die overeenkomen met de code waarnaar met de muis wordt verwezen, gemarkeerd. Dit alles werkt direct en dynamisch, waardoor u snel de code van uw site of die van iemand anders kunt begrijpen en er doorheen kunt navigeren.

Vergeet niet op de knop te klikken om deze functie in te schakelen:

Dan, gevonden vereist onderdeel, klik er met de linkermuisknop op en ga naar het Firebug-venster om aan de code te werken.

Tegelijkertijd kunnen elementen worden samengevouwen en uitgebreid - voor een compact uiterlijk worden ze samengevouwen door tags: div, p, link, enz.

Hoe Firebug te gebruiken om CSS te bewerken

Heel eenvoudig. Als we in het linkervenster HTML-code hebben, dan hebben we in het rechtervenster CSS-stijlen, die direct kunnen worden bewerkt en veranderingen in het ontwerp van de site kunnen volgen.

Het gebruik van de firebug-plug-in om met CSS te werken omvat de volgende scenario's:

1. Schakel CSS-stijlen uit door te klikken op (klik op de cirkel om een eigenschap uit te schakelen)
2. Zoek naar het .css-bestand waaruit stijlen worden geladen specifiek onderdeel(evenals het zoeken naar een specifieke regel in dit bestand om het gemakkelijker te maken om wijzigingen aan te brengen en trapsgewijze stijlbladen te bewerken):

Hoe u de Firebug-plug-in gebruikt om de laadsnelheid van uw site te meten

De laadsnelheid van de website (aanwezigheid van fouten tijdens het laden) is niet alleen een belangrijke indicator bij het optimaliseren van een website zoekmachines, maar ook voor het gemak van gebruikers. Niemand wil wachten tot een trage website is geladen en er moet voor de gebruikers worden gezorgd.

En een prachtige plug-in zal ons hier ook bij helpen. Hoe kun je het bekijken? Ga naar het tabblad “Netwerk” in de plug-in en vernieuw de pagina waarop u zich bevindt. Hierna ontvangt u een lay-out: welke elementen worden geladen, hoeveel, in welke volgorde en welke reactie de server geeft bij het opvragen van elementen. Met deze informatie kunt u uw site optimaliseren en ervoor zorgen dat deze sneller wordt geladen.

Dat is alles, nu weet u hoe u de firebug-plug-in moet gebruiken en ermee kunt werken, door deze te gebruiken als visuele redacteur plaats. Waarvoor? De taken zijn verschillend: het zoek- of abonnementsformulier corrigeren, spelen met lettertypen en groottes van tekst en koppen, de HTML-code van een element vinden om het te verwijderen, en vele andere dagelijkse taken waarmee webmasters en bloggers worden geconfronteerd.

Hallo, lieve lezers! Vandaag we zullen praten over een zeer belangrijk hulpmiddel voor een lay-outontwerper: een gratis add-on. De slogan op de website van de ontwikkelaar luidt ‘De evolutie van webontwikkeling’. Geloof het niet! Firebug is een ware revolutie in webontwikkeling. Zodra je Firebug leert kennen, vraag je je af hoe je ooit zonder hebt gekund.

Voordat ik contact opnam webtechnologieën, mijn favoriete browser was Opera. Snel, gemakkelijk, handig. En alles beviel mij daarin, maar hoe verder ik erin stortte html leren en css, hoe vaker ik vermeldingen zag van de gratis Firebug-add-on voor FireFox. “Denk eens na, een soort toevoeging! Is het echt de moeite waard om hiervoor je browser te veranderen?!” - Toen dacht ik. De praktijk leert dat het de moeite waard is. Nadat ik Firebug een keer in actie had geprobeerd, kon ik niet meer zonder. Dit is echt een zeer belangrijke webmastertool. Zonder hem is het net als zonder handen. Dit zul je snel zelf zien.

Er zijn analogen van FireBug in andere browsers, maar deze kunnen niet worden vergeleken met het origineel. Misschien ben ik gewoon erg gewend aan de originele FireBug en lijkt al het andere mij vreemd en ongemakkelijk.

Hoe FireBug in FireFox te installeren

De FireFox-browser is goed omdat de functionaliteit ervan eenvoudig kan worden uitgebreid met behulp van gratis add-ons, waarvan er heel, heel veel zijn. Een dergelijke add-on is FireBug.

Het installeren van FireBug is heel eenvoudig en snel. Open de FireFox-browser en ga naar de pagina die aan deze add-on is gewijd.

Op het moment van schrijven wordt de FireBug-add-on al door meer dan 3 miljoen mensen gebruikt. Laten we ons bij hen aansluiten. Klik op de knop "Toevoegen aan FireFox".

Er verschijnt een waarschuwingsvenster waarin u wordt gevraagd FireBug in FirFox te installeren. Laten we profiteren van dit aanbod. Mogelijk moet u hierna uw browser opnieuw opstarten om de add-on te installeren en in te schakelen.

Hoe FireBug te gebruiken

U kunt het FireBug-paneel inschakelen door op de F12-knop te drukken. Standaard verschijnt dit onderaan het scherm. De positie van het paneel kan worden gewijzigd. Ga hiervoor naar opties (het keverpictogram in de linkerhoek van het paneel) en selecteer Vensterpositie.

Het hoofdtabblad is "HTML". Hier moeten we het grootste deel van de tijd werken. Het venster is verdeeld in twee delen:

Aan de linkerkant wordt gepresenteerd broncode pagina's;
Aan de rechterkant staan CSS-stijlen.

Als u met uw muis over een html-tag in de linkermarge beweegt, wordt deze op de pagina in kleur gemarkeerd. In dit geval:

blauwe kleur geeft de breedte van het element aan;
donkerblauw - velden (opvulling);
lichtgeel - marges.

Onderstaande afbeelding is klikbaar.

Wanneer u een tag selecteert door op de linkermuisknop te drukken, worden de CSS-stijlen ervan in het rechtervenster weergegeven. Helemaal bovenaan worden de stijlen van deze specifieke stijl aangegeven html-tag en hieronder staan de overgenomen stijlen. Als een attribuut is doorgestreept, betekent dit dat het niet werkt (overschreven). Bovendien is het aangegeven css-bestand en het regelnummer daarin waar deze of gene stijl is gedefinieerd.

Voor het zoekgemak is er een optie om de paginastructuur met de muiscursor te analyseren. Het wordt ingeschakeld met de knop aan de linkerkant bovenste hoek, naast het keverpictogram, ziet eruit als een rechthoek en een muiscursor. In feite doen we het tegenovergestelde: als we eerder een html-tag selecteerden en deze op de pagina zagen, selecteren we deze nu met de muiscursor rechtstreeks op de pagina en zien we de kenmerken ervan in het FireBug-venster. U zult deze optie constant moeten gebruiken, omdat het het zoeken naar een bepaald element aanzienlijk vereenvoudigt en versnelt.

En nu het belangrijkste kenmerk van FireBug, waarvoor het zo geliefd is: u kunt de paginastructuur en de stijlen ervan in een handomdraai wijzigen! Er zijn vrijwel geen beperkingen: u kunt een tag nemen en deze hernoemen, de inhoud van de kop of alinea wijzigen, een stijlkenmerk bewerken, uitschakelen of toevoegen, of u kunt eenvoudigweg de helft van de pagina verwijderen. Het resultaat verschijnt direct op het scherm! Onthoud gewoon: alle veranderingen vinden plaats in FireBug zelf, zodat nadat de pagina opnieuw is geladen, deze terugkeert naar de oorspronkelijke staat. Er kan dus geen schade worden aangericht.

VuurBug is een grote zandbak voor experimenten. Wanneer u de juiste optie heeft gevonden, zet u deze eenvoudig handmatig over naar html-bestanden en css.

Wat is nog meer interessant:

Op het tabblad “Console” kun je het zien JavaScript-fouten, HTML en CSS - nuttige informatie voor het debuggen.
Het tabblad “Netwerk” bevat informatie over het verzoek: status, grootte, extern IP-adres en uitvoeringstijd.
Op het tabblad “Paginasnelheid” kunt u de laadsnelheid van de pagina testen. De beoordeling wordt gegeven op een schaal van 100 punten. Bovendien worden ze gegeven nuttig advies, wat dit kenmerk zal verbeteren.

Voorbeeld van praktisch gebruik van FireBug

Laten we nu eens naar een praktisch voorbeeld kijken. Er staat een artikel op mijn blog gewijd aan de plug-in. Hierin staat hoe u het forum kunt bereiken aparte pagina. Voor het gemak is er een apart sjabloon voor gemaakt, waarin de zijbalk is verwijderd. Er wordt aangenomen dat het forum de gehele breedte van de pagina in beslag neemt.

Het probleem is dat in veel gevallen de breedte van het inhoudsblok vaststaat. Het verwijderen van een zijbalk leidt er niet toe dat het forum zich over de hele pagina verspreidt; lege ruimte. Om dit op te lossen, moet u de stijl vinden en bewerken van het element dat verantwoordelijk is voor het weergeven van de pagina-inhoud.

Af en toe komen mensen naar mij toe voor hulp. Dankzij FireBug is het vinden van het ongelukkige element en zijn stijlen eenvoudig.

De laatste keer heb ik het forum geïntegreerd in het Sento-thema. Laten we de procedure eens bekijken.

1. Volgens de instructies die in dat artikel worden beschreven, maken we een aparte sjabloonpaginaforum.php, waarin we de coderegel verwijderen die verantwoordelijk is voor het weergeven van de zijbalk aan de rechterkant. Nadat we een pagina met een forum hebben gemaakt, krijgen we het volgende resultaat.

Zoals je kunt zien is de zijbalk verdwenen, maar er is nog steeds lege ruimte. Het moet worden verwijderd.

2. Schakel onze tool in door op de F12-knop te drukken.

3. Het eerste dat u moet doen, is de breedte van uw sjabloon bepalen, uiteraard als deze geen rubber is. We zetten de pagina-analysefunctie aan en gebruiken de muis om te zoeken naar elementen waarvoor de breedteparameter is ingesteld in de rechterkolom, die verantwoordelijk is voor CSS-stijlen. Het zal waarschijnlijk niet moeilijk te vinden zijn; de breedte is ingesteld voor de sitekop, dus daar moet u uw zoekopdracht beginnen.

4. Ons volgende doel is het element dat verantwoordelijk is voor het weergeven van de inhoud van de pagina. Het belangrijkste zoekcriterium is de breedte die is opgegeven in de stijlen. Zij is het die verhindert dat het forum zich verspreidt. Vergeet de mogelijkheid niet om de paginastructuur met de muis te analyseren. Deze functie zal de zoektocht enorm vereenvoudigen. De afbeelding is klikbaar.

IN in dit geval Ik heb een div-tag gevonden met de klasse span-16. Houd er rekening mee dat stijlen niet zijn gespecificeerd in standaard bestand style.css die erin zit hoofdmap thema, maar in het screen.css-bestand in de css-map. Wees dus voorzichtig, zodat u niet hoeft te zoeken naar stijlen waar ze niet bestaan.

5. Het openen van het screen.css-bestand, het vinden van de klasse span-16 en het wijzigen van de breedteparameter is eenvoudig, maar het zal een fout zijn. Andere WP-pagina's gebruiken ook divs met een span-16-klasse, dus ze vallen na dergelijke wijzigingen eenvoudigweg uit elkaar. U moet de template pageforum.php openen en de klasse span-16 hernoemen. Geef het een nieuwe naam die nergens wordt gebruikt. Voor deze nieuwe klasse schrijft u de breedteparameter in het stijlenbestand. Op deze manier worden wijzigingen alleen op de forumpagina aangebracht.

Zo snel en gemakkelijk kunt u met FireBug vinden benodigde html tags en hun stijlen.

Ten slotte wil ik zeggen dat FireBug absoluut nutteloos wordt als je het niet op zijn minst weet html-basisprincipes en css. Het is niet moeilijk om ze te bestuderen, je hoeft het alleen maar te willen. Als je een blog of website beheert, zul je deze kennis vroeg of laat nodig hebben. Persoonlijk heb ik ze ontvangen vanwege het auteurschap van Vlad Merzhevich. Natuurlijk maakt deze handleiding u geen professionele lay-outontwerper, maar u zult zeker basiskennis opdoen.

Dat is alles voor vandaag. Bedankt voor uw aandacht en graag tot ziens.

Een goede gezondheid voor alle lezers van mijn blog! Ik wil al lang het onderwerp van het gebruik van extensies ten behoeve van webmasters bespreken, en nu presenteer ik eindelijk een beschrijving van de functionaliteit van een van de meest populaire, namelijk: Firebug-plug-in. Trouwens, als je nog niet de definitieve keuze hebt gemaakt voor een webbrowser, misschien wel het meest relevante populaire browsers() helpt je hierbij.

Ik moet toegeven dat ik als hulpmiddel voor een webmaster de voorkeur geef aan Google Chrome (), dat mij sneller en functioneler lijkt, en ik gebruik het ook bij het surfen op internet. Hoewel misschien de kracht van de gewoonte van niet geringe betekenis is bij het kiezen van een browser om met een site te werken.

Deze macht druist soms in duidelijke voordelen die ons voorzien alternatieve opties, maar in het geval van de Firebug-plug-in was alles anders;

Waar te downloaden en hoe de Firebug-extensie voor Firefox te installeren

En ondanks het feit dat tools die vergelijkbaar zijn met deze plug-in nu beschikbaar zijn in andere populaire browsers (bijvoorbeeld in of in), blijft Firebug voor mij een prioriteit, omdat het in sommige opzichten handiger en functioneler is. Wat is er goed aan deze plug-in?

Allereerst kunt u hiermee de benodigde elementen en code “on the fly” vinden en bewerken. Dit is vooral handig voor beginnende webmasters, omdat je hiermee blokken pagina's kunt bewerken, zelfs zonder de juiste kennis van hypertext-markup-talen (HTML) en cascading style sheets (CSS).

Laten we nu eens kijken naar het installeren van Firebug. U kunt de plug-in downloaden vanaf de officiële pagina, waar u de meeste kunt vinden nieuwste versie. Bovendien is het veel eenvoudiger om deze extensie rechtstreeks met Masila te installeren. Als u in dit geval uw cursor over de link naar de nieuwste versie beweegt (wat u zou moeten downloaden), verschijnt rechts ervan een groene knop “+Toevoegen aan Firefox”. Als u op deze knop klikt, wordt de installatie direct gestart. Hierna moet u uw browser opnieuw opstarten om de extensie te activeren.

Als u een andere webbrowser gebruikt, verschijnt aan de rechterkant een muiskleurige knop 'Nu downloaden', waarop u moet klikken. Hierna verschijnt er een bord met de links ‘Meer informatie over Firefox’ en ‘Toch downloaden’. Door de eerste link te volgen, krijgt u aanvullende informatie over de browser, als u op de tweede klikt, verschijnt deze standaard raam downloaden, waar u wordt gevraagd het bestand op uw computer op te slaan. Selecteer de locatie waar u het bestand wilt plaatsen en klik op “Opslaan”. Dan zal het beginnen standaard proces downloads.

Nadat het downloaden is voltooid, opent u Firefox en klikt u op "Bestand" - "Bestand openen" in de linkerbovenhoek. Zoek de locatie op de harde schijf van uw computer waar u het gedownloade bestand hebt gevonden en activeer het. De installatie begint, waarna u de browser opnieuw moet opstarten. Na het opnieuw opstarten ziet u in de rechterbovenhoek van de Firefox-browser een afbeelding van een kever, het Firebug-symbool. Dit betekent dat de plug-in is geïnstalleerd en klaar voor gebruik.

Dat is het hele download- en installatieproces. Zoals je kunt zien, is er niets ingewikkelds. Nu zal ik u vertellen hoe u de Firebug-plug-in gebruikt. Uiteraard zal de nadruk vooral liggen op die functies die een webmaster het meest nodig heeft en die ik zelf gebruik. Lees aandachtig verder en probeer het te begrijpen; Geloof me, dergelijke tools maken het leven van een webmaster veel gemakkelijker.

Hoe u de Firebug-plug-in gebruikt om HTML-code te bewerken

Ik zal meteen zeggen dat Firebug veel kan doen. De meest noodzakelijke optie, waar waarschijnlijk geen enkele webmaster zonder kan, is de mogelijkheid om te bewerken HTML-parameters en CSS rechtstreeks in het webbrowservenster, terwijl u observeert hoe het overeenkomstige element zal veranderen.

Breng de plug-in dus tot leven door op het keverpictogram te klikken. Er wordt onderaan een venster geopend waarvan de locatie naar wens kan worden gewijzigd. eenvoudig slepen en neerzetten(Om dit te doen, verplaatst u de muiscursor naar de bovenrand van het Firebug-venster totdat deze op een dubbele pijl lijkt en houdt u linker knop muis, sleep de rand omhoog en omlaag.)

Bovendien kunt u door op de meest linkse rode knop te klikken het venster minimaliseren; door op de middelste te klikken, kunt u de extensie openen apart raam, wanneer u op de meest rechtse klikt, schakelen we de Firebug-plug-in uit. Laten we nu eens kijken hoe het plug-invenster eruit ziet in de Firefox-browser:

Aan de linkerkant bevindt zich HTML-structuur, aan de rechterkant staan CSS Cascading Style Sheets-elementen. Nu kleine excursie in de basisprincipes van hypertext-opmaaktaal. Feit is dat ervaren professionals in hun vakgebied ( blok indeling), met behulp van containers (met behulp van een div-tag), waarbij de gewenste inhoud van een bepaald gebied van de webpagina wordt gespecificeerd. Maar het uiterlijk van een lay-outelement is ontworpen om te worden bepaald door stylesheets.

Bovendien wordt het principe van nesten gebruikt, dat wil zeggen dat grotere containers meerdere elementen kunnen bevatten. Zoals u kunt zien aan het voorbeeld in de schermafbeelding, moet u, om dit of dat element uit te vouwen, achtereenvolgens op het plusteken links naast dit of dat HTML-fragment klikken en u ontvangt achtereenvolgens in elkaar geneste blokken.

Als u de muiscursor naar een of ander element van de HTML-structuur beweegt, worden tegelijkertijd die delen van de pagina die overeenkomen met dit stukje code gekleurd met een moiré-tint en kunt u zien welke elementen in de code zijn opgenomen. deze container. In de bovenstaande schermafbeelding is een dergelijk gebied bijvoorbeeld een van de elementen bovenste menu. Als u bovendien op een specifieke HTML-regel klikt, worden de CSS-regels die overeenkomen met dat element rechtsonder weergegeven.

U kunt dus rechtstreeks in het Firebug-venster experimenteren verschillende gebieden pagina's in de browser en bewerk ze naar wens totdat u het gewenste resultaat bereikt. En een groot pluspunt deze methode is dat u dit kunt doen met minimale kennis van hypertext-opmaak en trapsgewijze stijlbladen.

Bovendien is het mogelijk om soortgelijke experimenten uit te voeren met elke webpagina van welke bron dan ook, zonder dat u zich zorgen hoeft te maken dat u iets verprutst, aangezien al deze wijzigingen niet worden opgeslagen en wanneer de pagina opnieuw wordt geladen, alles wordt overgenomen oude uitstraling. Als je bijvoorbeeld een bron op internet leuk vond, kun je met een van de pagina's experimenteren om erachter te komen welke opmaakopties en welke stijlwaarden daar worden gebruikt.

Zo weet je welke lijn HTML-document of welke CSS-eigenschap moet worden gewijzigd om het gewenste resultaat te krijgen. Bovendien voor het gemak bovenste regel toont opeenvolgend geneste containers waarin dit element is opgenomen:

Nogmaals, als u de muiscursor over deze containers beweegt, worden de elementen waaruit ze bestaan ook gekleurd. Zoals u kunt zien, besparen de mogelijkheden van Firebug veel tijd bij het in perfecte staat brengen van uw project, en zelfs een beginnende webmaster kan dit doen.

Maar dat is niet alles. De extensie heeft een functie waarmee u de tegenovergestelde acties kunt uitvoeren als hierboven beschreven. Dat wil zeggen, als u de muiscursor over de pagina beweegt, worden deze zelf blauw. HTML-elementen in het Firebug-plug-invenster:

Om deze functie te implementeren, moet u op de schuine pijl klikken. Beweeg nu uw muis over de pagina en linksonder ziet u hoe de overeenkomstige HTML-secties die verantwoordelijk zijn voor het maken van pagina-elementen in een frame zijn ingesloten.

Nu kunt u naar linkerkant Firebug-extensievenster om directe bewerking uit te voeren. Ik laat het je zien specifiek voorbeeld. Om dit of dat element te wijzigen, bijvoorbeeld de positie van de bovenste navigatiebalk van mijn blog, zal ik de ID van een van de tags wijzigen div. Om dit te doen, verplaats ik de cursor naar de geselecteerde container: