W Narzędziach deweloperskich w Chrome możesz łatwo wyświetlać wiele zmiennych w aplikacji. Obserwowanie zmiennych w sekcji Źródła pozwala Ci zabrać się za konsolę i skupić się na ulepszaniu kodu.
Panel Źródła umożliwia obserwowanie zmiennych w aplikacji. Znajdziesz ją w sekcji oglądania na pasku bocznym debugera. Dzięki tej funkcji nie musisz wielokrotnie rejestrować obiektów w konsoli.
Dodawanie zmiennych
Aby dodać zmienną do listy obserwacyjnej, użyj ikony dodawania po prawej stronie nagłówka sekcji. Otworzy się okno wejściowe, w którym podasz nazwę zmiennej do obserwowania. Aby dodać ją do listy, naciśnij klawisz Enter.
Obserwujący pokaże bieżącą wartość zmiennej po jej dodaniu. Jeśli zmienna nie jest ustawiona lub nie można jej znaleźć, w polu będzie widoczna wartość
Aktualizowanie zmiennych
Wartości zmiennych mogą się zmieniać w miarę działania aplikacji. Lista obserwacyjna nie pokazuje zmiennych w czasie rzeczywistym, chyba że przechodzi się przez etap wykonywania. Gdy przechodzisz przez wykonywanie kodu za pomocą punktów przerwania, obserwowane wartości będą aktualizowane automatycznie. Aby ręcznie sprawdzić zmienne na liście, naciśnij przycisk odświeżania po prawej stronie nagłówka sekcji.
Wraz z żądaniem odświeżenia bieżący stan aplikacji jest ponownie sprawdzany. Każdy oglądany element zostanie zaktualizowany o bieżące wartości.
Usuwanie zmiennych
Aby ograniczyć zakres potrzebnych informacji i szybciej pracować, możesz usunąć zmienne z listy obserwowanych. Aby to zrobić, najedź kursorem na zmienną i kliknij ikonę usuwania, która pojawi się po prawej stronie.