De Web Developer Toolbar voor Firefox

De Web Developer Toolbar voor Firefox wordt vaak genoemd als een van de must-tools hebben voor webontwikkelaars. Na de werkbalk gebruikt in mijn ontwerp omgeving, geheel ik van harte mee eens. Het snijdt terug ontwikkeling tijd door uur. Het maakt wat kan worden vervelende taken, bijna leuk. Het laat me snel een blik werpen op een website in een ander formaat venster. Het helpt me debuggen en valideren JavaScript en CSS-code.

Chris Pederick ontwikkelde deze toolbar voor Firefox. Hier is wat de werkbalk ziet er als volgt uit:

Opmerking: Het is een bar aan de bovenkant van uw browservenster. Het wordt weergegeven als twee afbeeldingen hierboven, zodat u de hele bar kan zien.

Zoals u kunt zien, komt het met vele opties. Hoewel ik niet over alle opties die de werkbalk bevat gebruikt, laat me lijst een paar van mijn favorieten.

Real-time CSS debuggen. Tijdens het bekijken van mijn webpagina, kan ik het CSS-bestand dat verschijnt aan de linkerkant (of onderkant) van de webpagina (van werkbalk, kies CSS / Edit CSS) en zie onmiddellijke resultaten in het browservenster. Dit is geweldig voor het oplossen van problemen en voor het krijgen van beneden naar de bijzonderheid van hoe die extra 10 pixels opvulling van invloed op mijn web pagina. Hoewel ik niet onmiddellijk kan mijn CSS-updates te redden, kan ik eenvoudig kopiëren van de wijzigingen die ik ken al het werk en plak ze in de CSS stylesheet te openen in mijn web-editor.

Validators. De rechterbovenhoek van de werkbalk toont rood / groene knoppen om de geldigheid van de CSS-code en JavaScript-code te vermelden. Als de knop is rood, ik gewoon de muis over de knop en meteen vertelt mij de fout is vastgesteld. Ik kan op de Error Console voor meer informatie, ga terug naar de code (CSS of Javascript), maken het veranderen, vernieuwen het browservenster en bekijk de knop (pen), hopelijk, groen. Het gemak van debugging code is verbazingwekkend - en is meestal snel opgelost.

Resize Window. Aangezien ik de webpagina's wil er goed uitzien in verschillende schermresoluties, wil ik nagaan hoe de pagina eruit zal zien in verschillende grootte ramen. Met de Developer Toolbar, dit is een klik op de knop. Ik selecteert u een ander venster grootte van de Resize-optie en onmiddellijk de website te bekijken in een ander venster grootte.

Small Screen Rendering. Ik kan ook zien wat mijn webpagina lijkt op een mobiel apparaat met een klik op een knop. De Small Screen Rendering optie is beschikbaar onder de Diversen-menu.

Integreert met Joomla. Favoriet Dit is eigenlijk hetzelfde als de eerste de hierboven genoemde, maar binnen een specifieke omgeving. De Web Developer Toolbar is van onschatbare waarde binnen het Joomla omgeving. Zonder de werkbalk, ben ik voortdurend in te gaan op Joomla, navigeren naar Extensions / Template Manager, het kiezen van de juiste template, het maken van wat ik denk dat zijn de nodige veranderingen, sparen, dan terug te gaan naar een browservenster en het controleren van de resultaten. Oef! Met de Developer Toolbar, ik gewoon Selecteer 'Edit CSS' uit de CSS-menu, de nodige veranderingen, en de resultaten bekijken. Ik kan blijven de CSS tweaken totdat het klopt. Geen heen en weer tussen vensters en applicaties. Zodra de CSS correct is, ik gewoon aandacht vestigen op de veranderingen, kopieer de code en plak deze in de CSS template binnen Joomla. Het is sneller. Het is makkelijker. Het is heel eenvoudig.

Dit is slechts het topje van de ijsberg in wat deze werkbalk kan doen voor webontwikkelaars. Het is gemakkelijk te installeren en eenvoudig te gebruiken. I highly recommended waardoor het een deel van uw ontwikkelomgeving. Het is beschikbaar op op https: / / addons.mozilla.org/en-US/firefox/addon/60.