Jedan od prvih dodataka za pomoć pri izradi CSS-a i web stranica je Web Developer dodatak za preglednik Mozilla Firefox.
Autor je Chris Pederick, a alat je dostupan s adrese dodataka za Firefox. Instalira se jednostavnim klikom na link i uglavljuje se u preglednik kao alatna traka.
 Padajući izbornik s funkcijama za pregled i uređivanje CSS-a.
Traka Web Developer nudi čitav niz funkcija, uključujući pregled stila, prikaz elemenata na stranici i još mnogo toga. Jedan od zanimljivijih detalja je online uređivanje stila. Uz prikaz stranice, korisnik dobiva i prozor sa zapisom u kojem može mijenjati stil i u stvarnom vremenu pratiti promjenu na stranici.
Označavanje elemenata pomoću alata Web Developer Toolbar pomaže otkriti hijerarhiju elemenata u HTML dokumentu, vrlo važnu za razumijevanje primjene stilova.
 Padajući izbornik s funkcijama za označavanje pojedinih elemenata stranice.
-
Ako ovu stranicu gledate u web pregledniku Firefox, istražite kako su u ovom tečaju prikazane slike vezane uz sadržaj i tekstovi ispod njih, a kako slike u okvirićima poput ovog.
- Uputa: iz izbornika CSS izaberite View Style Information, kliknite na sliku te pri vrhu ekrana pogledajte u kojem se elementu i kojoj klasi nalazi. Na desnom dijelu ekrana pojavljuju se odgovarajuće definicije stilova koje trebate proučiti da biste riješili postavljeni zadatak.
- Ponovite postupak za slike druge vrste.
-
Firefox ima u traci Web Developer ugrađen niz funkcija namijenjenih testiranju stranica, no te su funkcije složenije za upotrebu od upravo opisanih.
|