Kde hledat chybu
Čtyři místa, kde se chyby objevují. Když víš, kam se podívat, ušetříš hodiny hádání.
13 minlekce 58/107
Po lekci umíš
- Umíš otevřít konzoli prohlížeče a přečíst, co v ní je
- Víš, kdy je chyba v prohlížeči a kdy na serveru
- Umíš sbírat důkazy místo hádání
Obsah lekce (6)
Chyba se objeví na jednom ze čtyř míst. Když víš, na kterém, máš půlku práce hotovou.
Čtyři místa
Prohlížeč – konzole
co se pokazilo u uživatele
Terminál – vývojový server
co se pokazilo při sestavování
Server – log
co se pokazilo při zpracování požadavku
Síť
co se poslalo a co přišlo zpátky
1. Konzole prohlížeče
Nejdůležitější místo pro všechno, co uživatel vidí. Otevřeš ji klávesou F12 (na macOS Cmd + Option + I) a přepneš se na záložku Console.
Co v ní hledat:
Červené řádky
Chyby. Tohle je to, co kopíruješ.
Žluté řádky
Varování. Většinou neškodná, občas napoví.
Nic
Konzole je prázdná? Pak chyba není v prohlížeči. Jdi o patro níž, na server.
Zkus to teď
Otevři si teď libovolnou svoji stránku, stiskni F12 a přepni se na Console. Podívej se, co tam je.
Když je prázdná, výborně. Když ne, máš první stopu ještě předtím, než jsi cokoliv hledal.
2. Terminál s vývojovým serverem
Okno, kde běží npm run dev. Když se něco pokazí při sestavování stránky, napíše se to sem.
npm run dev ✓ Ready in 1.2s
○ Compiling /produkty ...
⨯ ./src/components/produkt-karta.tsx:14:23
Type error: Property 'nazev' does not exist on type 'Produkt'.Tenhle výpis nechávej otevřený vedle prohlížeče. Ušetří ti to spoustu zmatku – když stránka nejde načíst, odpověď je tady.
3. Log serveru
Když aplikace běží na internetu, konzoli prohlížeče u uživatele nevidíš. Zato vidíš log na straně serveru: záznam o tom, co server dělal.
Kde ho najdeš, závisí na službě, kde je aplikace nasazená – bývá to sekce „Logs“ nebo „Runtime logs“. Podrobněji v lekci o nasazení, doméně a logu.
4. Síť
Záložka Network v nástrojích prohlížeče. Ukazuje každý požadavek, který stránka poslala, a odpověď, kterou dostala.
Sem jdeš, když se data nenačítají nebo se něco neuloží.
| Co uvidíš | Co to znamená |
|---|---|
| Zeleně, kód 200 | Požadavek prošel |
| Kód 401 nebo 403 | Chybí oprávnění nebo přihlášení |
| Kód 404 | Adresa neexistuje – překlep nebo špatná cesta |
| Kód 500 | Chyba na serveru. Odpověď hledej v logu serveru |
| Nic se neposlalo | Chyba je dřív – tlačítko nic nespustilo |
Sbírej důkazy, ne dojmy
Nejrychlejší cesta k opravě vede přes konkrétní informace.
Dojem
- „Formulář nefunguje.“
- „Je to nějaké rozbité.“
- „Někdy to jde a někdy ne.“
Důkaz
- „Po odeslání se nic nestane. V konzoli je červeně: [text]. V Network se neposlal žádný požadavek.“
- „Stránka /produkty je bílá. V terminálu je chyba na řádku 14.“
- „Funguje to, když jsem přihlášený. Bez přihlášení je odpověď 401.“
Pomoz mi najít chybu
Když víš, že něco nefunguje, ale nevíš proč.
Něco v mojí aplikaci nefunguje a potřebuju najít příčinu. Co vím: - Co jsem dělal: [KROKY] - Co jsem čekal: [OČEKÁVÁNÍ] - Co se stalo: [SKUTEČNOST] - Konzole prohlížeče: [TEXT NEBO „prázdná“] - Terminál: [TEXT NEBO „bez chyb“] - Záložka Network: [CO SE POSLALO A CO PŘIŠLO] Neopravuj nic hned. Nejdřív mi napiš tři nejpravděpodobnější příčiny, seřazené od nejpravděpodobnější, a u každé řekni, jak ji ověřit.
Ve svém projektu si schválně vyrob chybu: nech Clauda někam přidat řádek, který spadne (třeba čtení vlastnosti z prázdné hodnoty).
Pak si projdi všechna čtyři místa a zjisti, na kterém z nich se chyba objevila. Nakonec ji nech opravit.
Tohle cvičení je nejlepší investice celého modulu – až přijde skutečná chyba, budeš vědět, kam se dívat.
Co si odnést
- Čtyři místa: konzole prohlížeče, terminál, log serveru, záložka Network.
- Prázdná konzole je taky informace: chyba není v prohlížeči.
- Kódy 401, 404 a 500 ti řeknou, kde přesně se to pokazilo.
- Sbírej důkazy, ne dojmy. Popis „co jsem čekal / co se stalo“ je základ.
Máš to za sebou?
Označ lekci jako hotovou, ať víš, kde jsi skončil. Nic se tím neuzamkne.
Další lekceJak chybu popsat, aby šla opravitObsah aktualizován: 21. srpna 2026