Maak het ultieme webontwikkelingsprofiel van Firefox

Wanneer het correct is geconfigureerd, kan Firefox de ultieme webontwikkelingstool worden, waardoor u direct toegang hebt tot de pagina waar u aan werkt, zodat u uw pagina in real-time kunt stylen, javascript kunt debuggen of zelfs de HTML kunt bewerken.

Maak een afzonderlijk profiel voor webontwikkeling

Door al deze ontwikkeltools te installeren, wordt Firefox een erg zware browser, dus we moeten eerst een nieuw profiel voor Firefox maken.

U kunt een afzonderlijk profiel tegelijkertijd met uw normale profiel starten door een nieuwe snelkoppeling te maken met deze argumenten, waarbij WebDev wordt vervangen door de naam van uw profiel. Er is ook een meer gedetailleerde uitleg over hoe dit te doen.

firefox.exe -P WebDev -no-remote

Nu dat Firefox is geconfigureerd met een afzonderlijk profiel voor webontwikkeling, laten we de uitbreidingen bekijken die we kunnen gebruiken om van Firefox de ultieme webontwikkelingstool te maken..

Web Dev-extensies die moeten worden aangepast

Dit zijn allemaal extensies die ik regelmatig gebruik voor webontwikkeling.

Firebug

Firebug is de krachtigste uitbreiding voor het debuggen van JavaScript, het bekijken van CSS en html. U kunt dynamische wijzigingen aanbrengen in de code en CSS en deze gebruiken om uw Ajax-code te debuggen. Het is echt de beste extensie die er is.

Web Developer-extensie

Een van de beste uitbreidingen voor x jaar op rij. Dit is een must voor elke ontwikkelaar, maar je hebt er al van gehoord.

Aardvark Extension

Deze extensie is een zeer lichtgewicht extensie die u gemakkelijk de elementen op de pagina en hun toegewezen klasse / ID laat zien. Het is eenvoudiger te gebruiken dan de extensie voor webontwikkelaars voor die keren dat u alleen de snelle informatie voor een element nodig heeft. U kunt het ook gebruiken om elementen van de pagina te verwijderen.

ColorZilla

Selecteer kleuren gemakkelijk. Geen pijn meer om kleuren te vinden die ergens in een stylesheet zijn ingebed.

Bron bekijken met

U kunt meerdere weergavebronprofielen instellen om de bron in verschillende toepassingen te openen.

HTML Validator

Met deze extensie kunt u eenvoudig uw pagina-HTML valideren en installeren in het paneel View Source.

Greasemonkey

Het is niet echt een extensie voor een webdeveloper, maar Greasemonkey is geweldig, niet het minst voor het vermogen om veelgebruikte acties te automatiseren, wat een geweldige tijdsbesparing is voor webontwikkelaars..

Meet het

Meet eenvoudig een afstand op het scherm met deze extensie. Nadat u een gebied hebt gemeten, kunt u de rechthoek rond het scherm slepen om als een vergelijking te gebruiken.

IE-weergave / IE Tab / operaview / FirefoxView / Safari-weergave / IE Lite bekijken

Met deze extensies (maak je keuze) kun je eenvoudig de huidige pagina in verschillende browsers bekijken. IE Tab laat je IE zelfs binnen een tab weergeven, als je dat zou willen.

Cacheknop wissen

Wist de cache. Vooral handig voor het controleren van nieuwe CSS-wijzigingen.

Start Firefox opnieuw

De herstart-extensie van Firefox is erg handig voor het afsluiten en herstarten van Firefox met alle tabbladen en sessies intact.

Tab Mix Plus

De Tab Mix Plus-extensie is in het algemeen een prima extensie, maar heeft enkele in wezen nuttige functies voor webontwikkelaars: dubbele tab en kopieertabblad-URL.

YSlow

De YSlow-extensie is een nieuwe extensie van Yahoo die uw pagina zal analyseren en u zal vertellen waar u fouten maakt. U krijgt zelfs een cijfer voor de prestaties van uw site. Je ziet de kleine meter in de rechter benedenhoek ... het vertelt je de totale grootte van je pagina en de laadtijd. Zeer nuttige extensie, maar hiervoor is wel de Firebug-extensie vereist.

Dummy Lorem Ipsum

De Dummy Lipsum generator-extensie zal dummy-inhoud voor u genereren op basis van de beroemde Lorem Ipsum-tekst die erg handig is voor het opmaken van nep-inhoud op uw site.

Screengrab!

Met de Screengrab-extensie kunt u schermafbeeldingen van pagina's maken, maar iets doen dat een normale screenshot-tool niet kan - het kan een afbeelding van de hele pagina maken, niet alleen het zichtbare gedeelte.

 

Er zijn talloze andere extensies die je kunt gebruiken, maar deze zijn de beste van het beste van alles wat ik heb gezien. Als u een andere extensie heeft die u regelmatig gebruikt, laat dan een vermelding achter in de opmerkingen.

Op dit punt hebt u Firefox nu de ultieme webontwikkelingstool. Neem de tijd om te leren hoe je met name Firebug gebruikt.