În acest ghid, îți voi oferi o perspectivă detaliată asupra utilizării Instrumentelor pentru Dezvoltatori de la Safari. Deși instrumentele pentru dezvoltatori din Safari prezintă unele diferențe în comparație cu cele din Chrome și Firefox, principiul de bază rămâne același. Vei învăța cum să activezi instrumentele pentru dezvoltatori, să folosești diferitele zone și funcții și să efectuezi procesele esențiale de Debugging. Hai să începem direct cu cele mai importante informații.
Informații cheie
- Instrumentele pentru dezvoltatori din Safari nu sunt la fel de ușor accesibile ca în alte browsere, deoarece trebuie activate din setările acestuia.
- Interfața și funcțiile instrumentelor pentru dezvoltatori sunt similare cu cele din alte browsere, cu toate că implementările specifice pot varia.
- Debugging-ul pe dispozitive iOS este posibil cu Safari, conectând dispozitivul prin USB.
Ghid pas cu pas
1. Activarea instrumentelor pentru dezvoltatori în Safari
Pentru a activa instrumentele pentru dezvoltatori în Safari, trebuie să ajustezi setările acestuia. Deschide Safari și mergi în bara de meniu. Alege „Safari” și apoi „Preferințe”.
Mută-te în fila „Avansat” din dreapta. Acolo vei găsi opțiunea „Afișare funcții dezvoltare pentru dezvoltatori web”. Activează această opțiune pentru a activa instrumentele pentru dezvoltatori.
2. Accesarea instrumentelor pentru dezvoltatori
Odată ce instrumentele pentru dezvoltatori sunt activate, le poți deschide din meniul „Dezvoltare” din bara de meniu sau printr-o anumită combinație de taste. Accesul direct prin tastele F12 sau Alt-Cmd-I nu funcționează, dar poți de exemplu da clic dreapta pe element și selecta „Examinează element”.
Poți folosi și combinația de taste Cmd+Option+C pentru a deschide consola și a naviga între diferite vizualizări.
3. Navigarea prin instrumentele pentru dezvoltatori
Interfața instrumentelor pentru dezvoltatori arată similar cu ceea ce ești obișnuit în alte browsere, dar are unele diferențe speciale. În bara laterală din stânga poți trece între filele „Elemente”, „Consolă”, „Surse”, „Rețea” și altele.
Aici poți învăța mai multe despre elementele de pe site pentru a le vizualiza și edita stilurile și aspectele lor. Poți edita fiecare stil dând simplu clic pe regulile CSS corespunzătoare.
4. Lucrul cu consola
Consola din Safari îți permite să rulezi cod JavaScript și să vezi rezultatele dorite. Un aspect interesant este că formatarea ieșirilor e diferită aici. Primul argument este afișat ca text, în timp ce toate argumentele ulterioare sunt reprezentate ca obiecte JavaScript.
Când afișezi mesaje de jurnalizare suplimentare, asigură-te că nu există spații libere între argumente, ci sunt separate prin liniuțe. Acest lucru ar putea fi important pentru a preveni neînțelegerile în timpul debugging-ului.
5. Setarea codului sursă și a breakpoint-urilor
În fila „Surse” poți vizualiza fișierele originale și transpilate ale site-ului tău. Este posibil aici și să setezi breakpoint-uri pentru a ușura procesul de debugging. Pur și simplu dă clic pe linia de cod corespunzătoare.
Nu uita să folosești și controalele diferite pentru a ușura navigarea prin cod. La Safari, scurtătura pentru a naviga este diferită; în loc, folosești simboluri specifice.
6. Realizarea analizelor de rețea
Fila „Rețea” îți oferă informații extinse despre toate cererile pe care site-ul tău le face în timpul încărcării sale. Aici vei vedea cererile trimise și primite, precum și anteturile și previzualizările lor.
O funcție interesantă aici este diferențierea între headere și timpi, care îți oferă o mai mare înțelegere a performanței paginii tale.
7. Utilizarea măsurătorilor de performanță și a cronologiei
În fila „Cronologii” poți efectua analize extinse ale performanței și să faci înregistrări pentru a înțelege mai bine viteza și procesele de pe pagina ta.
Această funcție funcționează similar cu profilurile de performanță din alte browsere, însă ar trebui să te obișnuiești cu unele diferențe în prezentare și denumire.
8. Debugging pe dispozitive mobile
O caracteristică deosebită a uneltelor pentru dezvoltatori Safari este posibilitatea de a face debugare paginilor web de pe iPhone-ul sau iPad-ul tău. Conectează-ți dispozitivul prin USB și activează opțiunile de debugare corespunzătoare în setările dispozitivului.
Apoi mergi la meniul „Dezvoltare” și selectează dispozitivul tău conectat pentru a avea acces la ferestrele deschise și uneltele pentru dezvoltatori.
Sumar
În acest ghid detaliat ai învățat cum să activezi uneltele pentru dezvoltatori Safari, să folosești diferitele funcționalități și file și să faci debugare pe dispozitive mobile. Cele mai multe funcționalități sunt similare cu cele din alte browsere, însă există diferențe specifice, în special în ceea ce privește interfața și scurtăturile. Odată ce te obișnuiești, debugarea în Safari îți va veni cu ușurință.
Întrebări frecvente
Cum activez uneltele pentru dezvoltatori în Safari?Mergi în setările Safari la „Avansate” și activează opțiunea „Afișare funcții de dezvoltare pentru dezvoltatori web”.
Cum deschid consola în Safari?Poți deschide consola cu combinația de taste Cmd+Option+C sau prin clic pe „Inspectare element” în meniul contextual.
Care sunt diferențele în consola Safari față de cele din alte browsere?În Safari, primul argument este afișat ca text și următoarele ca obiecte JavaScript, fără spațiu între afișări.
Pot face debugare pe iPhone-ul meu cu Safari?Da, conectându-ți iPhone-ul prin USB și activând opțiunile de debugare, poți face debugare paginilor web pe iPhone-ul tău.
Există aceeași analiză de performanță în Safari ca în Chrome?Da, funcția de cronologie din Safari permite analize de performanță similare, însă prezentarea poate fi diferită.
