Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: registrovany123 15. 08. 2024, 15:43:36
-
Když vyvíjím frontend ve Vue nebo v Reactu, tak chybové hlášky, které lze najít v konzoli prohlížeče při procházení frontendové aplikace, jsou často napsané tak, že nejde v kódu najít místo, kde chyba vznikla.
Důvod, proč to nejde v kódu nalézt, je ten, že kód je do prohlížeče poslán zkompilovaný, tzn. potom typická chybová hláška vypadá třeba takto:
index.js:6
Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
at input
at td
at tr
at tbody
at table
at details
at main
at Component (http://localhost:60000/static/js/main.chunk.js:15616:88)
at Route (http://localhost:60000/static/js/vendors~main.chunk.js:43137:29)
at Switch (http://localhost:60000/static/js/vendors~main.chunk.js:43306:29)
at Router (http://localhost:60000/static/js/vendors~main.chunk.js:42809:30)
at HashRouter (http://localhost:60000/static/js/vendors~main.chunk.js:42360:35)
at App (http://localhost:60000/static/js/main.chunk.js:82:97)
Načež jak asi tušíte, soubor "index.js:6" kam přesměruje browser když na hlášku vývojář klikne, odkazuje na onen zkompilovaný JS soubor a vývojář se nedozví nic.
Takže moje otázka je - dá se s tím vůbec něco dělat, abych se jako vývojář dozvěděl přesněji, kde je v kódu chyba? Co třeba nějak zapnout vývojářský režim a přimět NPM, aby ty soubory pro localhost nekompiloval?
-
tak pro vyvoj to neminifikuj, neuglyfikuj at se ti to dobre debuguje.
pripadne jsou online deminifikatory, deuglyfikatory, je to hnusnejsi, ale lepsi nez puvodni hnus.
-
S react ani vue nedelam, ale hledal bych neco co se jmenuje "source mapping" nebo "code mapping"...
V dev environmentu to potom muze ukazovat lepsi stacktracy a v sources tabu to bude ukazovat projektovy soubory tak ja jsou...
Myslim, ze mi to fungovalo pekne ve svelte.. . a snad i v reagentu
-
Při vývoji se buď do prohlížeče posílá nemimifikovaný kód (protože mimifikace zbytečně zabírá čas), nebo se používají sourcemapy, kde je mapování mezi mimifikovaným a původním kódem. Pokud vám to tak nefunguje, máte něco špatně nakonfigurované ve vašem projektu.
-
Nemal som čas vŕtať sa v tom úplne do hĺbky, ale sú rozdiely medzi Vite / esbuild / Create React App / ... Začal som projekt s CRA, musel som prejsť na esbuild. Rozdiely v chybových hláškach tam sú celkom značné.
Btw sú rozdiely aj v hot reloade - esbuild robí iba tupý refresh.
-
To je nejaky vtip?
Kdyz se VYVIJI ve Vue, tak ve VSCode s Volar extenzi a Vue dev pluginem do chrome je videt v hkaskach naprosto vsecko vcetne cisla radky v souboru kde vznikla chyba a moznost prochazet content Pinia store.
Pak se teprve udela produkcni build bez debuginfo.
Doporucul bych zacit na strankach Vue s odkazem Quick start.