Poniższe narzędzia diagnostyczne mogą być przydatne podczas pracy nad szablonami.
Przeglądarka Mozilla Firefox
Firebug
- Firebug (Firefox 1.5+): umożliwia modyfikowanie, debugowanie i monitorowanie kodu CSS, HTML i JavaScript przeglądanych stron.
Web Developer
- Web Developer (Firefox 1+, Flock, Seamonkey): niezbędnik projektanta, bogaty zestaw narzędzi diagnostycznych.
Simple CSS Viewer
Google Page Speed oraz Yslow 2.0
YSlow – wtyczka dla Firebug, która analizuje stronę pod względem kilku czynników wpływających na czas ładowania strony i przedstawia wyniki tej analizy. Dodatkowo wyświetla informacje na temat załadowanych plików i czasu ich ładowania. Bardzo przydatna przy testowaniu serwisów internetowych pod względem czasu ładowania strony. [z Wikipedii.pl]. YSlow istnieje również w wersji dla przeglądarek Chrome i Opera.
EditCSS
- EditCSS: umożliwia bezpośrednią edycję kodu CSS przeglądanej strony i podgląd efektów zmian w czasie rzeczywistym. Aby skorzystać z edytora:
- otwórz stronę witryny,
- kliknij prawym przyciskiem w dowolnym miejscu strony i z podręcznego menu wybierz polecenie Edit CSS,
- wprowadzaj w kodzie dowolne zmiany i obserwuj ich skutki w wyglądzie strony.
- Walidator HTML: służy do kontroli poprawności kodu HTML
- IE Tab: otwiera stronę na nowej karcie, wyświetlając ją za pomocą silnika Internet Explorer
- Measurelt:
- Aardvark: umożliwia zaznaczanie dowolnych elementów na stronie i wykonywanie na nich różnych akcji.
- View formatted source
Aardvark - skróty klawiaturowe
Odwiedź stronę projektu: http://karmatics.com/aardvark
- B - black on white - sprawia, że element przybiera czarno-białą kolorystykę
- C - colorize - sprawia, że element przybiera losowy kolor tła
- D - De-widthhify - usuwa z własności elementu zdefiniowaną szerokość
- H - help - wyświetla pomoc
- I - isolate - usuwa elementy otaczające wybrany
- J - JavaScript Source - generuje kod JavaScript, dostarcza kopii elementu opartej na standardzie DOM
- K - kill - usuwa kompletnie element (bez możliwości cofnięcia)
- N - narrower - cofa operację wider
- P - paste - wkleja element wycięty poleceniem remve
- Q - quit - kończy działanie wtyczki
- R - remove - usuwa element
- U - undo - przywraca usunięty ostatnio element
- W - wider - zaznacza większy obszar, np. zamiast komórki cała tabelę
- V - view source - pokazuje źródło elementu
Przeglądarka Internet Explorer
Przeglądarka Safari
)
)