Cum se utilizează instrumentele pentru dezvoltatori de browser web

2024 Autor: Abigail Brown | [email protected]. Modificat ultima dată: 2024-01-07 19:06

Pe lângă majoritatea producătorilor de browsere care se concentrează pe utilizatorul obișnuit care dorește să navigheze pe web, aceștia se adresează și dezvoltatorilor web, designerilor și profesioniștilor în asigurarea calității care ajută la construirea aplicațiilor și site-urilor pe care acești utilizatori le accesează prin integrarea puternică. instrumente chiar în browserele în sine.

Au dispărut vremurile în care singurele instrumente de programare și testare găsite într-un browser vă permiteau să vizualizați codul sursă al unei pagini și nimic mai mult. Browserele de astăzi vă permit să faceți o scufundare mult mai profundă, făcând lucruri precum executarea și depanarea fragmentelor JavaScript, inspectarea și editarea elementelor DOM, monitorizarea traficului de rețea în timp real pe măsură ce aplicația sau pagina dvs. se încarcă pentru a identifica blocajele, analizând performanța CSS, asigurându-vă că codul dvs. este nu utilizați prea multă memorie sau prea multe cicluri CPU și multe altele.

Din perspectiva testării, puteți reproduce modul în care o aplicație sau o pagină web se va afișa în diferite browsere, precum și pe diferite dispozitive și platforme prin magia designului responsive și a simulatoarelor încorporate. Cea mai bună parte este că poți face toate acestea fără a fi nevoie să părăsești browserul!

Tutorialele de mai jos vă prezintă cum să accesați aceste instrumente pentru dezvoltatori în mai multe browsere web populare.

Google Chrome

Instrumentele pentru dezvoltatori Chrome vă permit să editați și să depanați codul, să auditați componente individuale pentru a expune problemele de performanță, să simulați diferite ecrane ale dispozitivului, inclusiv pe cele care rulează Android sau iOS și să efectuați câteva alte funcții utile.

1. Selectați meniul principal al Chrome, marcat cu trei linii orizontale și situat în colțul din dreapta sus al browserului.

2. Când apare meniul derulant, plasați cursorul mouse-ului peste opțiunea Mai multe instrumente.

   

3. Ar trebui să apară acum un submeniu. Selectați opțiunea etichetată Instrumente pentru dezvoltatori. De asemenea, puteți utiliza următoarea comandă rapidă de la tastatură în locul acestui element de meniu: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPȚIUNE) +COMANDĂ+I)

   

4. Interfața Instrumentelor pentru dezvoltatori Chrome ar trebui să fie afișată acum, așa cum se arată în acest exemplu de captură de ecran. În funcție de versiunea dvs. de Chrome, aspectul inițial pe care îl vedeți poate fi ușor diferit de cel prezentat aici. Centrul principal al instrumentelor pentru dezvoltatori, situat de obicei în partea de jos sau în partea dreaptă a ecranului, conține următoarele file.

5. Pe lângă aceste secțiuni, puteți accesa și următoarele instrumente prin pictograma >>, situată în dreapta Performanță filă.

   • Memorie: Monitorizați și înregistrați utilizarea memoriei pe o pagină web. Puteți vedea cât de greu este JavaScript de pe site-ul dvs.
   • Security: evidențiază probleme legate de certificat și alte probleme legate de securitate cu pagina sau aplicația activă.
   • Aplicație: inspectați resursele utilizate de o aplicație web. Obțineți o detaliere completă a ceea ce este utilizat.
   • Audit: oferă modalități de optimizare a timpului de încărcare a unei pagini sau a aplicației și a performanței generale.

   

6. Modul dispozitiv vă permite să vizualizați pagina activă într-un simulator care o redă aproape exact așa cum ar apărea pe unul dintre cele peste o duzină de dispozitive, inclusiv mai multe dispozitive Android bine-cunoscute și modele iOS, cum ar fi iPad, iPhone și Samsung Galaxy. De asemenea, vi se oferă posibilitatea de a emula rezoluții personalizate ale ecranului pentru a se potrivi nevoilor dvs. specifice de dezvoltare sau testare.

   Pentru a activa și dezactiva Modul dispozitiv, selectați pictograma de telefon mobil situată direct în stânga Elemente filă.

   

7. De asemenea, puteți personaliza aspectul instrumentelor dvs. de dezvoltator selectând mai întâi butonul de meniu reprezentat de trei puncte plasate vertical și situat în extrema dreaptă a filelor menționate mai sus.

   Din acest meniu derulant, puteți repoziționa andoarea, puteți afișa sau ascunde diferite instrumente, precum și să lansați elemente mai avansate, cum ar fi un inspector de dispozitiv. Veți descoperi că interfața instrumentelor de dezvoltare în sine este foarte personalizabilă prin intermediul setărilor găsite în această secțiune.

   

Mozilla Firefox

Secțiunea pentru dezvoltatori web a lui Firefox include instrumente pentru designeri, dezvoltatori și testeri deopotrivă, cum ar fi un editor de stil și un pipetă pentru direcționarea pixelilor.

1. Selectați meniul principal al Firefox, reprezentat de trei linii orizontale și situat în colțul din dreapta sus al ferestrei browserului.

2. Când apare meniul drop-down, selectați Dezvoltator web.

   

3. Meniul pentru dezvoltatori web ar trebui acum să fie afișat, care conține următoarele opțiuni. Veți observa că majoritatea elementelor de meniu au asociate comenzi rapide de la tastatură.

   • Toggle Tools: afișează sau ascunde interfața instrumentelor pentru dezvoltatori, poziționată de obicei în partea de jos a ferestrei browserului. Comandă rapidă de la tastatură: Mac OS X (ALT(OPȚIUNE)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Vă permite să inspectați și/sau să modificați codul CSS și HTML pe pagina activă, precum și pe un dispozitiv portabil prin depanare de la distanță. Comandă rapidă de la tastatură: Mac OS X (ALT(OPȚIUNE)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Consola web: vă permite să executați expresii JavaScript în pagina activă, precum și să examinați un set divers de date înregistrate, inclusiv avertismente de securitate, solicitări de rețea, mesaje CSS și multe altele. Comandă rapidă de la tastatură: Mac OS X (ALT(OPȚIUNE)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger vă permite să identificați și să remediați defectele prin setarea punctelor de întrerupere, inspectarea nodurilor DOM, sursele externe de box negru și multe altele. Ca și în cazul Inspectorului, această caracteristică acceptă și depanarea de la distanță. Comandă rapidă de la tastatură: Mac OS X (ALT(OPȚIUNE)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: vă permite să creați foi de stil noi și să le încorporați cu pagina web activă sau să editați foile existente și să testați modul în care modificările dvs. sunt afișate într-un browser cu un singur clic. Comandă rapidă de la tastatură: Mac OS X, Windows (SHIFT+F7)
   • Performanță: furnizează o detaliere a performanței rețelei paginii active, date privind frecvența cadrelor, timpul și starea de execuție JavaScript, intermiterea picturii și multe altele. Comandă rapidă de la tastatură: Mac OS X, Windows (SHIFT+F5)
   • Rețea: listează fiecare solicitare de rețea inițiată de browser împreună cu metoda corespunzătoare, domeniul de origine, tipul, dimensiunea și timpul scurs. Comandă rapidă de la tastatură: Mac OS X (ALT(OPȚIUNE)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: aruncați o privire la memoria cache și cookie-urile stocate de un site web. Comandă rapidă de la tastatură: (SHIFT+F9)
   • Bara de instrumente pentru dezvoltatori: Deschide un interpret interactiv de linie de comandă. Introduceți ajutor în interpret pentru o listă cu toate comenzile disponibile și sintaxa lor adecvată. Comandă rapidă de la tastatură: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Oferă posibilitatea de a crea și executa aplicații web printr-un dispozitiv real care rulează Firefox OS sau prin Firefox OS Simulator. Comandă rapidă de la tastatură: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: Oferă aceeași funcționalitate ca și Consola web (vezi mai sus). Cu toate acestea, toate datele returnate sunt pentru întreaga aplicație Firefox (inclusiv extensii și funcții la nivel de browser), spre deosebire de doar pagina web activă. Comandă rapidă de la tastatură: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Vizualizare responsive design: Vă permite să vizualizați instantaneu o pagină web în diferite rezoluții, aspecte și dimensiuni de ecran pentru a imita mai multe dispozitive, inclusiv tablete și smartphone-uri. Comandă rapidă de la tastatură: Mac OS X (ALT(OPȚIUNE)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Picura: afișează codul de culoare hexadecimal pentru pixelii selectați individual.
   • Scratchpad: Scratchpad vă permite să scrieți, editați, integrați și executați fragmente de cod JavaScript dintr-o fereastră pop-out Firefox. Deschideți un document JavaScript interactiv care vă permite să scrieți în cod și să-l testați pe un site web. Comandă rapidă de la tastatură: (SHIFT+F4)
   • Service Workers: Depanați aplicația dvs. web de către lucrătorii de servicii. Obțineți informații detaliate despre performanța și erorile acestora.
   • Sursa paginii: Instrumentul original pentru dezvoltatori bazat pe browser, această opțiune afișează pur și simplu codul sursă disponibil pentru pagina activă. Comandă rapidă de la tastatură: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Obțineți mai multe instrumente: deschide colecția Setul de instrumente pentru dezvoltatori web de pe site-ul oficial de suplimente Mozilla, cu aproximativ o duzină de extensii populare, cum ar fi ca Firebug și Greasemonkey.

   

Microsoft Edge/Internet Explorer

Denumit în mod obișnuit F12 Developer Tools, un omagiu adus comenzii rapide de la tastatură care a lansat interfața de la versiunile anterioare ale Internet Explorer, setul de instrumente de dezvoltare în IE11 și Microsoft Edge a parcurs un drum lung de la începuturi, oferind un grup foarte la îndemână de monitoare, depanatoare, emulatori și compilatoare din mers.

Microsoft nu mai acceptă Internet Explorer și vă recomandă să actualizați la noul browser Edge. Accesați site-ul lor pentru a descărca cea mai nouă versiune.

1. Selectați Mai multe acțiuni, reprezentate de trei puncte și situate în colțul din dreapta sus al ferestrei browserului.

   

2. Când apare meniul drop-down, selectați opțiunea etichetată Instrumente pentru dezvoltatori.

   

3. Interfața de dezvoltare ar trebui să fie afișată acum, de obicei în partea de jos a ferestrei browserului. Următoarele instrumente sunt disponibile, fiecare accesibilă făcând clic pe titlul filei respective sau folosind comanda rapidă de la tastatură însoțitoare.

   

   • DOM Explorer: Vă permite să editați foi de stil și HTML în pagina activă, redând rezultatele modificate pe măsură ce mergeți. Utilizează funcționalitatea IntelliSense pentru a completa codul automat, acolo unde este cazul. Comandă rapidă de la tastatură: (CTRL+1)
   • Console: oferă posibilitatea de a trimite informații de depanare, inclusiv contoare, cronometre, urme și mesaje personalizate printr-un API integrat. De asemenea, vă permite să injectați cod într-o pagină web activă și să modificați în timp real valorile atribuite variabilelor individuale. Comandă rapidă de la tastatură: (CTRL+2)
   • Debugger: Vă permite să setați puncte de întrerupere și să depanați codul în timp ce se execută, rând cu linie, dacă este necesar. Comandă rapidă de la tastatură: (CTRL+3)
   • Rețea: listează fiecare solicitare de rețea inițiată de browser în timpul încărcării și execuției paginii, inclusiv detaliile protocolului, tipul de conținut, utilizarea lățimii de bandă și multe altele. Comandă rapidă de la tastatură: (CTRL+4)
   • Performanță: Detaliază ratele de cadre, utilizarea procesorului și alte valori legate de performanță pentru a vă ajuta să accelerați timpul de încărcare a paginii și alte activități. Comandă rapidă de la tastatură: (CTRL+5)
   • Memorie: vă ajută să izolați și să corectați potențialele scurgeri de memorie pe pagina web curentă, afișând o cronologie de utilizare a memoriei împreună cu instantanee din diferite intervale de timp. Comandă rapidă de la tastatură: (CTRL+6)
   • Emulation: vă arată cum ar fi redată pagina activă în diferite rezoluții și dimensiuni de ecran, emulând smartphone-uri, tablete și alte dispozitive. De asemenea, oferă posibilitatea de a modifica agentul utilizator și orientarea paginii, precum și de a simula diferite geolocații introducând o latitudine și longitudine. Comandă rapidă de la tastatură: (CTRL+7)

4. Pentru a afișa Consola în timp ce în oricare dintre celel alte instrumente apăsați butonul pătrat cu un parantez drept în interior, situat în colțul din dreapta sus al interfeței instrumentelor de dezvoltare.

   

5. Pentru a deconecta interfața instrumentelor pentru dezvoltatori, astfel încât să devină o fereastră separată, selectați două dreptunghiuri în cascadă sau utilizați următoarea comandă rapidă de la tastatură: CTRL+P. Puteți plasa instrumentele înapoi în locația lor inițială apăsând a doua oară CTRL+P.

   

Apple Safari (numai pentru Mac)

Setul divers de instrumente de dezvoltare al Safari reflectă comunitatea mare de dezvoltatori care utilizează un Mac pentru nevoile lor de proiectare și programare. Pe lângă o consolă puternică și funcțiile tradiționale de înregistrare și depanare, sunt furnizate și un mod de design receptiv ușor de utilizat și un instrument pentru a crea propriile extensii de browser.

1. Selectați Safari din meniul browserului, situat în partea de sus a ecranului. Când apare meniul drop-down, selectați Preferințe. De asemenea, puteți utiliza următoarea comandă rapidă de la tastatură în locul acestui element de meniu: COMMAND+COMMA(,)

   

2. Interfața

   Safari Preferințe ar trebui să fie afișată acum, suprapunând fereastra browserului. Selectați pictograma Avansat, situată în extrema dreaptă a antetului.

   

3. Preferințele Avansate ar trebui să fie acum vizibile. În partea de jos a acestui ecran este o opțiune etichetată Afișați meniul Dezvoltare în bara de meniu, însoțită de o casetă de selectare. Dacă nu există nicio bifă afișată în casetă, dați clic pe ea o dată pentru a plasa una acolo.

   

4. Închide interfața Preferințe.

5. Acum ar trebui să observați o nouă opțiune în meniul browserului numită Dezvoltare, situată între Marcaje și Fereastra. Faceți clic pe acest element de meniu. Ar trebui să fie afișat acum un meniu derulant, care conține următoarele opțiuni.

   • Open Page With: Vă permite să deschideți pagina web activă într-unul dintre celel alte browsere instalate în prezent pe Mac.
   • User Agent: Vă permite să selectați dintre peste o duzină de valori predefinite ale agentului de utilizator, inclusiv mai multe versiuni de Chrome, Firefox și Internet Explorer, precum și să vă definiți propria personalitate șir.
   • Intrați în modul Design receptiv: redă pagina curentă așa cum ar apărea pe diferite dispozitive și la diferite rezoluții de ecran.
   • Show Web Inspector: lansează interfața principală pentru instrumentele de dezvoltare ale Safari, plasată de obicei în partea de jos a ecranului browserului și care conține următoarele secțiuni: Elemente, Rețea, Resurse, Cronologie, Depanator, Stocare, Consolă.
   • Show Error Console: lansează, de asemenea, interfața instrumentelor de dezvoltare, direct în fila Consolă care afișează erori, avertismente și alte căutări date de jurnal.
   • Afișați sursa paginii: deschide fila Resurse, care afișează codul sursă pentru pagina activă clasificată în funcție de document.
   • Afișați resursele paginii: îndeplinește aceeași funcție ca opțiunea Afișare sursa paginii.
   • Show Snippet Editor: deschide o fereastră nouă în care puteți introduce codul CSS și HTML, previzualizandu-i rezultatul din mers.
   • Show Extension Builder: oferă posibilitatea de a crea sau edita extensii Safari cu CSS, HTML și JavaScript.
   • Afișați înregistrarea cronologiei: deschide fila Cronologie și începe să afișeze solicitările de rețea, aspectul și informațiile de randare, precum și execuția JavaScript în timp real.
   • Empty Caches: Șterge întreaga memorie cache care este stocată în prezent pe hard disk.
   • Dezactivați memoria cache: Oprește stocarea în cache a Safari, astfel încât tot conținutul să fie preluat de pe server la fiecare încărcare a paginii.
   • Dezactivați imagini: împiedică redarea imaginilor pe toate paginile web.
   • Dezactivați stilurile: ignoră proprietățile CSS atunci când o pagină este încărcată.
   • Dezactivați JavaScript: restricționează execuția JavaScript pe toate paginile.
   • Dezactivați extensiile: interzice rularea tuturor extensiilor instalate în browser.
   • Dezactivați hack-urile specifice site-ului: dacă Safari a fost modificat pentru a gestiona în mod explicit problemele specifice paginii web active, această opțiune va bloca acele modificări, astfel încât pagina încărcătură așa cum ar fi avut înainte de introducerea acestor modificări.
   • Dezactivați restricțiile fișierelor locale: permite browserului să aibă acces la fișierele de pe discurile dvs. locale, o acțiune care este restricționată în mod prestabilit din motive de securitate.
   • Dezactivați restricțiile între origini: aceste restricții sunt aplicate în mod prestabilit pentru a preveni XSS și alte pericole potențiale. Cu toate acestea, adesea trebuie să fie dezactivate temporar în scopuri de dezvoltare.
   • Permite JavaScript din câmpul de căutare inteligentă: când este activat, oferă posibilitatea de a introduce adrese URL cu javascript: încorporat direct în bara de adrese.
   • Tratați certificatele SHA-1 ca fiind nesigure: certificatele SSL care utilizează algoritmul SHA-1 sunt considerate în general depășite și vulnerabile.