Jeśli używasz Chrome 111 lub nowszej wersji, być może zauważyłeś, że zmieniliśmy wygląd paska przełaźni. W Chrome 113 nowy pasek boczny całkowicie zastępuje stary interfejs. Celem zmiany wyglądu było ulepszanie procesu tworzenia punktów kontrolnych poprzez:
Lepsze podsumowanie wszystkich ustawionych punktów granicznych. Ułatwienie dostępu do typowych przepływów pracy użytkownika z punktami kontrolnymi i uczynienie ich bardziej intuicyjnymi. Ujawnienie ciekawych funkcji punktów przełamania.
W tym artykule zakładamy, że znasz już debugowanie za pomocą punktów przerwania. Jeśli nie korzystasz jeszcze z punktów kontrolnych, zapoznaj się z tym artykułem, aby dowiedzieć się więcej o tym, jak można ich używać do debugowania kodu.
Zobaczmy teraz, co oferuje nowy interfejs i jak możesz korzystać z nowej bocznej belki. Pamiętaj, że nowy interfejs ma na celu ułatwienie korzystania z dotychczasowych funkcji i uzyskanie do nich łatwiejszego dostępu, a nie dodanie nowych funkcji.
Wstrzymaj działanie przy wyjątkach, aby sprawdzić, dlaczego Twój kod zwraca błąd
Czy Twój kod zgłasza wyjątek? Nie martw się! Narzędzie Chrome DevTools umożliwia wstrzymywanie wyjątków, aby zatrzymać wykonanie w miejscu, w którym wystąpił wyjątek. Dzięki temu możesz zbadać i lepiej zrozumieć okoliczności, w których kod zwraca błąd. Możesz wybrać, czy chcesz wstrzymywać reklamy w przypadku wykrytych wyjątków, niewykrytych wyjątków czy obu tych sytuacji. Aby to zrobić, zaznacz odpowiednie pola na pasku bocznym.
Zarządzaj punktami przerwania: rozwijaj odpowiednie grupy punktów przerwania i zwijaj inne, aby skupić się na tym, co istotne.
Punkty kontrolne mogą być rozmieszczone w kilku plikach. Pasek boczny punktów przerwania grupuje je według pliku, do którego należą. Skup się tylko na tych, którzy mają znaczenie dla bieżącej sesji debugowania, rozwijając odpowiednie grupy punktów przerwania i zwijając pozostałe.
Zarządzanie punktami przerwania: jednym kliknięciem możesz przejść do kodu, usunąć punkty przerwania lub je włączyć/wyłączyć.
Pasek boczny punktów przełamania umożliwia wykonywanie typowych zadań jednym kliknięciem. Oto, jak możesz…
Przejdź do punktu przerwania w Edytorze kodu. usunąć jeden punkt przerwania lub wszystkie punkty przerwania w pliku; Włącz lub wyłącz jeden lub wszystkie punkty przerwania w pliku.
I to wszystko jednym kliknięciem. Oczywiście te opcje są też dostępne w menu kontekstowym:
Aby przejść do punktu przerwania, kliknij fragment kodu punktu przerwania.
Czy chcesz sprawdzić, w którym miejscu kodu ustawiono punkt przerwania, i przeanalizować kod otaczający ten punkt? Wystarczy kliknąć fragment kodu punktu przerwania na pasku bocznym, aby otworzyć lokalizację kodu w edytorze kodu.
Usuwanie pojedynczego punktu przerwania lub wszystkich punktów przerwania w pliku przez kliknięcie przycisku usuwania
Najedź kursorem na punkt przerwania lub grupę punktów przerwania, aby wyświetlić przycisk usuwania, który po kliknięciu usuwa pojedynczy lub wszystkie punkty przerwania w pliku.
Wyłączanie pojedynczego lub wszystkich punktów przerwania w pliku
Zaznacz lub odznacz pole obok punktu kontrolnego, 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.
Korzystaj z mniej znanych funkcji punktów przerwania: punktów przerwania warunkowych i punktów logowania.
Edytowanie warunków punktu przerwania lub zmiana punktu logowania przez edytowanie punktu przerwania
Aby edytować warunek punktu kontrolnego lub dziennik, najedź kursorem na punkt kontrolny i kliknij pojawiony przycisk edytuj. Otworzy się okno, w którym możesz zmienić typ punktu kontrolnego i jego szczegóły.
Możesz też w edytorze kodu wybrać wiersz punktu przerwania i w Linuksie nacisnąć Control + Alt + B, a na Macu Command + Alt + B, aby otworzyć okno edycji punktu przerwania.
Możesz też szybko sprawdzić warunki lub punkty logowania, najeżdżając kursorem na punkt przecięcia w sekcji bocznej:
Podsumowanie
Celem przeprojektowania paska bocznego punktów kontrolnych było ułatwienie debugowania za pomocą punktów kontrolnych. Najważniejsze było dla nas uporządkowanie tych informacji, aby były łatwiejsze do znalezienia i zrozumienia. Mamy nadzieję, że te ulepszenia pomogą Ci podczas następnej sesji debugowania.
Jeśli masz sugestie dotyczące dalszych ulepszeń, zgłoś błąd.
Pobieranie kanałów podglądu
Rozważ użycie jako domyślnej przeglądarki deweloperskiej wersji Canary, Dev lub Beta przeglądarki Chrome. Te kanały wersji wstępnej zapewniają dostęp do najnowszych funkcji DevTools, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i pomagają znaleźć problemy w witrynie, zanim zrobią to użytkownicy.
Kontakt 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.
- Przesyłaj opinie i prośby o dodanie funkcji na stronie crbug.com.
- Zgłoś problem z Narzędziami deweloperskimi, klikając Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
- Wyślij tweeta do @ChromeDevTools.
- Dodaj komentarze do filmów w YouTube z serii „Co nowego w Narzędziach deweloperskich” lub Wskazówki dotyczące Narzędzi deweloperskich.