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.
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.
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ę
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.
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.
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.