Obserwuj zmienne w źródłach

W Narzędziach deweloperskich w Chrome możesz łatwo przeglądać różne zmienne w całej aplikacji. Obserwując zmienne w sekcji Źródła, nie musisz się zapominać o ulepszaniu kodu.

Panel Źródła umożliwia śledzenie zmiennych w aplikacji. Znajdziesz go w sekcji zegarka na pasku bocznym debugera. Dzięki tej funkcji nie będzie trzeba wielokrotnie logować obiektów w konsoli.

Obejrzyj sekcję debugera

Dodawanie zmiennych

Aby dodać zmienną do listy obserwacyjnej, użyj ikony dodawania po prawej stronie nagłówka sekcji. Otworzy się wbudowane dane wejściowe, w którym podasz nazwę obserwowanej zmiennej. Następnie naciśnij klawisz Enter, by dodać go do listy.

Przycisk dodawania do listy Do obejrzenia

Obserwator pokazuje aktualną wartość zmiennej w miarę jej dodawania. Jeśli zmienna nie jest ustawiona lub nie można jej znaleźć, zamiast tej wartości wyświetla się .

Niezdefiniowana zmienna na liście obserwacyjnej

Aktualizowanie zmiennych

Wartości zmiennych mogą się zmienić w miarę działania aplikacji. Lista obserwacyjna nie stanowi widoku na żywo zmiennych, chyba że przechodzisz do konfiguracji. Gdy wykonujesz krok z wykorzystaniem punktów przerwania, monitorowane wartości aktualizują się automatycznie. Aby ręcznie sprawdzić zmienne na liście, kliknij przycisk odświeżania po prawej stronie nagłówka sekcji.

Przycisk odświeżania zmiennych zegarka

Gdy pojawia się prośba o odświeżenie, bieżący stan aplikacji jest ponownie sprawdzany. Dla każdego oglądanego elementu zostanie zastosowane aktualne wartości.

Obserwowana zmienna została zaktualizowana

Usuwanie zmiennych

Aby skrócić czas oglądania i przyspieszyć pracę, konieczne może być usunięcie zmiennych z listy obserwowanych. Możesz to zrobić, najeżdżając kursorem na zmienną i klikając ikonę usuwania po prawej stronie.

Najedź kursorem na zmienną, aby usunąć ją z listy obserwacyjnej