Cum se utilizează instrumentele pentru dezvoltatori de browser web



by

În plus față de majoritatea producătorilor de browsere care se concentrează pe utilizatorul obișnuit care caută 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 acei utilizatori le accesează prin integrarea unor instrumente puternice chiar în browsere. înșiși.

Au trecut 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 se încarcă pentru a identifica blocajele, analiza performanței CSS, asigurarea faptului că codul dvs. este nu folosesc prea multă memorie sau prea multe cicluri de CPU și multe altele.

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

Tutorialele de mai jos vă prezintă modul de accesare a acestor 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 componentele individuale pentru a expune probleme de performanță, să simulați diferite ecrane ale dispozitivului, inclusiv cele care rulează Android sau iOS și să efectuați câteva alte funcții utile.

  1. Selectați Chrome meniul principal, 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 Mai multe unelte opțiune.

  3. Acum ar trebui să apară un submeniu. Selectați opțiunea etichetată Instrumente de dezvoltare. 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 Chrome Developer Tools 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, de obicei situat fie în partea de jos, fie în partea dreaptă a ecranului, conține următoarele file.

  5. În plus față de aceste secțiuni, puteți accesa și următoarele instrumente prin intermediul >> pictogramă, situată în partea dreaptă a Performanţă tab.

    • Memorie: Monitorizați și înregistrați utilizarea memoriei pe o pagină web. Puteți vedea cât de greu este JavaScript pe site-ul dvs.
    • Securitate: Evidențiază problemele 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 defalcare completă a ceea ce este utilizat.
    • Audituri: Oferă modalități de optimizare a timpului de încărcare a unei pagini sau a unei aplicații și a performanței generale.

  6. Mod 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 modele cunoscute de Android și iOS, cum ar fi iPad, iPhone și Samsung Galaxy. De asemenea, vi se oferă posibilitatea de a emula rezoluții de ecran personalizate pentru a se potrivi nevoilor dvs. specifice de dezvoltare sau testare.

    A comuta Mod dispozitiv pornit și oprit, selectați pictograma telefonului mobil situat direct în stânga Elemente de tab.

  7. De asemenea, puteți personaliza aspectul instrumentelor de dezvoltator selectând mai întâi buton de meniu reprezentată de trei puncte amplasate vertical și situat în partea dreaptă a filei menționate mai sus.

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


Mozilla Firefox

Secțiunea pentru dezvoltatori web a Firefox include instrumente pentru designeri, dezvoltatori și testeri deopotrivă, cum ar fi un editor de stil și o picătură pentru vizualizarea pixelilor. 

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

  2. Când apare meniul derulant, selectați Web Developer.

  3. Platforma Meniul Dezvoltator web ar trebui să fie afișat acum, conținând următoarele opțiuni. Veți observa că majoritatea elementelor de meniu au comenzi rapide de la tastatură asociate.

    • Comutați instrumente: Afișează sau ascunde interfața instrumentelor pentru dezvoltatori, de obicei poziționată în partea de jos a ferestrei browserului. Comandă rapidă de la tastatură: Mac OS X (ALT (OPȚIUNE) + COMANDĂ + 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 la distanță. Comandă rapidă de la tastatură: Mac OS X (ALT (OPȚIUNE) + COMANDĂ + 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) + COMANDĂ + K), Windows (CTRL + SHIFT + K)
    • Debugger: Depanatorul JavaScript vă permite să identificați și să remediați defectele prin setarea punctelor de întrerupere, inspectarea nodurilor DOM, surse externe de box negru și multe altele. La fel ca în cazul Inspectorului, această caracteristică acceptă și depanarea la distanță. Comandă rapidă de la tastatură: Mac OS X (ALT (OPȚIUNE) + COMANDĂ + S), Windows (CTRL + SHIFT + S)
    • Editor de stil: 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 redate într-un browser cu un singur clic. Comandă rapidă de la tastatură: Mac OS X, Windows (SHIFT + F7)
    • Performanţă: Oferă o defalcare detaliată a performanței rețelei paginii active, a datelor cadrelor, a timpului și stării de execuție JavaScript, a intermitentului de vopsire ș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) + COMANDĂ + Q), Windows (CTRL + SHIFT + Q)
    • Inspector de depozitare: Aruncați o privire asupra cache-ului și cookie-urilor stocate de un site web. Comanda rapidă de la tastatură: (SHIFT + F9)
    • Bara de instrumente pentru dezvoltatori: Deschide un interpret interactiv de linie de comandă. introduce ajutor în interpret pentru o listă a tuturor comenzilor disponibile și a sintaxei corespunzătoare a acestora. 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 propriu-zis care rulează Firefox OS sau prin Firefox OS Simulator. Comandă rapidă de la tastatură: Mac OS X, Windows (SHIFT + F8)
    • Consola browserului: 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 + COMANDĂ + J), Windows (CTRL + SHIFT + J)
    • Vizualizare Responsive Design: Vă permite să vizualizați instantaneu o pagină web în diferite rezoluții, machete ș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) + COMANDĂ + M), Windows (CTRL + SHIFT + M)
    • Pipetă: Afișează codul hexagonal de culoare pentru pixeli selectați individual.
    • Carnet pentru notițe: Scratchpad vă permite să scrieți, să editați, să integrați și să executați fragmente de cod JavaScript dintr-o fereastră pop-out Firefox. Deschideți un document JavaScript interactiv care vă permite să scrieți cod și să-l testați pe un site web. Comanda rapidă de la tastatură: (SHIFT + F4)
    • Lucrători de servicii: Depanează lucrătorii din serviciile aplicației tale web. 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 (COMANDĂ + U), Windows (CTRL + U)
    • Obțineți mai multe instrumente: Deschide Caseta de instrumente pentru dezvoltatori web colecție pe site-ul oficial de programe de completare Mozilla, care conține aproximativ o duzină de extensii populare, cum ar fi Firebug și Greasemonkey.


Microsoft Edge / Internet Explorer

Denumit în mod obișnuit Instrumente pentru dezvoltatori F12, 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 util de monitoare, depanatoare, emulatoare și pe -compilatoare de zbor.

  1. Selectați Mai multe actiuni, reprezentată de trei puncte și situat în colțul din dreapta sus al ferestrei browserului.

  2. Când apare meniul derulant, 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. Sunt disponibile următoarele instrumente, fiecare accesibil făcând clic pe titlul filelor respective sau utilizând comanda rapidă de la tastatură.

    • 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 completarea automată a codului, acolo unde este cazul. Comanda rapidă de la tastatură: (CTRL + 1)
    • Consoleze: 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 valorile atribuite variabilelor individuale în timp real. Comanda rapidă de la tastatură: (CTRL + 2)
    • Debugger: Vă permite să setați puncte de întrerupere și să depanați codul în timp ce acesta se execută, rând cu rând, dacă este necesar. Comanda rapidă de la tastatură: (CTRL + 3)
    • Reţea: Listează fiecare solicitare de rețea inițiată de browser în timpul încărcării și executării paginii, inclusiv detalii de protocol, tip de conținut, utilizarea lățimii de bandă și multe altele. Comanda rapidă de la tastatură: (CTRL + 4)
    • Performanţă: Detalii rate de cadre, utilizarea procesorului și alte valori legate de performanță pentru a vă ajuta să accelerați timpul de încărcare a paginilor și alte activități Comanda 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 de la diferite intervale de timp. Comanda rapidă de la tastatură: (CTRL + 6)
    • Emulare: Vă arată cum s-ar reda 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 utilizatorului și orientarea paginii, precum și de a simula diferite geolocații introducând o latitudine și longitudine. Comanda rapidă de la tastatură: (CTRL + 7)

  4. Pentru a afișa Consoleze în timp ce în oricare dintre celelalte instrumente apăsați tasta buton pătrat cu o paranteză dreaptă în interiorul său, situată în colțul din dreapta sus al interfeței instrumentelor de dezvoltare.

  5. Pentru a debloca interfața instrumentelor dezvoltatorului 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 repune instrumentele în locația inițială apăsând CTRL + P a doua oară.


Apple Safari (numai pentru OS X)

Diverse seturi de instrumente de dezvoltare Safari reflectă marea comunitate de dezvoltatori care utilizează un Mac pentru nevoile lor de proiectare și programare. În plus față de o consolă puternică și funcții tradiționale de înregistrare și depanare, sunt furnizate și un mod de proiectare receptiv ușor de utilizat și un instrument pentru a crea propriile extensii de browser.

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

  2. Safari Preferințe interfața ar trebui să fie afișată acum, suprapunând fereastra browserului. Selectează Pictogramă avansată, situat în partea dreaptă a antetului.

  3. Platforma Avansat preferințele 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 apare nicio bifă în casetă, faceți clic pe ea o dată pentru a plasa una acolo.

  4. Inchide Preferințe interfață.

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

    • Deschideți pagina cu: Vă permite să deschideți pagina web activă într-unul dintre celelalte browsere instalate în prezent pe Mac.
    • Agentul utilizatorului: Vă permite să selectați dintre peste o duzină de valori de agent de utilizator predefinite, inclusiv mai multe versiuni de Chrome, Firefox și Internet Explorer, precum și să vă definiți propriul șir personalizat.
    • Intrați în modul de proiectare receptivă: Redă pagina curentă așa cum ar apărea pe diferite dispozitive și la rezoluții diferite ale ecranului.
    • Afișați inspectorul web: Lansează interfața principală pentru instrumentele de dezvoltare Safari, plasate de obicei în partea de jos a ecranului browserului și care conțin următoarele secțiuni: Elemente, rețea, resurse, cronologii, depanator, stocare, consolă.
    • Afișați Consola de erori: De asemenea, lansează interfața de instrumente de dezvoltare, direct la Fila Consolă care afișează erori, avertismente și alte date de jurnal căutabile.
    • Afișați sursa paginii: Deschide Fila Resurse, care afișează codul sursă pentru pagina activă clasificată de document.
    • Afișați resursele paginii: Efectuează aceeași funcție ca opțiunea Afișare sursă pagină.
    • Afișați Editorul de fragmente: Deschide o fereastră nouă în care puteți introduce codul CSS și HTML, previzualizând ieșirea din mers.
    • Afișați Generatorul de extensii: Oferă posibilitatea de a crea sau edita extensii Safari cu CSS, HTML și JavaScript.
    • Afișați înregistrarea cronologică: Deschide fila Cronici și începe să afișeze solicitările de rețea, aspectul și redarea informațiilor, precum și executarea JavaScript în timp real.
    • Cachete goale: Șterge întregul cache stocat în prezent pe hard disk.
    • Dezactivați cache-urile: Oprește Safari de la cache, astfel încât tot conținutul să fie preluat de pe server la fiecare încărcare a paginii.
    • Dezactivați imaginile: Împiedică redarea imaginilor pe toate paginile web.
    • Dezactivați stilurile: Ignoră proprietățile CSS la încărcarea unei pagini.
    • Dezactivați JavaScript: Restricționează executarea JavaScript pe toate paginile.
    • Dezactivați extensiile: Interzice rularea tuturor extensiilor instalate în browser.
    • Dezactivați Hacks-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 aceste modificări, astfel încât pagina să se încarce așa cum ar fi fost înainte de introducerea acestor modificări.
    • Dezactivați restricțiile de fișiere locale: Permite browserului să aibă acces la fișierele de pe discurile dvs. locale, acțiune care este restricționată implicit din motive de securitate.
    • Dezactivați restricțiile de origine încrucișată: Aceste restricții sunt puse în aplicare în mod implicit pentru a preveni XSS și alte pericole potențiale. Cu toate acestea, acestea trebuie deseori să fie dezactivate temporar în scopuri de dezvoltare.
    • Permiteți JavaScript din câmpul de căutare inteligentă: Când este activat, acesta oferă posibilitatea de a introduce adrese URL cu javascript: încorporat direct în bara de adrese.
    • Tratați certificatele SHA-1 ca nesigure: Certificatele SSL care utilizează algoritmul SHA-1 sunt considerate pe scară largă ca fiind învechite și vulnerabile.