Logger konsoli przechwytuje wszystkie wyjścia konsoli (console.log, console.warn, console.error, console.info) i wyświetla je w pływającym panelu bezpośrednio na stronie. Zobacz błędy JavaScript, komunikaty debugowania i ostrzeżenia w czasie rzeczywistym bez otwierania DevTools przeglądarki. Wiadomości są kolorowo kodowane według typu i zawierają znaczniki czasu oraz ślady stosu dla błędów.
Otwieranie DevTools przeglądarki tylko po to, aby sprawdzić wyjście konsoli, zajmuje cenne miejsce na ekranie — szczególnie na mniejszych ekranach lub gdy potrzebujesz widzieć całą stronę podczas monitorowania logów. Logger konsoli zapewnia lekką alternatywę: pływający panel, który pokazuje wszystkie wyjścia konsoli w miarę ich wystąpienia, nakładany na stronę. Panel przechwytuje console.log, console.warn, console.error, console.info i nieprzechwycone wyjątki z pełnymi śladami stosu. Wiadomości są kolorowo kodowane (błędy na czerwono, ostrzeżenia na żółto, info na niebiesko, logi na biało/szaro) i zawierają znaczniki czasu do śledzenia, kiedy zdarzenia się odbywają. Przyciski filtra pozwalają pokazać tylko konkretne typy wiadomości — pokaż tylko błędy podczas debugowania awarii lub tylko ostrzeżenia, gdy szukasz powiadomień o wycofaniu. Panel jest przeciągalny, zmienialny i półprzezroczysty, więc nie blokuje zbyt dużo zawartości strony.
Wiadomości konsoli pojawiają się w czasie rzeczywistym w miarę ich rejestrowania. Zobacz logi inicjalizacji strony, obsługę odpowiedzi API, zdarzenia interakcji użytkownika i komunikaty błędów — wszystko strumieniowo na żywo w pływającym panelu.
Błędy na czerwono, ostrzeżenia na bursztynowo/żółto, info na niebiesko i standardowe logi na biało/szaro. Natychmiast odróżniaj krytyczny błąd od rutynowej wiadomości logu tylko po kolorze.
Błędy JavaScript zawierają pełny ślad stosu z nazwami plików, nazwami funkcji i numerami linii. Kliknij odniesienie do pliku, aby zidentyfikować dokładnie, gdzie pojawił się błąd, bez otwierania DevTools.
Przyciski filtra na górze pozwalają pokazywać/ukrywać konkretne typy wiadomości: Wszystkie, Tylko błędy, Tylko ostrzeżenia, Tylko info, Tylko logi. Znaczek liczby na każdym filtrze pokazuje, ile wiadomości tego typu istnieje.
Każda wiadomość pokazuje czas zarejestrowania (format HH:MM:SS). Śledź sekwencję zdarzeń, identyfikuj problemy z wydajnością (jak długo między wywołaniem API a odpowiedzią) i koreluj wiadomości z akcjami użytkownika.
Wyczyść wszystkie wiadomości, aby zacząć od nowa, lub kontynuuj kumulowanie, gdy wchodzisz w interakcję ze stroną. Panel pokazuje łączną liczbę wiadomości i można go zminimalizować, gdy nie jest potrzebny.
Potrzebujesz zobaczyć wyjście konsoli, zachowując pełną widoczność strony? Logger konsoli pozwala monitorować logi bez panelu DevTools zajmującego miejsce na ekranie. Idealne na mniejszych ekranach lub podczas prezentacji.
Jeśli twój JavaScript loguje odpowiedzi API, Logger konsoli pokazuje je w czasie rzeczywistym. Zobacz dane żądania/odpowiedzi bez przełączania między stroną a DevTools.
Niektóre błędy JavaScript zawodzą po cichu — brak widocznej zmiany UI, ale błąd w konsoli. Logger konsoli czyni je widocznymi na stronie, więc zauważasz je podczas normalnego przeglądania.
Podczas demonstracji na żywo zachowaj widoczny panel Loggera konsoli w rogu. Jeśli coś pójdzie nie tak, możesz natychmiast zobaczyć komunikat błędu bez przerywania demonstracji, aby otworzyć DevTools.
Skrypty zewnętrzne (analityka, widżety czatu, sieci reklamowe) często rzucają błędy lub ostrzeżenia. Logger konsoli przechwytuje je, więc możesz monitorować stan zewnętrznych zależności.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Loggera konsoli. Pojawia się pływający panel i natychmiast zaczyna przechwytywać wyjście konsoli.
Używaj strony normalnie — klikaj przyciski, nawiguj, wysyłaj formularze. Wiadomości konsoli pojawiają się w panelu, gdy są rejestrowane przez JavaScript strony.
Użyj przycisków filtra, aby pokazać tylko błędy, ostrzeżenia lub logi. Znaczki liczby pokazują, ile wiadomości istnieje dla każdego typu.
Dla wiadomości błędów rozwiń ślad stosu, aby zobaczyć plik i numer linii, gdzie wystąpił błąd. Użyj tego, aby zidentyfikować źródło błędu.
Kliknij "Wyczyść", aby zresetować panel, lub dezaktywuj narzędzie, aby go zamknąć. Żaden ślad nie pozostaje na stronie.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
