co hledáte?
při vytváření složité webové aplikace jste pravděpodobně narazili na skutečnost, že něco nefungovalo podle plánu. Strávili jste hodiny a hodiny hledáním chyby ve vašem kódu a poté na internetu hledáním pomoci s řešením problému. Abychom vám to usnadnili, v tomto článku vysvětlíme některé účinné techniky ladění webové aplikace, které výrazně snižují bolest při ladění a zkracují dobu detekce problémů.
konzole.log
nejprve běžně používaná konzola metody javascript.protokol. Do kódu můžete vložit metodu s danou proměnnou. Během provádění kódu aplikace vrátí hodnotu proměnných zadaných uvnitř metody v konzole. Toto je nejjednodušší způsob, jak zkontrolovat, zda program vrátí očekávanou hodnotu.
bohužel to není příliš účinná metoda ladění. Takový přístup t nám neumožňuje vidět průběh provádění kódu (pokud nevložíme konzolu.protokolujte každých několik řádků, ale pak bude množství dat vhozených do konzoly nečitelné a v kódu uděláme pouze nepořádek.) Dále vrací pouze předanou proměnnou za předpokladu, že aplikace při provádění kódu nevyhodí chybu.
Tip č. 1
pokud máte mnoho konzolí.logs dát název v řetězci a další proměnné, např., konzole.log (‚proměnná‘, proměnná).
Chrome DevTools (zdrojová karta)
efektivnější metodou pro ladění webové aplikace je použití Chrome DevTools a zdrojová karta. Než začneme ladit na kartě zdroj, musíme do černého boxu přidat node_modules. Toto pravidlo přidáváme tak, že při procházení zarážkami nám nezobrazuje soubory z externích balíčků, což ztěžuje ladění. Musíme otevřít Nastavení v prohlížeči Chrome → Blackbox → přidat vzory a pak tam napsat / node_modules.
když přidáte node_modules do černého boxu, můžeme přejít na kartu zdroj. Předpokládejme, že chcete v reálném čase sledovat proces vaší funkce a zkontrolovat výstupy. Stiskněte Ctrl + O na kartě zdroj a zadejte název zdrojového souboru. Poté vložte zarážky na řádky kódu, které Vás zajímají, vy a Vy můžete začít provádět proces v prohlížeči. Když řádky, které jste vybrali, začnou zpracovávat, prohlížeč zastaví provádění kódu. Podívejte se na snímek obrazovky níže.
jak vidíte, aktuální řádek kódu, kde se prohlížeč zastavil, má modré pozadí. Na pravé straně je bar, kde se nachází naše velitelské centrum. Zde je náš stručný úvod.
ovládací prvky
v horní části lišty máte sekci Ovládací prvky. Zaměřme se na klíčové prvky. První kontrola obnovení nás zavede k dalšímu označenému bodu zlomu v rámci prováděného kódu. Druhý kontrolní krok nad dalším voláním funkce nás zavede na další řádek prováděného kódu. Poslední kontrola deactivních zarážek deaktivuje vybrané zarážky. Je to užitečná kontrola, když máme vybráno mnoho zarážek, a chceme se vrátit k kliknutí na aplikaci na chvíli, aniž bychom se pozastavili v každém zarážce.
Scopes
máme sekci scopes níže. Máme několik typů rozsahů: místní (aktuálně prováděná funkce) a uzávěry v závislosti na rozsahu, ve kterém jsme (například rodič aktuálně prováděné funkce nebo komponenty). V každém z těchto oborů nám prohlížeč zobrazuje všechny proměnné, které se v nich vyskytují.
zarážky
Poslední diskutovanou částí jsou zarážky. Ukazuje, jaké zarážky a v jakých souborech jsou označeny. Pomocí zaškrtávacích políček je můžeme snadno deaktivovat a znovu aktivovat.
tipy č. 2-5
- pokud používáte neměnný.js ve vašem projektu nainstalujte neměnný.JS objekt Formatter plugin a aktivovat jej v nastavení prohlížeče. To výrazně zjednoduší ladění neměnných objektů.
- pokud nepoužíváte immutable.js ve vašem projektu a používáte Visual Studio kód jako IDE, důrazně doporučujeme instalaci a konfiguraci Debugger pro Chrome (VSC nemá neměnný.JS formátovací plugin). Zjednodušuje ladění ještě více a umožňuje rychlejší změny kódu.
- pokud karta zdroj nezobrazuje místní soubory, zkontrolujte mapu zdroje ve vašem projektu.
- když se prohlížeč zastaví na zarážce, máte přístup k proměnným také v konzole.
React Vývojářské nástroje
React Vývojářské nástroje jsou také užitečná řešení. Tyto nástroje vám umožní snadno zobrazit stromovou strukturu React ve vašem projektu, stavy a rekvizity v komponentě. Funkce vybrat prvek na stránce, který chcete zkontrolovat, je výkonná, zvláště když neznáte celý projekt. Pomůže vám najít komponentu, kterou potřebujete aktualizovat.
Tip č. 6
pokud používáte Vue.js, můžeš použít Vue.js devtools. Rozšíření má podobné funkce a přístup k vuex (ekvivalent redux v react).
Redux DevTools
pokud používáte Redux ve svém projektu, Redux DevTools je nutností. Takové řešení umožňuje sledovat plný tok akcí, změny stavu, užitečné zatížení a zobrazit aktuální úložiště po každé provedené akci. Pokud něco nefunguje tak, jak předpokládáme, a vše se v kódu zdá být v pořádku,stojí za to zvážit, jaké akce jsou odesílány, s jakým užitečným zatížením. Někdy existují jednoduché chyby, jako je kopírování konstanty z výše uvedené akce, přejmenování beze změny hodnoty a pak volání něčeho úplně jiného. Níže je gif zobrazující nejdůležitější funkce Redux DevTools.
Tip no. 7
pokud vaše aplikace spustí velký počet akcí, rozšíření nemusí fungovat správně kvůli nedostatečné paměti pro zpracování tolika akcí. Můžete se pokusit nakonfigurovat v možnostech rozšíření (v tomto případě možnost maxAge.)
Šumař
poslední nástroj, který bychom chtěli představit, je Šumař. Nástroj byl vytvořen pro správu síťového provozu. Je velmi užitečné, když máme nějaké výrobní chyby a nemůžeme zkopírovat výrobní data do nižšího prostředí, abychom mohli ladit lokálně. V takové situaci, abychom měli přístup k výrobním datům v místním prostředí, nastavíme provoz na kartě AutoResponder. Když stránku otevřete, namísto stahování souboru js ze serveru Fidler připojí náš lokálně vytvořený produkční soubor. Další ladění se provádí na kartě zdroj chrome Dev tools. Níže je snímek obrazovky s nastavením pro přesměrování provozu do místního souboru. Program také umožňuje falešné koncové body.
Tip č. 8
pokud chcete snadno a rychle vytvářet posměšky koncových bodů, můžete použít program mock moon.
shrnutí agilního ladění webové aplikace
pro mnohé z nás je proces ladění webové aplikace spojen s bolestem hlavy a dlouhými hodinami strávenými před počítačem. Tento proces však lze zkrátit a zpříjemnit, pokud máte správné nástroje a know-how k jejich použití. Často jsou na dosah ruky a zdarma. Sdíleli jsme s vámi nejdůležitější a užitečné nástroje, které denně používáme.