Categorii
Programare

Mică tehnică de depanare ușoară de TypeScript în Chromium DevTools

Eu folosesc Chromium pentru lucru, nu Chrome. Motivul este că Chromium este OSS. Dar ar trebui să funcționeze cele spuse mai jos și la Google Chrome.

Suportul pentru TypeScript în DevTools este limitat la source maps (cele existente și pentru SCSS), dar ele nu sunt, în formatul prezent disponibile pentru o depanare TypeScript cel puțin la fel de bună ca a JavaScript din unele privințe.

Mă refer la cutiuța de text informativ. Ea apare deasupra unei variabile pentru a-i afișa conținutul și plutește până la un alt eveniment.

Deci, să presupunem că sunt în mijlocul unei sesiuni de depanare și am intrat în modul rupere, eventual am pus și step in, over, out, next etc. Dacă am un cod de felul acesta:

și duc mausul deasupra variabilei Categories, se comportă ca și cum ar fi un comentariu acolo, privind înspre reacția evenimentului mausului. Nu există mesaj informativ pentru Categories, deși în contextul în care se află depanarea, în scopul variabilei Categories, se află poziția de depanare.

Vedem în condiția clauzei condiționale if un lucru important. Este vorba de o instrucțiune relativ complexă care accesează mai multe variabile.

Putem evita această lipsă de informații, care se prelungește și în consola DevTools. Vom crea variabile sau constante temporare, fiecare pe rândul ei, deasupra condiției if. Apoi, restartând sesiunea de depanare (VS Code-ul, tab-ul, server-ul, browser-ul, în funcție de alți factori care și cum), DevTools astfel arată:

Nu ezitați să-mi scrieți comentarii, sugestii, idei, orice feedback!

Toate gândurile bune!