Rozwiązywanie problemów z witryną za pomocą narzędzi Chrome dla programistów lub Firebug

Jeśli śledzisz moją aplikację jQuery Making the Web Interactive: Wprowadzenie do jQuery Making the Web Interactive: Wprowadzenie do jQuery jQuery to biblioteka skryptów po stronie klienta, z której korzysta prawie każda nowoczesna strona internetowa - sprawia, że ​​strony internetowe są interaktywne. To nie jedyna biblioteka JavaScript, ale jest ona najbardziej rozwiniętą, najczęściej obsługiwaną i najczęściej używaną… samouczkami Samouczek jQuery - Pierwsze kroki: Podstawy i selektory Samouczek jQuery - Pierwsze kroki: Podstawy i selektory W zeszłym tygodniu mówiłem o tym, jak ważne jest jQuery jest dla każdego współczesnego programisty i dlaczego jest niesamowity. W tym tygodniu myślę, że nadszedł czas, aby zabrudzić sobie ręce jakimś kodem i dowiedzieć się, jak… do tej pory mogłeś mieć problemy z kodem i nie wiesz, jak je naprawić. W obliczu niefunkcjonalnego fragmentu kodu bardzo trudno jest dokładnie wskazać obrażającą linię kodu - i tutaj pojawiają się narzędzia do debugowania i programowania.

Więc zanim przejdziemy do bardziej złożonego kodu jQuery, pomyślałem, że sprawdzimy narzędzia dostępne w najpopularniejszej przeglądarce na świecie - Chrome. Te narzędzia są jednak nie tylko dla Javascript - mogą również pomóc w debugowaniu żądań AJAX, zasobach, które musi załadować Twoja strona, zbadaniu struktury DOM i całej masie innych rzeczy.

No Love For Firefox?

Chociaż konkretnie zamierzam dzisiaj odwoływać się do narzędzi programistycznych Chrome z osobistych preferencji oraz faktu, że są one wbudowane w przeglądarkę, ta sama funkcjonalność jest dostępna we wtyczce do przeglądarki Firefox o nazwie Firebug Jak zainstalować Firebug w IE, Safari, Chrome i Opera Jak zainstalować Firebug na IE, Safari, Chrome i Opera - interfejs jest prawie identyczny, więc ten przewodnik powinien nadal obowiązywać.

Uruchamianie narzędzi do debugowania

To nie może być prostsze. W Chrome po prostu naciśnij CTRL-SHIFT-I (CMD-ALT-I na Macu) lub kliknij prawym przyciskiem myszy w dowolnym miejscu i wybierz Sprawdź element. Powinieneś zobaczyć coś podobnego do następującego:

Istnieje niewielka różnica w tych dwóch metodach uruchamiania konsoli debugowania. Klawisz skrótu po prostu otworzy go w widoku domyślnym, a Inspect Element skoncentruje drzewo DOM na określonym elemencie, na który kliknięto prawym przyciskiem myszy. To prowadzi nas do pierwszej niesamowitej funkcjonalności, którą otrzymujemy z tych narzędzi.

Elementy i CSS

The Elementy zakładka jest podzielona na dwie sekcje; po lewej stronie jest pełne drzewo DOM. Jest to podobne do kodu źródłowego strony, ale jest znacznie bardziej przydatne.

Na początek tak było przeanalizowane w strukturę drzewa, dzięki czemu elementy można zwinąć i rozwinąć, co pozwala na badanie elementów potomnych, rodziców i rodzeństwa w bardziej oczywisty sposób niż tylko czytanie kodu źródłowego. Po drugie, odzwierciedla wszelkie dynamiczne zmiany na stronie wynikające z Javascript. Na przykład, jeśli twoje jQuery miało dodawać klasę do niektórych elementów pageLoad, zobaczysz to odzwierciedlone w drzewie DOM, ale nie w źródle strony.

Możesz także edytować DOM bezpośrednio, klikając go dwukrotnie. Tak, możesz użyć tego do zabawy i edytowania stron internetowych, aby robić głupie zrzuty ekranu, więc świetnie nadaje się do prostego eksperymentowania.

Oto ja zadzieram ze stroną główną wiadomości BBC…

Po prawej stronie możesz zobaczyć dowolne reguły CSS zastosowane do bieżącego elementu, w tym te, które zostały zastąpione regułami wyższego rzędu (mają one linię przez nie):

Możesz je dostosować lub po prostu odznaczyć określoną regułę, aby zobaczyć, co się stanie.

Rozwijanie “obliczone style” pokaże podsumowanie każdej aktualnie stosowanej reguły CSS. Numer wiersza i link do pliku po prawej stronie prowadzą bezpośrednio do pliku zasobów, z którego został załadowany, chociaż w niektórych przypadkach może to być plik zminimalizowany (więc wszystko jest w jednej linii).

Pamiętaj o tym żadna z wprowadzonych tutaj zmian nie zostanie zapisana, więc przy następnym odświeżeniu strona wróci do normy. Jeśli grasz z CSS, pamiętaj dokładnie o tym, co zmieniłeś, gdy uzyskasz pożądany rezultat.

Konsola błędów

Drugą najważniejszą kartą, jeśli chodzi o codzienne korzystanie z tych fantastycznych narzędzi, jest konsola błędów i debugowania, ostatnia karta na liście. Na początek zostaną wyświetlone tutaj wszelkie błędy JavaScript. Kiedy zaczynasz od jQuery, możesz znaleźć kilka przykładów “$ jest niezdefiniowany” lub “jQuery jest niezdefiniowany” - częsty błąd, który oznacza, że ​​zapomniałeś łącza do jQuery w nagłówku. Jeśli zobaczysz błąd, którego nie można odszyfrować, po prostu skopiuj go do pola wyszukiwania Google, a ponad to prawdopodobnie znajdziesz wiele innych osób, które miały ten sam problem.

Błąd wskaże również dokładną linię kodu, w której błąd wystąpił pierwszy; kliknij na to, aby przejść bezpośrednio do tej linii i sekcji kodu. Jeśli jest to jeden z twoich własnych skryptów, może często wskazać cię bezpośrednio przestępcy - jeśli błąd jest jednak bardziej niejasny, może wskazywać na kod źródłowy jQuery, który jest całkowicie nieczytelny.

Wystarczy powiedzieć, że konsola jest pierwszą rzeczą, którą powinieneś sprawdzić, gdy coś nie działa poprawnie, ponieważ jest więcej niż prawdopodobne, że wydrukował tam błąd.

Innym zastosowaniem konsoli jest generowanie własnych niestandardowych instrukcji debugowania. Możesz albo wysłać trochę tekstu, na przykład powiadomienie, że skrypt osiągnął pewien punkt:

console.log („dotarłem do tego bitu w kodzie ok, teraz próbuję…”);

Lub możesz wyprowadzać całe obiekty i zmienne tak proste jak:

console.log (myVar);

Spróbuj teraz, używając kilku podstawowych funkcji jQuery, aby wybrać niektóre elementy, a następnie wypisz je, aby zobaczyć, jak wyglądają. Możesz to wykorzystać na przykład do sprawdzenia, co znalazły selektory.

Sieć

Ostatnim narzędziem w zestawie narzędzi dla programistów, które chciałem wam dzisiaj pokazać, jest Sieć patka. Aby ta karta działała, musisz się na niej skoncentrować i odświeżyć stronę - wtedy przechwyci ona wszystkie żądania strony, dotyczące reklam, Javascript, CSS, obrazów - wszystko - i da ci podział informacji o tej interakcji, w tym:

• Nazwa pliku.
• rodzaj zapytania (GET lub POST).
• kod odpowiedzi, który serwer odesłał (200 OK, 304 niezmodyfikowany itp.).
• rozmiar pliku.
• wyczucie czasu.

Kliknięcie pojedynczego pliku spowoduje wyświetlenie jeszcze bardziej szczegółowych informacji na temat interakcji między przeglądarką a serwerem. Dla mnie jest to szczególnie przydatne podczas debugowania żądań AJAX - możesz dokładnie zobaczyć, jaki rodzaj danych został wysłany z żądaniem, oraz pełny wynik odpowiedzi otrzymany przez odbierający skrypt po stronie serwera.

streszczenie

Mam nadzieję, że uzbroiłem początkujących programistów w dodatkowe narzędzia. Jeśli uznasz ten post za przydatny, naprawdę doceniam udostępnienie, ponieważ sprawia, że ​​czuję się w nim ciepło i niewyraźnie, i mówi mi, że chcesz, żebym pisał bardziej podobnie. Z zadowoleniem przyjmuję także komentarze i opinie - szczególnie, jakich innych narzędzi używasz jako programisty stron internetowych?? Czy masz do dyspozycji arsenał wtyczek Firefox??