160 lines
5.6 KiB
Markdown
160 lines
5.6 KiB
Markdown
# JSON DevTools
|
||
|
||
Kompletný jednostránkový nástroj na prácu s JSON-om pri vývoji REST API.
|
||
Bez frameworkov, bez npm, bez build procesu a bez backendu.
|
||
|
||
**Formatter · Tree viewer · Diff · API Request builder · História**
|
||
|
||
---
|
||
|
||
## Ukážky
|
||
|
||
### Formatter — živá validácia a syntax highlighting
|
||
|
||
|
||
|
||
Vľavo vstup, vpravo zvýraznený výstup. Chyba vo vstupe sa zobrazí s presným
|
||
riadkom, stĺpcom a výrezom textu.
|
||
|
||
### Tree viewer — typy, počty položiek, JSONPath
|
||
|
||
|
||
|
||
Strom zobrazuje typ každej hodnoty (`string`, `number`, `boolean`, `null`) a počet
|
||
položiek objektov/polí (`{6}`, `[5]`). Každý uzol sa dá skopírovať ako **JSONPath**
|
||
alebo ako **konkrétna hodnota**.
|
||
|
||
### API Request builder — stav, trvanie, headers, odpoveď
|
||
|
||
|
||
|
||
Status, trvanie požiadavky, response headers a automaticky naformátovaná JSON
|
||
odpoveď. Pri chybe CORS sa zobrazí podrobné vysvetlenie príčiny.
|
||
|
||
---
|
||
|
||
## Spustenie
|
||
|
||
Aplikácia je čisto statická — otvorte **`src/index.html`** priamo v prehliadači
|
||
(dvojklikom) a všetko beží lokálne.
|
||
|
||
Voliteľne cez lokálny server (odporúčané, ak chcete testovať `fetch()` proti
|
||
API s CORS z `http://localhost`):
|
||
|
||
```bash
|
||
python -m http.server 8080 --directory src
|
||
# potom otvorte http://localhost:8080/
|
||
```
|
||
|
||
> Otvorenie cez `file://` funguje, ale prehliadač považuje pôvod stránky za `null`
|
||
> — časť API (hlavičky, CORS) môže byť obmedzená. Aplikácia v tom prípade zobrazí
|
||
> podrobné vysvetlenie.
|
||
|
||
---
|
||
|
||
## Štruktúra repozitára
|
||
|
||
```
|
||
JSONdevTools/
|
||
├── src/ # samotná aplikácia (jediný adresár, ktorý sa publikuje)
|
||
│ ├── index.html # štruktúra UI (5 panelov, ARIA role, modál skratiek)
|
||
│ ├── style.css # tmavý / svetlý motív, responzívne rozloženie, resizable panely
|
||
│ └── app.js # celá logika (vanilla ES6+), bez závislostí
|
||
├── tests/
|
||
│ └── logic.test.js # Node testy logiky (bez prehliadača)
|
||
├── docs/
|
||
│ ├── Screenshot-Formatter.png
|
||
│ ├── Screenshot-Tree.png
|
||
│ └── Screenshot-API-Request.png
|
||
├── AGENTS.md # projektové pravidlá pre AI agenty
|
||
├── LICENSE
|
||
└── README.md
|
||
```
|
||
|
||
---
|
||
|
||
## Nástroje
|
||
|
||
### 1. Formatter
|
||
* Vloženie JSON textu, načítanie súboru (tlačidlo alebo pretiahnutie myšou)
|
||
* Živá validácia s presnou hláškou chyby: **riadok, stĺpec, pozícia, výrez textu**
|
||
* Pretty print (2 medzery) / Minify
|
||
* Kopírovanie výsledku, stiahnutie `.json` súboru
|
||
* Syntax highlighting výstupu
|
||
|
||
### 2. Tree
|
||
* Rozbaľovanie / zbaľovanie uzlov, zobrazenie typov a počtu položiek (`{6}`, `[5]`)
|
||
* Vyhľadávanie v kľúčoch aj hodnotách, zvýraznenie zhôd, automatické rozbavenie
|
||
rodičov zhôd
|
||
* Kopírovanie **JSONPath** (`$.user.roles[1]`) a **konkrétnej hodnoty** uzla
|
||
* Ovládanie klávesnicou: `↑`/`↓` pohyb, `→`/`←` rozbaliť/zbaliť, `Enter`/`Space`
|
||
prepnúť, `C` kopírovať hodnotu, `P` kopírovať path
|
||
|
||
### 3. Diff
|
||
* Dva editory vedľa sebe (A = pôvodné, B = nové)
|
||
* Rekurzívne porovnanie vnorených objektov a polí
|
||
* Rozdiely: **pridané / odstránené / zmenené** (vrátane zmeny typu) s JSONPath
|
||
* Súhrnný počet rozdielov, kopírovanie výsledkov porovnania ako JSON
|
||
|
||
### 4. API Request
|
||
* Metódy `GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS`
|
||
* URL endpointu, query parametre, vlastné HTTP hlavičky
|
||
* Autentifikácia: Bearer token alebo Basic (`user:heslo`)
|
||
* JSON request body (s formátovaním / minifikovaním)
|
||
* `fetch()` s 30 s timeoutom, meranie trvania, zobrazenie HTTP statusu
|
||
* Response headers, automaticky naformátovaná JSON odpoveď, surový text pri
|
||
neplatnom JSON
|
||
* Detailné vysvetlenie **CORS** chýb (chýbajúca hlavička, preflight, `file://`,
|
||
DNS, proxy) s návrhmi riešenia
|
||
|
||
### 5. História
|
||
* Posledných **20 JSON dokumentov** a **20 API požiadaviek**
|
||
* Ukladá sa do `localStorage`
|
||
* Vymazanie jednotlivých záznamov aj celej historie
|
||
* **Citlivé údaje sa neukladajú**: hlavička `Authorization`, `Cookie`, `X-Api-Key`
|
||
sa z záznamu vymaže, tokeny žijú iba v pamäti stránky
|
||
|
||
---
|
||
|
||
## Klávesové skratky
|
||
|
||
| Skratka | Akcia |
|
||
|---|---|
|
||
| `Ctrl+Shift+F` | Pretty print |
|
||
| `Ctrl+Shift+M` | Minify |
|
||
| `Ctrl+Shift+C` | Kopírovať výstup |
|
||
| `Ctrl+Shift+O` | Otvoriť JSON súbor |
|
||
| `Ctrl+S` | Stiahnuť JSON súbor |
|
||
| `Ctrl+Enter` | Odoslať API požiadavku |
|
||
| `Ctrl+Shift+D` | Prepnuť motív |
|
||
| `Ctrl+Shift+K` | Focus na vyhľadávanie v strome |
|
||
| `Ctrl+Shift+X` | Vyčistiť aktuálny editor |
|
||
| `1` … `5` | Prepnutie nástroja (mimo textových polí) |
|
||
| `?` | Zoznam skratiek |
|
||
| `Esc` | Zavrieť okno / zrušiť vyhľadávanie |
|
||
|
||
Na macOS použite `Cmd` namiesto `Ctrl`.
|
||
|
||
---
|
||
|
||
## Príkazy
|
||
|
||
```bash
|
||
node tests/logic.test.js # testy logiky – 93 assertov, bez prehliadača
|
||
```
|
||
|
||
Testy nepoužívajú žiadny prehliadač ani externé závislosti: `app.js` sa načíta
|
||
do izolovaného `vm` kontextu s minimálnym DOM stubom a overuje sa diff algoritmus,
|
||
sanitizácia historie, cesty uzlov, syntax highlighting a konzistencia ID medzi
|
||
HTML a JavaScriptom.
|
||
|
||
---
|
||
|
||
## Bezpečnosť a súkromie
|
||
|
||
* Aplikácia je čisto statická — žiadne CDN, žiadne externé závislosti.
|
||
* Údaje sa nikam neposielajú, **okrem API požiadaviek, ktoré sám spustíte**
|
||
na URL, ktorú zadáte vy.
|
||
* Všetko (história, motív, šírky panelov) sa ukladá lokálne v `localStorage`.
|
||
* Pre zapnutie svetlého motívu jednorazovo cez URL: `src/index.html?theme=light`.
|