Jeśli używasz Chrome w wersji 111 lub nowszej, być może zauważysz, że zmieniliśmy wygląd paska bocznego punktu przerwania. W Chrome 113 nowy pasek boczny całkowicie zastępuje stary wygląd. Naszym celem było ulepszenie przepływu pracy z punktami przerwania przez:
lepsze przedstawienie wszystkich ustawionych punktów przerwania; ułatwienie dostępu do typowych przepływów pracy użytkowników z punktami przerwania i zwiększenie ich intuicyjności; wyeksponowanie ciekawych, dotychczasowych funkcji punktów przerwania.
W tym poście zakładamy, że znasz już debugowanie za pomocą punktów przerwania. Jeśli nie używasz jeszcze punktów przerwania, zapoznaj się z tym omówieniem punktów przerwania i dowiedz się, jak możesz ich używać do debugowania kodu.
Przyjrzyjmy się teraz, co oferuje nowy wygląd i jak możesz korzystać z nowego paska bocznego. Pamiętaj, że nowy wygląd koncentruje się na zwiększeniu intuicyjności i ułatwieniu dostępu do dotychczasowych funkcji, a nie na dodawaniu nowych.
Wstrzymywanie działania w przypadku wyjątków, aby sprawdzić, dlaczego kod zgłasza błąd
Czy Twój kod zgłasza wyjątek? Nie martw się! Narzędzia deweloperskie w Chrome umożliwiają wstrzymanie działania w przypadku wyjątków, aby zatrzymać wykonywanie w miejscu, w którym zgłaszany jest wyjątek. Może to pomóc w zbadaniu i lepszym zrozumieniu okoliczności, w których kod zgłasza błąd. Możesz wybrać, czy chcesz wstrzymywać działanie w przypadku przechwyconych wyjątków, nieprzechwyconych wyjątków lub obu tych przypadków, zaznaczając odpowiednie pola wyboru na pasku bocznym.
Zarządzanie punktami przerwania: rozwijanie odpowiednich grup punktów przerwania i zwijanie innych, aby skupić się na tym, co istotne
Punkty przerwania mogą być rozproszone w kilku plikach. Pasek boczny punktu przerwania grupuje punkty przerwania według pliku, do którego należą. Skup się tylko na tych, które są istotne w bieżącej sesji debugowania, rozwijając odpowiednie grupy punktów przerwania i zwijając pozostałe.
Zarządzanie punktami przerwania: jedno kliknięcie, aby przejść do kodu, usunąć lub włączyć/wyłączyć punkty przerwania
Pasek boczny punktu przerwania umożliwia wykonywanie typowych zadań jednym kliknięciem. Oto omówienie tego, jak możesz:
Przejdź do lokalizacji punktu przerwania w edytorze kodu. Usuń jeden punkt przerwania lub wszystkie punkty przerwania w pliku. Włącz lub wyłącz jeden punkt przerwania albo wszystkie punkty przerwania w pliku.
A wszystko to jednym kliknięciem! Oczywiście te opcje są też dostępne w menu kontekstowym:
Przejdź do lokalizacji punktu przerwania, klikając fragment kodu punktu przerwania
Chcesz sprawdzić, gdzie w kodzie ustawiono punkt przerwania, i przeanalizować otaczający kod? Wystarczy kliknąć fragment kodu punktu przerwania na pasku bocznym, aby otworzyć lokalizację kodu w edytorze kodu.
Usuń pojedynczy punkt przerwania lub wszystkie punkty przerwania w pliku, klikając przycisk usuwania
Najedź kursorem na punkt przerwania lub grupę punktów przerwania, aby wyświetlić przycisk usuwania, który po kliknięciu usuwa pojedynczy punkt przerwania lub wszystkie punkty przerwania w pliku.
Wyłącz pojedynczy punkt przerwania lub wszystkie punkty przerwania w pliku
Zaznacz lub odznacz pole wyboru obok punktu przerwania, aby go włączyć lub wyłączyć.
Aby włączyć lub wyłączyć wszystkie punkty przerwania w pliku, najedź kursorem na grupę punktów przerwania i zaznacz lub odznacz pole wyboru, które pojawi się obok nazwy pliku.
Korzystanie z mniej znanych funkcji punktów przerwania: warunkowych punktów przerwania i punktów logowania
Edytowanie warunków punktu przerwania lub zmienianie logu punktu logowania przez edytowanie punktu przerwania
Aby edytować warunek punktu przerwania lub log, najedź kursorem na punkt przerwania i kliknij przycisk Edytuj, który się pojawi. Spowoduje to otwarcie okna, w którym możesz zmienić typ punktu przerwania i jego szczegóły.
Możesz też wybrać wiersz punktu przerwania w edytorze kodu i wpisać Control+Alt+b w systemie Linux oraz Command+Alt+b na Macu, aby otworzyć okno edycji punktu przerwania.
Możesz też szybko sprawdzić warunek lub log punktu logowania, najeżdżając kursorem na punkt przerwania na pasku bocznym:
Podsumowanie
Naszym celem było ułatwienie debugowania za pomocą punktów przerwania. Przede wszystkim chcieliśmy, aby wszystko było bardziej uporządkowane, łatwiejsze w obsłudze i bardziej zrozumiałe. Mamy nadzieję, że te ulepszenia pomogą Ci w następnej sesji debugowania.
Jeśli masz sugestie dotyczące dalszych ulepszeń, zgłoś błąd.
Pobieranie kanałów wersji testowych
Rozważ używanie Chrome Canary, Dev lub Beta jako domyślnej przeglądarki do tworzenia stron. Te kanały wersji testowych zapewniają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znajdować problemy w witrynie, zanim zrobią to użytkownicy.
Kontaktowanie się z zespołem Narzędzi deweloperskich w Chrome
Aby omówić nowe funkcje, aktualizacje lub inne kwestie związane z Narzędziami deweloperskimi, skorzystaj z tych opcji.
- Prześlij nam opinię i propozycje funkcji na crbug.com.
- Zgłoś problem z Narzędziami deweloperskimi, klikając Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi w Narzędziach deweloperskich.
- Napisz tweeta do @ChromeDevTools.
- Zostaw komentarz pod filmami na YouTube z serii Co nowego w Narzędziach deweloperskich lub Wskazówki dotyczące Narzędzi deweloperskich.