Jak wiadomo, WordPress oparty jest na popularnym języku PHP, jednak wykorzystuje też JavaScript w dużej części swojego kodu, nie wspominając już o pluginach i szablonach. Błędy pojawiające się na stronie nie zawsze muszą być związane z działaniem posiadanego hostingu lub serwera. Warto więc mieć na uwadze, że w swoim działaniu JavaScript również potrafi wywołać sporo błędów. W tym artykule dowiesz się jak dokonać ich wstępnej analizy.

Krótka historia JavaScript, czym jest jQuery oraz jak to się ma do WordPressa.

JavaScript, często oznaczany skrótem JS z uwagi na fakt, że tego typu jest też rozszerzenie plików z jego kodem, jest z nami już od 1996 roku. Dzisiaj silnie rozwijany oraz obecny jako mocne narzędzie na rynku IT. Można założyć, że wielki bum na ten język rozpoczął się od 2015, gdy wyszedł standard ES6 (ES2015), a także dostrzeżenie potencjału tego języka oraz rozwój o kolejne frameworki, np. Angular, Vue itd. Do tego z czasem doszło pisanie aplikacji cross-platformowych, np. przy użyciu platformy programistycznej Electron.

Natomiast jeśli chodzi o jQuery i WordPress, to…

Biblioteka jQuery jest z nami od 2006 roku (pierwsza stabilna wersja). Do dziś także rozwijana i używana jest przez programistów z wielką chęcią. Biorąc głównie pod uwagę to, że napisanie funkcjonalności lub obsługi zdarzeń na stronie zajmuje zdecydowanie mniej czasu. Innymi słowy, biblioteka ta jest niesamowitym uproszczeniem języka JavaScript. Dlatego jest również obecna w WordPressie i często wykorzystywana przez autorów wtyczek oraz szablonów.

Ale jak to działa?

No właśnie, bardziej pierwszym pytaniem powinno być “gdzie to działa?”. Na Twojej przeglądarce. Tak! Skrypt JavaScript jest wykonywany po stronie przeglądarki, więc lokalnie  na Twoim komputerze. Jedynie pliki JS znajdują się na serwerze i są pobierane na przeglądarkę w celu wykonania na stronie. Tutaj idealnym przykładem jest właśnie wspomniana wcześniej biblioteka jQuery, używana przez WordPressa, która to musi zostać pobrana z serwera i załadowana na stronie. Tylko dzięki temu poprawnie zostaną  uruchomione inne skrypty wykorzystujące daną bibliotekę. Już samo złe załadowanie biblioteki lub niezgodnej wersji może przyczynić się do posypania się fali błędów na stronie niczym domino.

Ciekawostka: Twoja strona na WordPressie jest jak auto. Zadbane będzie długo jeździć, więc zadbaj o optymalizację swojej strony!

Często spotykane błędy Javascript (jQuery) na stronie WordPress

Przejdźmy do głównego tematu naszego artykułu. Dzięki niemu zyskasz świadomość co może przyczynić się do pytań: Dlaczego wtyczka Pixel Facebooka nie działa? Dlaczego loader na mojej stronie się cały czas mieli? Dlaczego mój formularz zamówienia się nie rozwija? Wiele podobnych błędów może mieć związek z poniższymi najczęściej spotykanymi problemami, od strony języka JavaScript.

Konflikty

Najczęściej występującymi konfliktami jest to, że używane wtyczki oraz motywy korzystają z innych wersji biblioteki jQuery. Albo programiści, będący autorami wtyczek lub szablonów źle zastosowali kolejność ładowania danych skryptów, np. pierw jest wczytywany skrypt napisany przez programistę, a dopiero następnie wykorzystywana biblioteka. Skrypt nie zostanie w tym przypadku wykonany i zwróci błędy z brakującą biblioteką lub odniesie się do innej wersji. Jeżeli taka będzie dostępna na stronie i załaduje się wcześniej.

Uwaga: Jest jeszcze możliwość, że po stronie serwera dane pliki JS nie mają właściwych uprawnień, dlatego nie mogą zostać prawidłowo wczytane. Jednak częściej występującym błędem jest brak danych plików, zwłaszcza po aktualizacjach WordPressa lub wtyczek.

Zmienne globalne, a zmienne lokalne

Najczęściej przyczyną tego błędu jest niepoprawne odwoływanie się do zmiennych lokalnych, które powinny być dostępne globalnie lub niepoprawne używanie nazewnictwa zmiennych przez programistę, czyli nazw zastrzeżonych przez język javascript lub samą bibliotekę jQuery. Często też spotyka się pomyłki programisty w nazwie zmiennej. Zmienne używane przykładowo w kodzie biblioteki jQuery lub skrypcie nie będą dla siebie widoczne, a w związku z tym cały skrypt zatrzyma się w momencie napotkania błędu. Strona przestanie poprawnie działać.

Nie ma takich zdefiniowanych funkcji lub błędy składni języka JS

Tak jak w przypadku zmiennych problem jest podobny, przez co przeglądarka zwróci nam błąd, że nie ma definicji danej metody. Również takie błędy mogą dotyczyć pomyłki przez programistę w trakcie pisania kodu. To również odnosi się do błędów popełnianych w składni. Przykładem jest niepoprawne zdefiniowanie funkcji, użycie jej później z niepoprawnym argumentem. Brak nawiasu lub średnika, itd.

Selektory jQuery, czyli gdy skrypt nie może znaleźć na stronie elementu

Najprościej mówiąc, napisany przez programistę skrypt JS musi się odnieść do elementu na naszej stronie, np. pola formularza lub menu głównego, ale go nie widzi. Przyczyną tego może być to, że dany elementy posiada inną nazwę ID, czego programista nie wziął pod uwagę lub nie zaktualizował w swoim kodzie.

Przykład błędów, jakie mogą zostać zwrócone w konsoli przeglądarki:

• TypeError: undefined is not a function — błąd związany z wywoływaniem funkcji, która nie została zdefiniowana lub nie istnieje.
• SyntaxError: Unexpected token — błąd ten najczęściej świadczy o błędach w składni skryptu. Object is not a function — to również można przypisać do błędów w skrypcie, jednak częściej występuję w związku z błędnie załadowaną biblioteką jQuery.
• jQuery is not defined — najczęściej, gdy nie ma na stronie poprawnie załadowanej biblioteki jQuery lub właściwej wersji.
• $ is not a function — musiał wystąpić konflikt lub również błąd jest przypisywany złemu załadowaniu biblioteki jQuery. Dlatego dany znak nie jest rozpoznawany.
• Cannot read property 'xyz’ of undefined — źle zdefiniowane zmienne lub wartości obiektów w skrypcie. Błąd może wynikać również z niepoprawnego odwołania do wartości, która może być globalnie niedostępna (niewidoczna).
• Uncaught ReferenceError: xyz is not defined — najczęściej chodzi tutaj o literówkę jaką popełnił w skrypcie programista. Ale dotyczy to również konfliktów, przez co dana funkcja lub zmienna jest niewidoczna (niezdefiniowana) dla skryptu.

Dlaczego moja strona nie działa? Jak analizować błędy javascript i jquery

Jeżeli jesteśmy pewni, że po stronie serwera nic się nie dzieje. Bo przykładowo nasz dostawca usługi hostingu zwrócił uwagę, że na stronie są błędy kodu JavaScript i od serwera proszę się odczepić. To wtedy mamy dwie możliwości rozwiązania problemu.

Pierwszą możliwością jest zbadanie czy były ostatnio aktualizacje na stronie (wtyczki, szablony, a nawet sam WordPress) lub czy nie były dodawane nowe elementy. Po analizie, że mogło być to powodem błędów, najszybszym rozwiązaniem będzie przywrócenie dostępnego backupu na serwerze.

Uwaga: Pamiętaj, że w zenbox.pl kopie Twoich stron przetrzymywane są do maksymalnie 7 dni wstecz! Dlatego po aktualizacjach sprawdź, czy strona funkcjonuje prawidłowo.

Ciekawostka: Zastanawiasz się dlaczego backup WordPressa jest taki ważny? Na naszych serwerach ZEN kopie zapasowe przygotowywane są 4 razy dziennie, co 6 godzin i zawsze masz możliwość w przypadku awarii przywrócić je z panelu Klienta. Dowiedz się więcej o kopiach zapasowych w Zenbox.

Drugim sposobem, już niestety dużo trudniejszym, jest dokładna analiza błędów występujących na naszej stronie. W tym celu pierwszym krokiem będzie wywołanie konsoli w przeglądarce. W zależności od przeglądarki do wywołania konsoli służy określony przycisk. Jednak wystarczy kliknąć prawy przycisk myszy w dowolnym miejscu na stronie i wybrać opcję Zbadaj element lub Wykonaj inspekcję. Następnie po przejściu do zakładki Console (przykład poniżej z Opery) możemy szukać oczywiście z pomocą google  rozwiązań błędów, które się pojawiły. Czy jest to proste? Oczywiście, że nie jest, a zwłaszcza wtedy gdy problem robi się bardziej skomplikowany. Dlatego jeżeli mamy kontakt z osobą, która tworzyła stronę lub zweryfikujemy, że za błąd odpowiada dana wtyczka to najlepiej skontaktować się z autorem.

Narzędzia dla deweloperów dostępne w przeglądarce (zwłaszcza Chrome) są niesamowite w przypadku szukania rozwiązań tego typu problemów. Jednak nie jest to jedyny sposób oraz dla niektórych osób może okazać się zbyt trudny. Z uwagi, że w takiej sytuacji nie pomoże nam tryb debug w WordPressie (chociaż jest jeszcze możliwość włączenia opcji SCRIPT_DEBUG, link do poradnika na końcu artykułu) , który zbiera szczególnie błędy PHP. Możemy poszukać narzędzi online.

Jak naprawiać tego typu błędy?

To już jest zależne od rodzaju znalezionego błędu oraz czasu, jaki trzeba poświęcić na jego rozwiązanie. Przykładowo jeżeli problem dotyczy brakujących wersji bibliotek jQuery, to można rozwiązać to w prosty sposób instalując wtyczkę jQuery Manager for WordPress. W przypadku gdy wybór właściwej wersji nie rozwiąże problemu, wtedy konieczna będzie interwencja osoby lub firmy, która specjalizuje się w działaniach programistycznych. Dotyczy to również innych błędów JS, jednak sytuacje są bardzo podobne.

Javascript a wydajność Twojej strony

Skoro JavaScript potrafi rozłożyć przysłowiowo naszą stronę na łopatki, to warto się zastanowić jaki wpływ może mieć na wydajność naszej strony. Otóż wielki. Źle napisane skrypty wtyczek, które mogą być źle zoptymalizowane, będą się wolno ładować na naszej stronie. Czy wtyczki odpowiedzialne za cache strony pomogą w tym temacie? Niekoniecznie. Ponieważ mimo iż plik odpowiedzialny za dany skrypt zostanie zminimalizowany, to nadal kod JS pozostanie taki sam i będzie nam spowalniał stronę w przeglądarce użytkownika. Więc jako przykład zakładamy, że dana wtyczka/szablon sprawia wolne ładowanie po stronie użytkownika, a kontakt z autorem jest niemożliwy. W takim przypadku najlepiej poszukać zamiennika o podobnej funkcjonalności. Czy jednak czytelniku wolisz biegać od programisty do programisty w nadziei, że komuś uda się naprawić błąd? Bądźmy szczerzy 🙂

Ciekawostka: O częstych błędach, niekoniecznie związanych z JS pisaliśmy również w artykule Popularne błędy WordPress – jak je znaleźć i naprawić?

Znalezione i ciekawe narzędzia online, które mogą Ci się przydać

Na koniec tego artykułu pragnę zaproponować Tobie drogi czytelniku fajne źródła dostępnych narzędzi online. Potrafią one pomóc w rozwiązywaniu problemów lub podniesieniu wydajności swojej strony. Pamiętaj jednak, że podobnych narzędzi jest pełno i na pewno je znajdziesz.

Rozwiązywanie problemów:

• https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-debug-javascript — w tym poradniku Microsoftu pokazane jest jak krok po kroku można weryfikować i naprawiać błędy JavaScript z poziomu konsoli przeglądarki.
• https://validatejavascript.com — jeżeli udało Ci się odnaleźć skrypt JS, który powoduje na Twojej stronie błąd, to śmiało skopiuj go, wklej i przetestuj.
• https://seositecheckup.com/tools/js-error-test — bardzo fajne narzędzie online do wyłapywania błędów JavaScript, gdy jednak konsola w przeglądarce to dla Ciebie czarna magia 🙂
• https://wordpress.org/documentation/article/using-your-browser-to-diagnose-javascript-errors/ — poradnik od WordPress’a jak szukać i diagnozować błędy JavaScript.
• https://www.seoptimer.com/free-tools — wiele darmowych narzędzi, w tym testowanie/szukanie błędów JS na stronie, które mogą się Tobie przydać.

Testowanie wydajności:

• https://developer.chrome.com/docs/lighthouse/overview/ — Lighthouse, czyli bardzo fajne narzędzie zintegrowane z przeglądarką Chrome mające na celu testowanie wydajności strony.
• https://www.isitwp.com/free-website-speed-test-tool-for-wordpress/ — narzędzie do testowania stron opartych na WordPressie. Najfajniejsze, że pokazuje wykres czasu ładowania poszczególnych plików (obrazy, CSS, JS, czcionek, itd.).
• https://www.sitespeed.io — super narzędzie, jednak już bardziej dla developerów, bo konieczna jest znajomość npm menadżera pakietów.
• https://ready.mobi — przetestuj wydajność swojej strony na różnych urządzeniach mobilnych.