Om toegang te krijgen tot de website aan de pc-kant kunnen we op F12 drukken om via de browser de debuggingtool te openen en outputlogs, netwerkverzoeken, webpagina-elementen, cookies en andere informatie te bekijken.
Maar wanneer we mobiele of mini-programma's en apps ontwikkelen, is er een abnormaal probleem en kunnen we die abnormale informatie niet direct bekijken. Dit artikel raadt twee front-end ontwikkelaar debuggingpanelen aan.
Upload eerst de broncode:
vConsole
Een lichtgewicht, schaalbaar front-end ontwikkelaarsdebuggingpaneel voor mobiele webpagina's.
- Controleer de consolelogs
- Bekijk netwerkverzoeken
- Kijk naar de structuur van de pagina-elementen
- Bekijk Cookies, localStorage en SessionStorage
- Voer handmatig de JS-commandoregel uit
- Aangepaste plugins
Adres:De hyperlink-login is zichtbaar.
Eruda
Eruda is een debuggingpaneel ontworpen voor de front-end van mobiele webpagina's, vergelijkbaar met een mini-versie van DevTools, met belangrijke functies zoals: het vastleggen van consolelogs, het controleren van de status van elementen, het vastleggen van XHR-verzoeken, het weergeven van lokale opslag- en cookie-informatie, en meer.
Knop slepen en neerzetten, instelling voor de grootte van de transparantie van het paneel.
- Consolepaneel: legt consolelogs, ondersteunend logboek, fout, info, waarschuw, dir, tijd/tijdEnd, clear, count, assert, table; Ondersteuning voor placeholders, inclusief %c custom style output; Ondersteuning van filtering op logtype en reguliere expressie; JavaScript-scriptuitvoering wordt ondersteund.
- Elementenpaneel: Bekijk taginhoud en eigenschappen; Bekijk hoe je app op de DOM staat; Ondersteuning voor het markeren van pagina-elementen; Ondersteun directe klik op het scherm; Bekijk de soorten gebeurtenissen die op de DOM zijn gebonden.
- Netwerkpaneel: Verzamel verzoeken en bekijk informatie zoals verzonden data, retourheaders en teruggestuurde inhoud.
- Bronnenpaneel: Bekijk en maak localStorage, sessionStorage en cookies schoon. Bekijk paginalaadscripts en stijlbestanden; Bekijk afbeeldingen van pagina laden.
- Bronnenpaneel: Bekijk de broncode van de pagina; Formatteer HTML-, CSS-, JS-code en JSON-gegevens.
- Infopaneel: output-URL en User Agent; Ondersteun aangepaste outputcontent.
- Fragmentenpaneel: randen toevoegen aan pagina-elementen; Voeg een tijdstempel toe om de pagina te verversen; Aangepaste codefragmenten worden ondersteund.
Adres:De hyperlink-login is zichtbaar. |
Geplaatst op 29-06-2020 15:36:20
|
|
|
|
Huisbaas|
Geplaatst op 08-02-2025 13:44:17
|
