În acest ghid vei afla cum poți folosi Chrome Developer Tools pentru a personaliza stilurile și scripturile fără a face modificări în codul original. Se arată cum poți realiza teste extinse și ajustări pe site-ul tău cu ajutorul Overrides și a Workspace-ului din Chrome, fără a fi nevoie să atingi fișierul original de pe server.
Cele mai importante informații
- Cu Overrides poți să-ți suprascrii fișierele local pentru a face teste și ajustări.
- Workspace-ul îți permite să conectezi folderul tău de dezvoltare local cu Chrome Developer Tools pentru a face modificări directe.
- Aceste două funcții sunt extrem de utile pentru a depana probleme în mediu de producție, fără a afecta codul original de pe server.
Pașii pe scurt
Pentru a folosi eficient Chrome Developer Tools, urmează acești pași:
1. Utilizarea Overrides
Mai întâi, dorim să folosim funcția Overrides din Chrome. Alege un fișier JavaScript, de exemplu main.js, care este încărcat de pe server.
Fă clic dreapta pe fișier și selectează "Override Content" din meniul contextual.
Se va deschide o fereastră de dialog în care poți selecta locația fișierului local. Asigură-te că ai creat deja o mapă în care vrei să pui fișierele de suprascriere.
Selectează mapa dorită și apasă pe „Select Folder”. Astfel se face legătura între fișierul original și fișierul tău local.
Acum trebuie să acorzi browserului accesul la această locație. Clic dreapta din nou pe meniul Overrides și asigură-te că permisiunea pentru accesul la mapa dorită este activată.
2. Crearea unui fișier local
Acum poți crea un fișier nou în mapa Overrides. Deschide fișierul și scrie, de exemplu, un script simplu alert() în el.
Poți să personalizezi conținutul așa cum îți dorești. Salvează fișierul și reîmprospătează pagina pentru a vedea că acum fereastra de alertă apare în locul fișierului încărcat inițial de pe server.
3. Verificarea activității de rețea
Pentru a te asigura că fișierul nu mai este încărcat de pe server, deschide fila Network din Developer Tools. Ar trebui să vezi că fișierul main.js acum nu mai este preluat de pe server, ci în loc de asta sunt folosite conținuturile suprapuse local.
Dacă dorești să adaugi mai multe Overrides sau să ștergi cele existente, mergi în zona Overrides, unde vezi lista cu toate Overrides-urile activate.
4. Lucrul cu Workspace-ul
Următorul pas este să inițiezi Workspace-ul. Aici poți lega folderul tău de dezvoltare local cu Developer Tools. Mergi la setările Developer Tools și caută opțiunea „Workspace”.
Selectează folderul în care se află proiectele tale. Chrome va avea nevoie și aici de permisiunea de a accesa această mapă, așa că asigură-te că ai oferit permisiunile corespunzătoare.
5. Modificări în cod
Acum poți lucra direct în spațiul de lucru. Deschide de exemplu fișierul tău main.js, fă modificările necesare și salvează fișierul. Codul va fi reîncărcat automat de pe server, iar tu vei putea vedea imediat cum modificările influențează site-ul tău.
6. Debugging în spațiul de lucru
Un avantaj practic al spațiului de lucru este că poți seta puncte de oprire pentru a-ți depana codul eficient. Setează puncte de oprire în liniile codului tău și reîncarcă pagina pentru a întrerupe execuția și a verifica starea curentă a variabilelor.
7. Avantaje și dezavantaje
Deși spațiul de lucru este util, mulți dezvoltatori recomandă să faci modificări direct într-un editor de cod cum ar fi Visual Studio Code și să salvezi fișierele acolo. Acest lucru te ajută să vezi mai clar care versiune a fișierelor este utilizată. În utilizarea spațiului de lucru poate apărea confuzie, mai ales atunci când legătura cu fișierele originale nu este clară.
Cu toate acestea, dacă modifici doar fișiere CSS simple sau cod netranspilat, spațiul de lucru poate fi o opțiune bună.
Rezumat
În acest ghid ai învățat cum poți lucra cu Overrides și spațiul de lucru în Chrome Developer Tools pentru a adapta stilurile și scripturile fără a atinge fișierul original de pe server. Cu Overrides poți face rapid modificări, în timp ce spațiul de lucru îți permite să lucrezi direct cu folderul tău de dezvoltare.
Întrebări frecvente
Pot folosi Overrides și pentru fișiere CSS?Da, poți folosi Overrides și pentru fișiere CSS. Pur și simplu selectezi fișierul CSS dorit și activezi Override-ul.
Cum dezactivez Overrides-urile?Îți poți dezactiva Overrides-urile mergând în Developer Tools la secțiunea Overrides și dezactivându-le sau ștergându-le de acolo.
Sunt restricții pentru spațiul de lucru?Da, uneori poate fi problematic să identifici spațiul de lucru corect, în special în cazul codului transpilat.
De ce ar trebui să folosesc Overrides în locul spațiului de lucru?Overrides oferă o modalitate mai clară de a face modificările fără a te confunda cu diferite versiuni ale fișierelor. Ele sunt adesea mai ușor de gestionat dacă nu dorești să modifici direct fișierele originale.
