Když se stránka zasekne, otevřete DevTools a začněte ladit > 자유게시판

• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

Proč je ignorování focus stavů větší problém, než se zdá Druhý častý neduh, který vídám u vývojářských implementací, je absence viditelného focus stavu pro klávesovou navigaci. Když uživatel prochází stránku pomocí tabulátoru, potřebuje jasně vidět, kde se právě nachází. Mnoho týmů tento stav při kódování úplně vynechá, protože „na myši to funguje". To je ale zásadní chyba nejen z hlediska přístupnosti, ale i použitelnosti. Pro focus stav používejte vždy výrazný outline, ne pouze změnu barvy pozadí, která může být při některých barevných kombinacích špatně viditelná. Ideálně kombinujte barvu a tloušťku ohraničení, případně přidejte i stín.

Častým nešvarem je také nesprávné použití immutable operací. Redux vyžaduje, abyste stav nemodifikovali, ale vraceli nový objekt. Přitom se snadno stane, že zapomenete na spread operátor a náhodně změníte vnořený objekt. Výsledkem jsou skryté bugy, které se projeví až po čase a jen za určitých okolností. Vždy používejte rozšíření pole nebo objektu, případně knihovny pro immutable updates. A pokud řešíte složité vnořené struktury, zvažte, jestli by nebylo lepší stav normalizovat – ukládat data podle ID, ne jako hluboce zanořené objekty.

Na závěr si zapamatujte: verzování není jen o tom, že máte kód uložený v gitu. Je to o tom, že vytváříte bezpečné prostředí pro experimentování. Když budete mít čistou a aktuální větev, můžete se kdykoli vrátit k předchozímu stavu bez zbytečné paniky. Pravidelně větve odstraňujte, když už je nepotřebujete, a nikdy nenechávejte starou větev bez povšimnutí, protože se z ní může stát monstrum, které vám později zničí celý den.

Když narazíte na chybu, která se projeví až po interakci s uživatelem, využijte možnost pozastavit provádění kódu. V panelu Sources (nebo Debugger) nastavte breakpoint na řádku, kde se podezřelá funkce volá. Poté stránku znovu načtěte a interagujte s ní. Kód se zastaví přesně na daném místě a vy můžete procházet proměnné v panelu Scope. Podívejte se, jestli hodnoty odpovídají vašim očekáváním. Často se ukáže, že proměnná obsahuje undefined, i když jste čekali objekt nebo pole. Pokud potřebujete pokračovat řádek po řádku, použijte tlačítko „Step over" (přeskočit aktuální funkci) nebo „Step into" (vstoupit do ní). Nezapomeňte na „Step out", které vás vrátí na místo volání.

Když už konflikt nastane, neřešte ho silou. Většina lidí se snaží konflikt vyřešit tak, že vezme svou verzi kódu a tu druhou zahodí, nebo naopak. To je největší past. Místo toho si nejdřív přečtěte obě verze a zjistěte, co se v daném místě děje. Pokud si nejste jistí, jak kód funguje, podívejte se na commit message a na to, proč byla daná změna provedena. Často pomůže i to, že si konfliktní kód necháte zobrazit v diff nástroji, který zvýrazní rozdíly, a pak se rozhodnete, co je správné.

Typické chyby, na které breakpointy nestačí Někdy se problém neprojeví jako výjimka, ale jako nesprávné chování stránky – tlačítko nefunguje, nebo se obsah neaktualizuje. V takovém případě se vyplatí sledovat síťovou komunikaci. Otevřete panel Network a podívejte se na požadavky, které se odesílají. Často zjistíte, že se data odesílají na špatnou adresu, nebo že odpověď přichází ve formátu, se kterým kód neumí pracovat. Pokud pracujete s REST API, klikejte na jednotlivé požadavky a prohlédněte si jejich hlavičky a tělo odpovědi. Další častou pastí je asynchronní kód – funkce s klíčovým slovem async, nebo použití setTimeout. Zde pomáhá dočasně přidat do kódu příkaz console.log na začátek a konec dané funkce. Zjistíte tak, zda se kód vůbec spustí, a v jakém pořadí se jednotlivé části vykonávají.

Každý JavaScriptový kód čas od času selže. Nejčastější chybou bývá špatně zapsaná proměnná, nesprávný datový typ nebo zapomenutá čárka. Než začnete cokoli opravovat, otevřete si vývojářské nástroje. V prohlížeči Chrome i Firefoxu je otevřete klávesou F12, případně pravým tlačítkem myši na stránce a volbou „Prozkoumat". Na panelu Console se vám zobrazí nejen chybová hlášení, ale i varování a logy, které jste si sami přidali. Všímejte si čísla řádku a názvu souboru, které jsou součástí hlášení – to je první vodítko, kde hledat problém.

Když do React aplikace přidáte Redux, často si myslíte, že hlavní je mít store a nějaké akce. Ale největší problém nebývá na začátku, nýbrž ve chvíli, kdy aplikace rekonstrukce koupelny krok za krokemčne růst. Typická chyba? Ukládání všeho do jednoho obřího stavu. Komponenta, která potřebuje jen jedno číslo, se znovu vykresluje při každé změně úplně jiné části stromu. Řešení přitom není složité: selektory. Místo toho, abyste v komponentě četli celý objekt a vybírali z něj data, použijte vytvořenou funkci, která vrátí jen potřebnou hodnotu. Tím zaručíte, že se komponenta překreslí jen tehdy, když se skutečně změní relevantní část stavu, ne při každém novém dispatchnutí.

If you liked this article and you would like to receive more info with regards to https://wiki.man-noir.Com/ i implore you to visit our own web site.