Reformatowanie kodu JavaScript

| kategoria: Artykuły, JavaScript, Programowanie | Komentarze (0)

Przeglądając źródła JavaScript w internecie często można zauważyć kod, którego praktycznie nie da się czytać i analizować. Przyczyn może być wiele, np. skompresowany kod. Niemniej jednak jedną z wielu możliwości doprowadzenia kodu źródłowego do postaci bardziej czytelnej jest zastosowanie odpowiednich narzędzi. Przykładem takich narzędzi może być:

  1. Javascript unpacker and beautifier
  2. Dodatek YSlow do Firebug-a

Pierwsze rozwiązanie jest dość proste i zawiera po prostu pole textarea, do którego wklejamy interesujący nas kod i klikamy przycisk "Beautify". Możemy dodatkowo zdefiniować sobie ilość wcięć w kodzie, zachować, lub nie, puste linie, wykryć paker-a czy też zachować wcięcia tablicy. Zrzut ekranu:

javascript_unpacker_and_beautifier

Drugie rozwiązanie to rozszerzenie YSlow do Firebug-a, którego zadaniem jest analizowanie czynników wpływających na czas ładowania strony i przedstawienie wyników tej analizy. Po instalacji rozszerzenia mamy dostępne 4 menu: Grade, Components, Statistics i Tools. W ostatnim menu Tools jest funkcjonalność o nazwie All JS Beautified. Kliknięcie w tę opcję spowoduje pokazanie sformatowanego kodu JavaScript.

Należy jednak uważać, ponieważ zdarzało się, że sformatowany kod nie nadawał się bezpośrednio do użycia, bo zawierał błędy. Niemniej jednak od strony analizy kodu wyświetlona zawartość nadaje się do tego jak najbardziej. Zrzut ekranu jak to wygląda po zainstalowaniu rozszerzenia:

YSlow

Warto zajrzeć jeszcze