Debugging-ul aplicațiilor client cu ajutorul Source Map-urilor

Debugging-ul aplicațiilor client a devenit mult mai simplu odată cu apariția Source Map-urilor, mai ales dacă lucrăm cu diverse pre-procesoare de cod. Despre ce sunt Source Map-urile, cum funcționează și cum pot fi generate, discutăm în articolul de azi.

Problema

Să luăm ca și exemplu un pre-procesor CSS, cum ar fi SASS. Considerăm că avem 2 fișiere sursă (source1.scss și source2.scss) care sunt compilate, combinate și minifiate într-un singur fișier style.css, pe care-l vom include în documentul nostru index.html.

├── index.html
└── styles
    ├── style.css
    ├── source1.scss
    └── source2.scss

Problema apare în momentul în care vom folosi un inspector din browser pentru a vedea ce stiluri CSS se aplică pe un anumit element. Vom observa că toate stilurile provin din fișierul compilat style.css. Fără a căuta manual printre surse, nu vom putea afla ușor și cu exactitate de unde exact provin stilurile aplicate.

Acest aspect devine o problemă în momentul în care avem de-a face cu o structură complexă de fișiere, deoarece vom ajunge să pierdem foarte mult timp „căutând sursa”.

Ce sunt Source Map-urile?

Traducerea mot-a-mot explică exact menirea lor: o „hartă către sursă”.

Mai exact, sunt o translație, o mapare între un fișier compilat și sursele sale. Cu ajutorul lor, vom putea utiliza în continuare fișierele compilate, dar vom vizualiza în inspector ca și cum „am include direct fișierele sursă”, ceea ce este practic imposibil, deoarece un browser nu are capacitatea de a interpreta fișiere .less, .scss, .coffee, etc.

Printre tipurile de surse care suportă Source Map-uri se află:

• SASS (din versiunea 3.3.0, care este în pre-release la momentul scrierii articolului);
• LESS (din versiunea 1.5.0);
• CoffeeScript (din versiunea 1.6.1);
• TypeScript (din versiunea 0.8.1);
• JavaScript (cu ajutorul diverselor compilatoare: UglifyJS, Jsmin, Closure Compiler, etc).

Fișiere concatenate

Partea foarte utilă este că un Source Map poate traduce și un fișier compilat sau concatenat din surse multiple, similar cu un scenariu de producție, așadar nu este necesară generarea unui mark-up special pentru development sau pentru producție.

Acest aspect este foarte util în aplicații client, unde nu este la îndemână generarea mark-up-ului în funcție de environment.

Fișiere minifiate

Mai mult decât atât, Source Map-urile sunt suficient de „deștepte” pentru a lucra și cu fișiere minifiate.

Așadar, avem nevoie de un singur build în aplicațiile client, cu fișiere compilate, concatenate și minifiate, iar cu ajutorul Source Map-urilor aferente putem face debugging în stadiul de dezvoltare, ca și cum resursele noastre ar fi necompilate, neconcatenate și neminifiate.

Pentru producție este suficient să se recompileze resursele fără generarea de Source Map-uri.

Suportul în browsere

În primul rând, avem nevoie ca și browserul pe care îl utilizăm să fie capabil să interpreteze aceste Source Map-uri.

Chrome a fost primul browser care a inclus suport pentru Source Map-uri, iar în momentul de față suportul este activat implicit.

Pentru a activa/dezactiva suportul, efectuați următorii pași:

1. F12 (deschidere Dev Tools)
2. Settings
3. General -> Sources -> Enable JS/CSS source maps

Firefox a introdus suportul pentru Source Map-uri în versiunea 23, și este de asemenea activată implicit. Neajunsul este că sunt suportate doar pentru JavaScript, în tab-ul „Debugger”, nu și pentru CSS în tab-ul „Inspect”. De asemenea, Firebug nu suportă momentan Source Map-uri.

Pentru a activa/dezactiva suportul, efectuați următorii pași:

1. Ctrl+Chift+K sau Cmd+Option+K pentru Mac (deschidere Dev Tools);
2. Tab-ul „Debugger”;
3. Options;
4. Show original sources;

Internet Explorer în versiunea actuală (11) nu suportă deloc Source Map-uri.

Cum funcționează ele?

1. Fișierului compilat i se adaugă la final o linie de cod, inclusă într-un comentariu special, care specifică faptul că acest fișier are un Source Map aferent:

   /*# sourceMappingURL=style.css.map */

   NOTĂ: varianta inițială a tipului de comentariu a fost schimbată din cauza unui conflict cu comentariile pentru compilare condiționată particulare pentru Internet Explorer:

   // varianta veche
   /*@ ... */
   
   // varianta nouă
   /*# ... */
   

2. Browserul sesizează această linie de cod și caută fișierul „hartă” menționat;
3. Tot compilatorul generează și „harta” propriu-zisă, care constă într-un fișier cu extensia .map și care are la bază o structură JSON:

   {
       "version" : "3",
       "mappings": "AAAA,IAAK,GACJ,gBAAgB,ECAJ,OAAI;;ACDjB,IAAK,GACJ,KAAK,EDDS,OAAI",
       "sources" : ["source1.scss","source2.scss"],
       "file"    : "style.css"
   }

Putem recunoaște cu ușurință referințele către surse și către fișierul compilat. Browserul va citi sursele și pe baza mapării va putea face „traducerea” completă a fișierului compilat, către surse.

Ca și consecință, browser-ul nu va mai afișa fișierele compilate (ca și origine a stilurilor CSS), ci vom putea vedea exact sursele noastre SASS: numele fișierului sursă și numărul liniei de cod.

Cum le generăm?

Compilatoarele aferente fiecărui limbaj sunt capabile să și genereze Source Map-uri. În general, trebuie doar setat un flag pentru generarea Source Map-ului și eventual specificarea unor parametri opționali, legat de căile către fișierele sursă și destinație.

Pentru fișiere JavaScript concatenate și/sau minifiate, se pot utiliza diverse unelte, cum ar fi:

• UglifyJS;
• Jsmin;
• Closure Compiler etc.

Dacă utilizați o unealtă pentru automatizare, cum ar fi Grunt, este de asemenea posibil să generați Source Map-uri. Pachetele aferente au de asemenea suport pentru Source Map-uri.

Concluzii

Merită reținute câteva aspecte legate de Source Map-uri, indiferent dacă v-ați lovit sau nu de problema prezentată în acest articol legată de debugging:

• sunt foarte utile dacă lucrați cu pre-procesoare cum ar fi LESS, SASS, CoffeeScript, TypeScript, etc;
• sunt utile și dacă lucrați doar cu fișiere JavaScript, concatenate sau minifiate;
• devin aproape o necesitate în aplicații client, care comunică direct cu un API RESTful;
• reduc considerabil timpul de debugging;
• momentan, este de preferat să utilizați Chrome Dev Tools pentru debugging.

Credit foto: Lia Rădoi

Post-ul Debugging-ul aplicațiilor client cu ajutorul Source Map-urilor apare prima dată în Ctrl-D.