Problém s web stránkou
======================

Problém pri zobrazovaní internetovej stránky sa môže týkať celého webového portálu alebo len niektorej jeho časti.

Prvá pomoc
----------

Na začiatok je dobré vyskúšať nasledovné kroky, ktoré sa dajú zrealizovať pomerne rýchlo a pomocou nich je možné vylúčiť chybu na strane klienta:

#. Aktualizovať webový prehliadač.
#. Zavrieť všetky okná webového prehliadača a nanovo ich spustiť.
#. Vymazať Cookies a Cache (viď napr. `Windows 10 cache clearing <https://www.youtube.com/watch?v=H5YnJ3EEojo>`_).
#. Vyskúšať v prehliadači Inkognito režim.
#. Vyskúšať iný prehliadač.

Ak žiaden z uvedených krokov nepomohol, je potrebné zozbierať podklady a zadať úlohu na IT špecialistu. Obyčajné tvrdenia typu *stránka sa načítava pomaly* sú technicky málo výpovedné a vyriešenie problému neurýchlia.

Podklady pre zadanie úlohy
--------------------------

Čím detailnejšie sú vstupné podklady, tým väčšia je šanca odhaliť príčinu a následne vyriešiť problém:

#. Aký bol **presný čas** keď sa chyba objavila?
#. Aká bola **URL adresa** (napr. https://katasterportal.sk/index.html) webovej stránky, ktorá nefungovala a ako vyzerala chyba (**screenshot obrazovky**)? Prejavovala sa chyba na celom webovom portáli alebo iba v niektorej jeho časti?
#. Aký bol výstup príkazu **ping** v príkazovom riadku (napr. ``ping katasterportal.sk``)?
#. Aké bolo **zariadenie**, na ktorom sa chyba prejavovala (firemný notebook, súkromné zariadenie, mobil,…)?
#. **Kde** sa nachádzalo zariadenie, na ktorom sa chyba objavila (firma, domácnosť, hotel, letisko,…)?
#. Aký **webový prehliadač** a akej verzie bol použitý (Chrome, Edge, Firefox,…)?
#. Je možné chybu kedykoľvek navodiť alebo sa prejavuje **náhodne**?
#. Aký bol **login** používateľa, pod ktorým sa chyba prejavovala?
#. V prípade, že sa jednalo o portál na internete, aká bola **verejná IP adresa** klienta (v novej záložke prehliadača otvoriť https://testip.master.cz/)?

Objavil sa podobný problém aj iným ľuďom?

DevTools
--------

Úvod
~~~~

.. todo::
   Developer tools (`HAR <https://toolbox.googleapps.com/apps/har_analyzer/>`_)

V prípade, že sa webová stránka načítava pomaly (po kliknutí sa čaká viac ako **3 sekundy** kým sa objaví výsledok) alebo sa niektorá jej časť nenačítava vôbec, je na odhalenie príčiny ideálne použiť tzv. **DevTools**. Ide o nástroj, ktorý je štandardnou súčasťou webových prehliadačov (`Microsoft Edge <https://aka.ms/devtools-docs>`_, `Google Chrome <https://developer.chrome.com/docs/devtools/>`_, Mozilla Firefox). Takže nie je potrebné nič inštalovať. Stačí ho iba aktivovať.

DevTools umožňujú zaznamenať správanie webového prehliadača v čase keď sa problém prejavuje a tento záznam poskytnúť na neskoršiu analýzu IT špecialistovi. Záznam zachytávajúci problém s webovou stránkou musí byť urobený **osobou u ktorej sa problém prejavuje**.

Najľahšie sa odhaľujú chyby, ktoré sa dajú spoľahlivo navodiť, najťažšie tie, ktoré sa objavujú náhodne (*raz to ide, raz to nejde*).

Zber dát o chybe
~~~~~~~~~~~~~~~~

.. warning::
   Použitie DevTools zaznamenáva všetky údaje, ktoré sa vymieňajú so sledovanou webovou stránkou. Môže ísť napr. o citlivé údaje o zákazníkoch, heslá, čísla kreditných kariet, cookies a pod. Dáta získané pomocou tohto nástroja je teda možné poskytnúť iba **dôveryhodným osobám**.

Tento návod popisuje zber dát pomocou DevTools v prehliadačoch **Microsoft Edge** a **Google Chrome**:

#. Pred začatím **zatvorte všetky záložky webového prehliadača**, v ktorých je otvorený problémový webový portál.
#. V novej záložke (alebo novom okne) webového prehliadača otvorte problémovú webovú stránku (napr. https://www.google.com/). Môže to byť stránka na internete alebo aj vo firme. Neotvárajte túto stránku vo viacerých záložkách/oknách naraz.
#. Súčasným stlačením kláves :kbd:`CTRL-SHIFT-i` vyvolajte DevTools:

   .. image:: img/devTools1.png
#. Kliknutím na tlačidlo **...** (tri bodky) a následne na **zvýraznenú ikonu** presuňte DevTools do spodnej časti okna:

   .. image:: img/devTools2.png
#. Zvoľte záložku **Network** ak nie je. Zafajknine voľby **Preserve Log** a **Disable cache** ak nie sú a uistite sa, že prebieha **nahrávanie** (ikona vo vnútri červeného rámčeka naľavo má červenú farbu):

   .. image:: img/devTools3.png
#. Vo webovom prehliadači vykonajte aktivity, ktoré vedú k prejaveniu sa **chyby**. Ideálne ak tento krok trvá menej ako **10 minút**. V opačnom prípade môže dôjsť k zozbieraniu tak veľkého množstva dát, že nebude v ľudských silách IT špecialistu, ktorý to bude neskôr analyzovať aby odhalil príčinu problému ("hľadanie ihly v kope sena"). V okamihu výskytu chyby si prosím poznačte **presný čas** kedy nastala. Tento časový údaj môže zásadne zefektívniť neskoršiu analýzu získaných dát.
#. **Vypnite nahrávanie** kliknutím na červeno zvýraznenú ikonu vľavo a potom **vyexportujte získané dáta** kliknutím na zvýraznenú šípku nadol (otvorí sa nové okno kde bude potrebné zadať meno súboru).

   .. image:: img/devTools4.png
#. **Dôveryhodnej osobe**, ktorá zabezpečí ďalšiu analýzu poskytnite nasledovné dáta:

   - **Vyexportovaný súbor**
   - **Presný čas** kedy sa chyba objavila
   - **Meno zariadenia**, na ktorom boli DevTools spustené (napr. noteXXXX, pcXXXX,...)
   - **Kde** sa dané zariadenie v čase spustenia DevTools nachádzalo (firma, doma, letisko,...).
   - **Názov účtu** (prihlásený používateľ), pod ktorým sa DevTools spúšťali (napr. benko_peter).
   - **Typ webového prehliadača** (Microsoft Edge alebo Google Chrome)

#. Stlačením klávesovej skratky :kbd:`CTRL-SHIFT-i` zavrite DevTools

Ak sa v priebehu dňa objaví problém viackrát, zopakujte celý postup viackrát. Bude tak k dispozícii viac podkladov.

.. `Inspect network activity <https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/>`_