Web Developer Toolbar for Firefox

Web Developer Toolbar for Firefox er ofte nevnt som en av de må-ha verktøy for webutviklere. Etter å ha brukt verktøylinjen i mitt design miljø, hele jeg hjerte enig. Den kutter tilbake utviklingstid av timer. Det gjør hva som kan være kjedelige oppgaver, nesten morsomt. Det lar meg raskt blikk på en nettside i en annen størrelse vindu. Det hjelper meg å feilsøke og validere JavaScript og CSS-kode.

Chris Pederick utviklet denne verktøylinjen for Firefox. Her er hva verktøylinjen ser slik ut:

Merk: Det er en linje øverst i nettleservinduet. Det vises som to bildene ovenfor slik at du kan se hele linjen.

Som du kan se, den kommer med mange muligheter. Selv om jeg ikke har brukt alle alternativene at verktøylinjen gir, la meg liste noen av mine favoritter.

Sanntid CSS feilsøking. Mens websiden min, kan jeg oppdatere CSS-fil som viser opp til venstre (eller bunnen) av nettsiden (fra verktøylinjen, velger CSS / Edit CSS) og se umiddelbare resultater i nettleservinduet. Dette er bra for feilsøking og for å komme ned til Nitty-gritty av hvordan disse ekstra 10 piksler av padding påvirker min nettside. Selv om jeg ikke umiddelbart kan lagre CSS oppdateringer, jeg kan enkelt kopiere de endringene som jeg vet allerede arbeid og lime dem inn i CSS-stilark åpnes i min nettredaktør.

Validatorer. Øverst til høyre på verktøylinjen viser rød / grønn knappene for å vise gyldigheten av CSS-koden og JavaScript-kode. Hvis knappen er rød, jeg bare musen over knappen og den umiddelbart forteller meg feilen det er å finne. Jeg kan klikke på Feilkonsollen å finne ut mer informasjon, gå tilbake til koden (CSS eller Javascript), foreta endringen, oppdatere nettleseren og se på knappen (e), forhåpentligvis, bli grønn. Den enkle debugging code er fantastisk - og er som regel raskt avklart.

Window Resize. Siden jeg vil at nettsidene å se bra ut i ulike skjermoppløsninger, jeg ønsker å kontrollere hvordan sidene skal se ut i forskjellige størrelse vinduer. Med Developer Toolbar, er dette et museklikk. Jeg bare å velge et annet vindu størrelse fra Resize alternativet og umiddelbart se området i en annen vindusstørrelse.

Small Screen Rendering. Jeg kan også se hvordan websiden min ser ut som på en mobil enhet med ett klikk på en knapp. The Small Screen Rendering alternativet er tilgjengelig under Diverse-menyen.

Integreres med Joomla. Dette favoritt er faktisk den samme som den første som er nevnt ovenfor, men innenfor et bestemt miljø. Web Developer Toolbar er uvurderlig i Joomla miljøet. Uten verktøylinjen, jeg stadig går inn i Joomla, navigere til utvidelser / Template Manager, velge riktig mal, og gjør hva jeg mener er de nødvendige endringene, lagre den og deretter gå tilbake til et nettleservindu og sjekke resultatene. Puh! Med Developer Toolbar, jeg bare velge "rediger CSS" fra CSS-menyen, foreta de nødvendige endringene, og vise resultatene. Jeg kan fortsette å tilpasse CSS till it's right. Ingen går frem og tilbake mellom vinduer og programmer. Når CSS er riktig, jeg bare merker endringene, kopier koden og lim den inn i CSS-malen inne Joomla. Det er raskere. Det er enklere. It's very straightforward.

Dette er bare toppen av isfjellet i hva denne verktøylinjen kan gjøre for webutviklere. Det er lett å installere og enkel å bruke. Jeg anbefales sterkt å gjøre det til en del av utviklingsmiljø. Den er tilgjengelig på på https: / / addons.mozilla.org/en-US/firefox/addon/60.