Päästäksemme sivustolle PC-puolella voimme painamalla F12 avataksemme virheenkorjaustyökalun selaimen kautta ja nähdä tuloslokit, verkkopyynnöt, verkkosivun elementit, evästeet ja muuta tietoa.
Kuitenkin, kun kehitämme mobiili- tai miniohjelmia ja sovelluksia, ilmenee epänormaali ongelma, emmekä voi suoraan nähdä poikkeavaa tietoa. Tässä artikkelissa suositellaan kahta käyttöliittymän kehittäjän virheenkorjauspaneelia.
Lataa ensin lähdekoodi:
vConsole
Kevyt, skaalautuva, käyttöliittymäkehittäjän debuggauspaneeli mobiilisivuille.
- Tarkista konsolin lokit
- Katso verkkopyynnöt
- Katso sivun elementtirakennetta
- Tutustu Cookies-, localStorage- ja SessionStorage-palveluihin
- Suorita JS-komentorivi manuaalisesti
- Mukautetut lisäosat
Osoite:Hyperlinkin kirjautuminen on näkyvissä.
eruda
Eruda on virheenkorjauspaneeli, joka on suunniteltu mobiilisivujen etupäähän, samankaltainen kuin DevToolsin miniversio, ja siinä on keskeisiä toimintoja kuten: konsolin lokien tallentaminen, elementtien tilan tarkistaminen, XHR-pyyntöjen tallentaminen, paikallisen tallennus- ja evästetietojen näyttäminen sekä paljon muuta.
Nappi vedä ja pudota, paneelin läpinäkyvyyskoon asetus.
- Konsolipaneeli: tallentaa konsolin lokit, tukilokit, error, info, warn, dir, time/timeEnd, clear, count, assert, table; Tuki paikkamerkeille, mukaan lukien %c custom style -tulostus; Tue suodatusta logaritityypin ja säännöllisen lausekkeen mukaan; JavaScript-skriptin suoritus on tuettu.
- Elementtipaneeli: Näytä tagien sisältö ja ominaisuudet; Katso, miten sovelluksesi tyyli toimii DOM:ssa; Tuki sivun elementtien korostamiseen; Tue suoran klikkauksen valintaa näytöllä; Katso DOM:iin sidottujen tapahtumien tyypit.
- Verkkopaneeli: Kerää pyyntöjä ja katso tietoja, kuten lähetettyjä tietoja, palautusotsikoita ja palautettua sisältöä.
- Resurssipaneeli: Katso ja tyhjennä localStorage, sessionStorage ja evästeet. Näytä sivun latausskriptit ja tyylitiedostot; Katso sivun lataa kuvat.
- Lähteiden paneeli: Katso sivun lähdekoodi; Muotoile HTML-, CSS-, JS-koodi ja JSON-data.
- Tietopaneeli: ulostulo-URL ja käyttäjäagentti; Tue mukautettua tulostussisältöä.
- Snippets-paneeli: lisää reunuksia sivun elementteihin; Lisää aikaleima sivun päivittämiseksi; Mukautetut koodipätkät ovat tuettuja.
Osoite:Hyperlinkin kirjautuminen on näkyvissä. |