Een kijkje in essentiële Firefox-tools voor webontwikkelaars

Firefox is lang de voorkeursbrowser geweest voor webontwikkeling. Er zijn een aantal nuttige add-ons om het werk te doen. In dit bericht gaan we een paar add-ons bekijken die volgens mij essentieel zijn om te worden geïnstalleerd als u webontwikkeling gaat doen. Ook gaan we enkele van de functies in deze add-ons ontdekken die kunnen helpen.

Allereerst moeten we de Firebug installeren.

Firebug

Firebug is een add-on die u moet installeren voor webontwikkeling. Ervan uitgaande dat u niet weet waar u Firebug kunt krijgen, kunt u het hier installeren. Waarschijnlijk moet u uw Firefox opnieuw opstarten voordat deze is geactiveerd.

Hierna kunt u de Firebug op een van de volgende manieren bekijken: volg dit menu Hulpmiddelen> Webontwikkelaars> Firebug, klik met de rechtermuisknop op de webpagina en kies “Inspecteer Element met Firebug”.

Als alternatief kunt u een Firebug-pictogram vinden in Firefox en erop klikken, dit toont het firebug-venster;

Firebug is redelijk identiek aan Chrome-ontwikkelaars Tools. het heeft een paneel om de HTML-structuur en de stijlen te zien, en ook een consolepaneel om de fouten, waarschuwingen en logs te zien. Maar ik heb nog enkele tips die hopelijk nuttig kunnen zijn.

De grootte van dozen aanpassen

HTML-element bestaat uit een CSS-doostermodel dat bestaat uit marge, opvulling en objectdimensie (breedte / hoogte). Soms moeten we deze eigenschappen wijzigen. In dat geval kunt u een van de elementen selecteren die u wilt wijzigen en vervolgens naar de lay-out paneel.

In dit paneel vindt u een illustratie van een CSS-boxmodel samen met de informatie, inclusief de breedte en hoogte. Hoewel deze twee eigenschappen niet zijn opgegeven in CSS, deze tool is slim genoeg om de waarde te bepalen. Als u ze moet wijzigen, kunt u eenvoudig op de waarde klikken en de pijl omhoog of omlaag gebruiken om de waarde te verhogen of verlagen.

Berekende stijlen

In veel situaties vraag je je waarschijnlijk af waarom bepaalde stijlen niet worden toegepast. Een van de gemakkelijkere en snellere manieren, met name wanneer je duizenden lijnen hebt, is door het te inspecteren vanuit de Berekende stijl paneel. Dit voorbeeld laat zien dat de tekstkleur van de ankertags wordt overschreven door .knop klasse, terwijl de achtergrond van de .knop klasse wordt overschreven door .button.add.

Inspectie van lettertypefamilie (op de gemakkelijke manier)

Je vindt waarschijnlijk vaak zoiets als dit in font-family eigendom in CSS met verschillende lettertypefamilies. Helaas zal dit ons niet specifiek vertellen welk lettertype de browser inneemt. Om de identificatie eenvoudiger te maken, kunnen we deze Firebug-extensie namelijk installeren FireFontFamily.

Nadat de installatie is voltooid, laadt u uw webpagina en nu kunnen we duidelijk zien welke lettertypefamilie wordt toegepast. In ons geval is het in feite Helvetica Neue (zie shot).

Prestaties analyseren

Dit kan platitude zijn, maar Site Speed ​​is nu een van de Google-parameters (algoritme) bij het bepalen van de kwaliteit van websites; de website die sneller laadt wordt beschouwd als goed ontwikkeld en hoger gerangschikt qua inhoud. Snelheid is dus niet iets dat over het hoofd moet worden gezien.

Net Panel

De eerste plaats die u wellicht moet bezoeken om de prestaties van uw website te inspecteren, is de Netto paneel. Dit paneel registreert de HTTP-aanvraag van uw website wanneer deze is geladen. Dit screenshot toont een webpagina die wordt geladen 42 verzoek en neemt het rond 4,36 seconden Laden.

U kunt vervolgens het HTTP-verzoek op hun type sorteren, zoals HTML, CSS en afbeeldingen.

YSlow!

Verder kun je ook installeren YSlow, een extensie voor Firebug van Yahoo !. Nadat het is geactiveerd, vindt u een extra paneel met de expressieve naam Yslow!.

Gelijkwaardig aan Netto paneel, Yslow! registreert de prestaties van de webpagina wanneer deze wordt geladen, maar geeft ook aan waarom de webpagina traag is en wat we kunnen doen om het op te lossen. In dit voorbeeld voeren we een test uit op een webpagina en deze wordt gescoord 86 voor algemene prestaties, wat als OK wordt beschouwd.

Paginasnelheid

Als alternatief kunt u ook Paginasnelheid van Google installeren. Gelijkwaardig aan YSlow!, het test de snelheid van de website, zij het dat het testresultaat enigszins afwijkt. Dit voorbeeld laat dezelfde webpagina zien scoorde 82 volgens Page Speed.

Web Developer Tools

Webontwikkelaars Tools is natuurlijk bedoeld voor webontwikkelaars en heeft een heleboel functies die zijn ingepakt in deze werkbalk. Maar deze hieronder is een van mijn favorieten.

Beeldinspectie

Er zijn tijden dat we mogelijk beeldinformatie van de webpagina moeten halen. Ik zie vaak dat mensen dit doen door in de browser te strompelen of door met de rechtermuisknop op de afbeelding te klikken en te selecteren Bekijk beeldinformatie, zoals zo:

Maar deze manier is niet helemaal efficiënt wanneer we de informatie uit veel afbeeldingen moeten halen. In dat geval kunnen we de Afbeeldingen functie van de add-on. Deze functie is gemakkelijk toegankelijk via het Image-menu vanuit de werkbalk.

En dit voorbeeld laat zien hoe we de afbeeldingsdimensie en afbeeldingsbestandsgrootte tegelijkertijd tonen:

Ingebouwde tools van Firefox

In recente versies heeft Firefox zijn ingebouwde functies voor webontwikkelaars enorm verbeterd, sommige daarvan zijn:

Native Inspect Element

Deze native Inspecteer Element van Firefox kan er ongeveer hetzelfde uitzien “Inspecteer Element in Firebug”, maar het werkt eigenlijk op verschillende manieren.

Deze keer ga ik deze functie niet verder bekijken, omdat deze in essentie identiek is aan Firebug HTML- en CSS-paneel, zij het met een verschil in lay-out en ontwerp. Maar er is een onderscheidend kenmerk dat het proberen waard is, de 3D-weergave.

Gebruik makend van 3D-weergave u kunt de structuur van de webpagina diepgaand bekijken. Om deze weergave te activeren, vindt u de knop rechtsonder in de “Firefox Native Inspect Element”. Dit is hoe het 3D-weergave lijkt op.

Ik gebruik het niet zo vaak als andere functies, maar het is een vrij innovatieve functie van Mozilla die ik toegeef, en zeker heel handig in bepaalde situaties..

Web Design View

Sinds de stijgende populariteit van Responsive Web Design heeft Firefox een Responsive Bookmarklet voor de browser geïnitieerd. Met deze tool kunnen we onze responsieve website testen in verschillende viewports zonder het formaat van het browservenster te wijzigen.

Deze weergave is beschikbaar vanuit dit menu: Hulpmiddelen> Webontwikkelaar> Webontwerpweergave. En zo ziet het uitzicht eruit.

Stijl-editor

Tenslotte, als u regelmatig met CSS werkt, zult u waarschijnlijk verliefd worden op deze functie. Sinds de versie van 11 had Firefox toegevoegd Stijl-editor in zijn eigen ontwikkelaarstools.

Deze functie is net zo cool als de Web Design View, het staat je toe om de CSS te bewerken, de impact direct op de browser te zien en de wijzigingen op te slaan die het CSS-bronbestand direct beïnvloeden.

De Style Editor is beschikbaar in het volgende menu: Hulpmiddelen> Webontwikkelaar> Stijleditor.

Laatste gedachte

Er zit een heleboel functies in deze Firefox-add-ons en die die hier worden besproken, zijn slechts enkele van de functies die ik vrij vaak gebruik tijdens de ontwikkeling van het web. Niettemin heeft u wellicht nog enkele andere tips die nuttig kunnen zijn om de productiviteit van webontwikkeling in Firefox te verhogen.

Welke functies gebruikt u vaak? U kunt uw gedachten delen in het opmerkingenveld hieronder.