Denna artikel är en spegelartikel om maskinöversättning, klicka här för att hoppa till originalartikeln.

Utsikt: 12186|Svar: 1

[Övrigt] [Front-end måste-ha] utvecklarens felsökningspanel

[Kopiera länk]
Publicerad på 2020-06-29 15:36:20 | | | |
För att komma åt webbplatsen på PC-sidan kan vi trycka på F12 för att öppna felsökningsverktyget via webbläsaren och se utdataloggar, nätverksförfrågningar, webbsideselement, cookies och annan information.

Men när vi utvecklar mobila eller miniprogram och appar uppstår ett onormalt problem, och vi kan inte direkt se den onormala informationen. Den här artikeln rekommenderar två front-end utvecklarfelsökningspaneler.

Ladda först upp källkoden:



vConsole

En lättviktig, skalbar, frontend-utvecklarfelsökningspanel för mobila webbsidor.

  • Kolla konsolloggarna
  • Visa nätverksförfrågningar
  • Titta på sidelementets struktur
  • Kolla in Cookies, localStorage och SessionStorage
  • Kör manuellt JS-kommandoraden
  • Anpassade plugins




Adress:Inloggningen med hyperlänken är synlig.

Eruda

Eruda är en felsökningspanel designad för frontend på mobila webbsidor, liknande en miniversion av DevTools, med nyckelfunktioner som: att fånga konsolloggar, kontrollera elementstatus, fånga XHR-förfrågningar, visa lokal lagring och cookieinformation med mera.

Knappdrag och släpp, inställning för panelens transparensstorlek.

  • Konsolpanel: fångar konsolloggar, stödlogg, fel, info, varning, dir, tid/tidEnd, rensa, räkna, aktivera, tabell; Stöd för platshållare, inklusive %c anpassad stil på utdata; Stöd filtrering efter logtyp och reguljärt uttryck; JavaScript-skriptexekvering stöds.
  • Elementpanel: Visa tagginnehåll och egenskaper; Se hur din app stylar på DOM; Stöd för att markera sidelement; Stöd direktklick på skärmen; Visa vilka typer av händelser som är bundna på DOM.
  • Nätverkspanel: Fånga upp förfrågningar och visa information såsom skickad data, returhuvuden och returnerat innehåll.
  • Resurspanel: Visa och rensa localStorage, sessionStorage och cookies. Visa sidladdningsskript och stilfiler; Visa bilder på att ladda sidan.
  • Källpanel: Visa sidans källkod; Formatera HTML-, CSS-, JS-kod och JSON-data.
  • Infopanel: utdata-URL och användaragent; Stöd anpassat utmatningsinnehåll.
  • Utdragspanel: lägg till kanter på sidelement; Lägg till en tidsstämpel för att uppdatera sidan; Anpassade kodutdrag stöds.



Adress:Inloggningen med hyperlänken är synlig.




Föregående:Ocelot-serien (1) ASP.NET Core Gateway i praktiken
Nästa:Angular 9-serien (10) bäddar in vconsole och eruda utvecklar-felsökningspaneler
 Hyresvärd| Publicerad på 2025-02-08 13:44:17 |
vconsole använder en CDN-metod för att inmata direkt

Friskrivning:
All programvara, programmeringsmaterial eller artiklar som publiceras av Code Farmer Network är endast för lärande- och forskningsändamål; Ovanstående innehåll får inte användas för kommersiella eller olagliga ändamål, annars kommer användarna att bära alla konsekvenser. Informationen på denna sida kommer från internet, och upphovsrättstvister har inget med denna sida att göra. Du måste helt radera ovanstående innehåll från din dator inom 24 timmar efter nedladdning. Om du gillar programmet, vänligen stöd äkta programvara, köp registrering och få bättre äkta tjänster. Om det finns något intrång, vänligen kontakta oss via e-post.

Mail To:help@itsvse.com