Aby uzyskać dostęp do strony po stronie komputera, możemy nacisnąć F12, aby otworzyć narzędzie do debugowania przez przeglądarkę i zobaczyć logi wyjściowe, żądania sieciowe, elementy strony internetowej, ciasteczka i inne informacje.
Jednak podczas tworzenia programów i aplikacji mobilnych lub mini występuje nieprawidłowy problem i nie możemy bezpośrednio zobaczyć tych nieprawidłowych informacji. Ten artykuł zaleca dwa front-endowe panele debugujące dla programistów.
Najpierw przesłaj kod źródłowy:
vConsole
Lekki, skalowalny, frontendowy panel debugujący dla deweloperów dla mobilnych stron internetowych.
- Sprawdź logi konsoli
- Zobacz żądania sieciowe
- Spójrz na strukturę elementów strony
- Sprawdź Cookies, localStorage i SessionStorage
- Ręcznie wykonaj linię poleceń JS
- Niestandardowe wtyczki
Adres:Logowanie do linku jest widoczne.
Eruda
Eruda to panel debugujący zaprojektowany dla frontendu mobilnych stron internetowych, podobny do mini wersji DevTools, z kluczowymi funkcjami takimi jak: przechwytywanie logów konsoli, sprawdzanie statusu elementów, przechwytywanie żądań XHR, wyświetlanie lokalnej pamięci i informacji o ciasteczkach oraz inne.
Przeciąganie i upuszczanie przycisków, ustawienie rozmiaru przezroczystości panelu.
- Panel konsoli: rejestruje logi konsoli, obsługując log, błąd, info, warn, dir, time/timeEnd, clear, count, assert, table; Wsparcie dla zastępczych, w tym %c custom style output; Wspierać filtrowanie według typu logu i wyrażenia regularnego; Obsługiwane jest wykonywanie skryptów JavaScript.
- Panel Elementy: Zobacz zawartość i właściwości tagów; Zobacz, jak stylizuje się twoja aplikacja na DOM; Obsługa podświetlania elementów strony; Obsługa bezpośredniego wyboru na ekranie; Zobacz rodzaje zdarzeń związanych z DOM.
- Panel sieciowy: Rejestruj żądania i wyświetlaj informacje takie jak przesłane dane, zwrotne nagłówki oraz zwrócone treści.
- Panel zasobów: Przeglądaj i czyścij localStorage, sessionStorage oraz pliki cookie. Przeglądaj skrypty ładowania stron i pliki stylów; Zobacz stronę ładowanie obrazów.
- Panel źródeł: Zobacz kod źródłowy strony; Formatuj HTML, CSS, JS code i dane JSON.
- Panel informacyjny: adres URL wyjściowy i User Agent; Wspieraj niestandardowe treści wyjściowe.
- Panel fragmentów: dodawanie ramek do elementów strony; Dodaj znacznik czasu do odświeżenia strony; Obsługiwane są niestandardowe fragmenty kodu.
Adres:Logowanie do linku jest widoczne. |
Opublikowano 29.06.2020 15:36:20
|
|
|
|
Ziemianin|
Opublikowano 08.02.2025 13:44:17
|
