Pro přístup na web na PC straně můžeme stisknout F12 a otevřít ladicí nástroj přes prohlížeč, abychom viděli výstupní záznamy, síťové požadavky, prvky webové stránky, cookies a další informace.
Když však vyvíjíme mobilní nebo mini programy a aplikace, objeví se abnormální problém a nemůžeme tyto abnormální informace přímo vidět. Tento článek doporučuje dva frontendové vývojářské ladicí panely.
Nejprve nahrajte zdrojový kód:
vConsole
Lehký, škálovatelný panel pro ladění pro mobilní webové stránky pro front-end vývojáře.
- Zkontrolujte záznamy konzole
- Zobrazit síťové požadavky
- Podívejte se na strukturu prvků stránky
- Podívejte se na Cookies, localStorage a SessionStorage
- Ručně spouštějte příkazový řádek JS
- Vlastní pluginy
Adresa:Přihlášení k hypertextovému odkazu je viditelné.
Eruda
Eruda je ladicí panel navržený pro rozhraní mobilních webových stránek, podobný mini verzi DevTools, s klíčovými funkcemi jako: zachycování konzolových logů, kontrola stavu prvků, zachycování požadavků XHR, zobrazení lokálního úložiště a informací o cookies a další.
Tlačítko táhnout a pouštět, nastavení velikosti průhlednosti panelu.
- Panel konzole: zaznamenává záznamy konzole, podporuje log, error, info, warn, dir, time/timeEnd, clear, count, assert, table; Podpora zástupných prvků, včetně výstupu %c custom style; Podpora filtrování podle typu logaritmu a regulárního výrazu; Je podporováno provádění JavaScriptových skriptů.
- Panel Elements: Zobrazit obsah a vlastnosti tagů; Podívejte se, jak se vaše aplikace styluje na DOM; Podpora zvýrazňování prvků stránky; Podpora přímého výběru na obrazovce; Zobrazit typy událostí vázaných na DOM.
- Síťový panel: Zachycování požadavků a zobrazení informací, jako jsou odeslaná data, vrácené hlavičky a vrácený obsah.
- Panel zdrojů: Zobrazit a vymažout localStorage, sessionStorage a cookies. Zobrazit skripty pro načítání stránek a stylové soubory; Zobrazit stránku načíst obrázky.
- Panel zdrojů: Zobrazit zdrojový kód stránky; Formátujte HTML, CSS, JS kód a JSON data.
- Informační panel: výstupní URL a User Agent; Podpora vlastního výstupního obsahu.
- Panel s úryvky: přidat okraje k stránkovým prvkům; Přidejte časové razítko pro obnovení stránky; Jsou podporovány vlastní útržky kódu.
Adresa:Přihlášení k hypertextovému odkazu je viditelné. |
Zveřejněno 29.06.2020 15:36:20
|
|
|
|
Pronajímatel