Um auf der PC-Seite auf die Website zuzugreifen, können wir F12 drücken, um das Debugging-Tool über den Browser zu öffnen und Ausgabeprotokolle, Netzwerkanfragen, Webseitenelemente, Cookies und andere Informationen einzusehen.
Wenn wir jedoch mobile oder Mini-Programme und Apps entwickeln, gibt es ein abnormales Problem, und wir können die abnormalen Informationen nicht direkt einsehen. Dieser Artikel empfiehlt zwei Frontend-Debugging-Panels für Entwickler.
Laden Sie zuerst den Quellcode hoch:
vConsole
Ein leichtes, skalierbares Frontend-Debugging-Panel für Entwickler für mobile Webseiten.
- Überprüfen Sie die Konsolenprotokolle
- Netzwerkanfragen anzeigen
- Schau dir die Struktur der Seitenelemente an
- Schau dir Cookies, localStorage und SessionStorage an
- Führe die JS-Befehlszeile manuell aus
- Benutzerdefinierte Plugins
Adresse:Der Hyperlink-Login ist sichtbar.
Eruda
Eruda ist ein Debugging-Panel, das für das Frontend mobiler Webseiten entwickelt wurde, ähnlich einer Mini-Version von DevTools, mit Schlüsselfunktionen wie: Erfassung von Konsolenprotokollen, Überprüfung des Elementstatus, Erfassung von XHR-Anfragen, Anzeige lokaler Speicher- und Cookie-Informationen und mehr.
Knopf-Drag & Drop, Einstellung der Panel-Transparenzgröße.
- Konsolenpanel: erfasst Konsolenprotokolle, unterstützendes Log, Fehler, Info, Warn, Dir, Zeit/ZeitEnd, löschen, zählen, auslösen, Tabelle; Unterstützung für Platzhalter, einschließlich %c benutzerdefinierter Ausgabe; Unterstützung der Filterung nach Log-Typ und regulärem Ausdruck; Die Ausführung eines JavaScript-Skripts wird unterstützt.
- Elemente-Panel: Tag-Inhalte und -Eigenschaften anzeigen; Sieh dir an, wie deine App auf dem DOM gestaltet ist; Unterstützung für das Markieren von Seitenelementen; Unterstützung der direkten Klickauswahl auf dem Bildschirm; Sehen Sie sich die Arten von Ereignissen an, die am DOM gebunden sind.
- Netzwerkpanel: Erfassen Sie Anfragen und sehen Sie Informationen wie gesendete Daten, Rücksendkopfzeilen und zurückgegebene Inhalte an.
- Ressourcen-Panel: Anzeigen und löschen Sie localStorage, sessionStorage und Cookies. Seitenladeskripte und Stildateien anzeigen; Seiten aufrufen, Bilder laden.
- Quellen-Panel: Sehen Sie den Quellcode der Seite an; Formatiere HTML-, CSS-, JS-code und JSON-Daten.
- Infopanel: Ausgabe-URL und User Agent; Unterstützen Sie benutzerdefinierte Ausgaben.
- Snippets-Panel: Fügen Sie Seitenelementen Ränder hinzu; Fügen Sie einen Zeitstempel hinzu, um die Seite zu aktualisieren; Benutzerdefinierte Code-Schnipsel werden unterstützt.
Adresse:Der Hyperlink-Login ist sichtbar. |
Veröffentlicht am 29.06.2020 15:36:20
|
|
|
|
Vermieter|
Veröffentlicht am 08.02.2025 13:44:17
|
