Cum se utilizează Instrumentele pentru dezvoltatorii de browsere web

În plus față de majoritatea producătorilor de browsere care se concentrează pe utilizatorii de zi cu zi care doresc să navigheze pe Web, aceștia se ocupă și de dezvoltatorii Web, de designeri și de profesioniștii în domeniul calității care ajută la crearea aplicațiilor și site-urilor accesate de acești utilizatori prin integrarea instrumentelor puternice chiar în browsere înșiși.

Au dispărut zilele în care singurele instrumente de programare și testare găsite într-un browser v-au permis să vizualizați codul sursă al unei pagini și nimic mai mult. Browser-urile de astăzi vă permit să vă scufunda mult mai mult, făcând lucruri cum ar fi executarea și depanarea fragmentelor JavaScript, inspectarea și editarea elementelor DOM, monitorizarea traficului în timp real în timp ce aplicația sau pagina dvs. se încarcă pentru a identifica blocajele, analiza performanței CSS fără a utiliza prea multă memorie sau prea multe cicluri de CPU și multe altele. Din perspectiva testelor, puteți reproduce modul în care o aplicație sau o pagină Web 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ă vor ajuta să accesați aceste instrumente pentru dezvoltatori în mai multe browsere Web populare.

Google Chrome

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

1. Faceți clic pe butonul principal al meniului Chrome, marcat cu trei linii orizontale și situat în colțul din dreapta sus al browserului.
2. Când apare meniul drop-down, plasați cursorul mouse-ului peste Mai multe unelte opțiune.
3. Un submeniu ar trebui să apară acum. Selectați opțiunea etichetă 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ȚIONAL) + COMMAND + I )
4. Interfața Instrumente pentru dezvoltatori Chrome ar trebui afișată acum, după cum se arată în acest exemplu de ecran. În funcție de versiunea dvs. Chrome, aspectul inițial pe care îl vedeți poate fi ușor diferit de cel prezentat aici. Hubul principal al instrumentelor pentru dezvoltatori, aflat de obicei pe partea de jos sau pe partea dreaptă a ecranului, conține următoarele file.elemente: Oferă posibilitatea de a inspecta codurile CSS și HTML, precum și de a edita CSS în timp real, văzând efectele schimbărilor dvs. în timp real.Consolă: Consola JavaScript a Chrome permite introducerea directă a comenzii, precum și depanarea diagnosticului.surse: Vă permite să depanați codul JavaScript printr-o interfață grafică puternică.Reţea: Clasifică și afișează informații detaliate despre fiecare operație asociată aplicației sau paginii active, inclusiv antete complete de solicitare și răspuns, precum și valori avansate de sincronizare.Cronologie: Permite o analiză aprofundată a fiecărei activități care are loc în cadrul browserului, de îndată ce se inițiază o solicitare de încărcare a unei pagini sau a unei aplicații.
5. În plus față de aceste secțiuni, puteți accesa și următoarele instrumente prin >> pictograma, amplasată în partea dreaptă a ferestrei Cronologie tab.Profil: Întreruptă în Profilul CPU și Profil de profil secțiuni, oferă o utilizare cuprinzătoare a memoriei și timpul de execuție generală a aplicației sau paginii active.Securitate: Evidențiază problemele legate de certificat și alte probleme legate de securitate cu pagina sau aplicația activă.Resurse: Aici puteți inspecta modulele cookie, stocarea locală, memoria cache a aplicațiilor și alte surse de date locale utilizate de pagina Web sau de aplicația curentă.audituri: Oferă modalități de optimizare a duratei 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 face aproape exact așa cum ar apărea pe una dintre cele peste zece dispozitive, inclusiv mai multe bine cunoscute modele Android și 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 comuta Modul dispozitiv pornit și oprit, selectați pictograma telefonului mobil situat direct în stânga element tab.
7. De asemenea, puteți personaliza aspectul instrumentelor pentru dezvoltatori făcând clic pe butonul de meniu reprezentat de trei puncte amplasate vertical și situat pe extrema dreaptă a filelor menționate mai sus. Din acest meniu derulant, puteți repoziționa stația de andocare, puteți afișa sau ascunde diverse instrumente, precum și puteți lansa elemente mai avansate, cum ar fi un inspector de dispozitiv. Veți găsi că interfața cu unelte dev este foarte personalizabilă prin setările din această secțiune.

Mozilla Firefox

Secțiunea Web Developer de la Firefox include instrumente pentru designeri, dezvoltatori și testere, cum ar fi un editor de stil și un pixel-țintă eyedropper.

Lifewire Recomandat de lectură:Top 25 Greasemonkey și script-uri de utilizator Tampermonkey

1. Faceți clic pe butonul principal al meniului Firefox, reprezentat de trei linii orizontale și situat în colțul din dreapta sus al ferestrei browserului.
2. Când apare meniul derulant, selectați pictograma etichetă Dezvoltator . Dezvoltator web meniul trebuie 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 cu acestea.Toggle Tools: Afișează sau ascunde interfața cu uneltele pentru dezvoltatori, situată de obicei în partea de jos a ferestrei browserului. Comenzi rapide de la tastatură: Mac OS X ( ALT (OPȚIONAL) + COMMAND + I ), Windows ( CTRL + SHIFT + I )Inspector: Permite inspectarea și / sau optimizarea codurilor CSS și HTML pe pagina activă, precum și pe un dispozitiv portabil prin depanare la distanță. Comenzi rapide de la tastatură: Mac OS X ( ALT (OPȚIONAL) + 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. Comenzi rapide de la tastatură: Mac OS X ( ALT (OPȚIONAL) + COMMAND + K ), Windows ( CTRL + SHIFT + K )debugger: Debuggerul JavaScript vă permite să identificați și să remediați defectele prin setarea punctelor de întrerupere, inspectarea nodurilor DOM, a surselor externe de boxe negre și multe altele. Ca și în cazul Inspector , această funcție acceptă, de asemenea, depanare la distanță. Comenzi rapide de la tastatură: Mac OS X ( ALT (OPȚIONAL) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Editor de stil: Vă permite să creați foi de stil noi, să le includeți în pagina Web activă sau să modificați foile existente și să testați modul în care modificările dvs. sunt redate într-un browser cu un singur clic. Comenzi rapide de la tastatură: Mac OS X, Windows ( SHIFT + F7 )Performanţă: Oferă o defalcare detaliată a performanței rețelei active a paginii active, a datelor despre rata cadrelor, a timpului de executare a JavaScript și a stării, a vopselei intermitente și multe altele. Comenzi rapide 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 proveniență, tipul, dimensiunea și timpul scurs. Comenzi rapide de la tastatură: Mac OS X ( ALT (OPȚIONAL) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )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 lor corecte. Comenzi rapide de la tastatură: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Oferă posibilitatea de a crea și de a executa aplicații Web printr-un dispozitiv real care rulează sistemul de operare Firefox sau prin intermediul Simulatorului de sistem de operare Firefox. Comenzi rapide de la tastatură: Mac OS X, Windows ( SHIFT + F8 )Consola de browser: Oferă aceeași funcționalitate ca și Consola Web (Vezi deasupra). Cu toate acestea, toate datele returnate sunt pentru întreaga aplicație Firefox (inclusiv extensii și funcții la nivel de browser), spre deosebire de pagina Web activă. Comenzi rapide de la tastatură: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )Designul receptiv: Vă permite să vizualizați instantaneu o pagină Web cu rezoluții, layout-uri și dimensiuni diferite pentru a imita mai multe dispozitive, inclusiv tablete și smartphone-uri. Comenzi rapide de la tastatură: Mac OS X ( ALT (OPȚIONAL) + COMMAND + M ), Windows ( CTRL + SHIFT + M )Pipetă: Afișează codul de culoare hexagonal pentru pixelii selectați individual.Blocnotes: 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. Comenzi rapide de la tastatură: Mac OS X, Windows ( SHIFT + F4 )Sursa paginii: Instrumentul inițial de dezvoltatori bazat pe browser, această opțiune afișează pur și simplu codul sursă disponibil pentru pagina activă. Comenzi rapide de la tastatură: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Obțineți mai multe instrumente: Deschide Instrumentul pentru dezvoltatorii web colecție pe site-ul oficial Mozilla, care include aproximativ o duzină de extensii populare, cum ar fi Firebug și Greasemonkey.

Microsoft Edge / Internet Explorer

Se numește în mod obișnuit Instrumente de dezvoltare F12 , un omagiu la comanda rapidă de la tastatură care a lansat interfața, deoarece versiunile anterioare ale Internet Explorer, setul de instrumente dev în IE11 și Microsoft Edge a parcurs un drum lung de la începuturile sale, oferind un grup foarte util de monitoare, debugeri, emulatori și -compilerele de zbor.

1. Faceți clic pe Mai multe actiuni , reprezentat de trei puncte și situat în colțul din dreapta sus al ferestrei browserului. Când apare meniul drop-down, selectați opțiunea etichetă Instrumente de dezvoltare F12 . Așa cum am menționat deja, puteți accesa și instrumentele prin F12 Comanda rapidă de la tastatură.
2. 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 rubrica respectivă a filei sau utilizând comanda rapidă de la tastatură.DOM Explorer: Vă permite să editați foile de stil și HTML în pagina activă, redând rezultatele modificate pe măsură ce mergeți. Utilizează funcționalitatea IntelliSense pentru a completa automat codul, dacă este cazul. Comanda rapidă de la tastatură: (CTRL + 1) Consolă: 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 codul într-o pagină Web activă și să modificați în timp real valorile atribuite variabilelor individuale. 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ă, linia după linie, 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 detaliile protocolului, tipul de conținut, utilizarea lățimii de bandă și multe altele. Comanda rapidă de la tastatură: (CTRL + 4) Performanţă: Detalii ratele cadrelor, 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 scurgeri de memorie potențiale pe pagina web curentă prin afișarea unei cronologii a utilizării memoriei împreună cu instantanee din intervale de timp diferite. Comanda rapidă de la tastatură: (CTRL + 6) Emulare: Vă arată modul în care ar fi afișat pagina activă în diferite rezoluții și dimensiuni ale ecranului, emulând smartphone-uri, tablete și alte dispozitive. Oferă de asemenea posibilitatea de a modifica agentul utilizator și orientarea paginii, precum și de a simula diferite geolocații introducând o latitudine și longitudine. Comanda rapidă de la tastatură: (CTRL + 7)
3. Pentru a afișa Consolă în timp ce în oricare dintre celelalte instrumente faceți clic pe butonul pătrat cu un consola dreaptă în interiorul acestuia, situat în colțul din dreapta sus al interfeței instrumentelor de dezvoltare.
4. Pentru a deconecta, interfața cu instrumente pentru dezvoltatori, astfel încât să devină o fereastră separată, faceți clic pe butonul reprezentat de două dreptunghiuri cascadă sau utilizați următoarea comandă rapidă de la tastatură: CTRL + P . Puteți pune uneltele înapoi în locația lor originală apăsând CTRL + P a doua oara.

Apple Safari (numai OS X)

Uneltele Safari diverse dev reflectă o mare comunitate de dezvoltatori care utilizează un Mac pentru nevoile lor de proiectare și programare. În plus față de o consolă puternică și caracteristici tradiționale de înregistrare și depanare, sunt oferite de asemenea un mod de proiectare ușor de utilizat și un instrument pentru a crea propriile extensii de browser.

1. Click pe Safari din meniul browserului, situat în partea de sus a ecranului. Când apare meniul vertical, selectați Preferințe . De asemenea, puteți utiliza următoarea comandă rapidă de la tastatură în locul acestui element de meniu: COMANDĂ + COMMA (,)
2. Safari Preferințe trebuie afișată acum interfața, suprapunând fereastra browserului. Faceți clic pe Avansat pictograma, situată în extrema dreaptă a antetului.
3. 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 din bara de meniu , însoțită de o casetă de bifare. Dacă în casetă nu apare nici un semn de selectare, faceți clic pe acesta o dată pentru a plasa unul acolo.
4. Inchide Preferințe făcând clic pe roșu "x" găsit în colțul din stânga sus.
5. Ar trebui să observați acum o nouă opțiune din meniul browserului numit Dezvolta , situat între Marcaje și Fereastră . Faceți clic pe acest element din meniu. În prezent, trebuie 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 din celelalte browsere instalate în prezent pe Mac.Agent utilizator: Vă permite să selectați din peste o duzină de valori predefinite ale agentului utilizator, inclusiv mai multe versiuni de Chrome, Firefox și Internet Explorer, precum și să definiți propriul șir personalizat.Introduceți 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 produs Safari dev, de obicei plasate în partea de jos a ecranului browserului și care conține următoarele secțiuni: element , Reţea , Resurse , Timelines , debugger , Depozitare , Consolă .Afișați Consola de eroare: De asemenea, lansează interfața cu instrumente dev, direct la Consolă care afișează erori, avertismente și alte date din jurnalul de căutare.Afișați sursa paginii: Deschide Resurse care afișează codul sursă pentru pagina activă clasificată după document.Afișați resursele paginii: Efectuează aceeași funcție ca și Afișați sursa paginii opțiune.Afișați Editorul de snippeturi: Deschide o nouă fereastră în care puteți introduce codul CSS și HTML, previzualizând ieșirea pe loc.Afișați Extensiu Builder: Oferă posibilitatea de a crea sau edita extensii Safari cu CSS, HTML și JavaScript.Afișați înregistrarea în timp: Deschide Timelines și începe să afișeze în timp real cereri de rețea, informații despre aspect și redare, precum și executarea JavaScript.Cache-uri goale: Șterge întregul memorie cache stocată pe hard disk.Dezactivați cache-urile: Oprește Safari din cache, astfel încât tot conținutul să fie recuperat de la server la încărcarea fiecărei pagini.Dezactivați imaginile: Împiedică redarea imaginilor pe toate paginile Web.Dezactivați stilurile: Ignoră proprietățile CSS când este încărcată o pagină.Dezactivați JavaScript: Restricționează executarea JavaScript pe toate paginile.Dezactivați extensiile: Interzice ca toate extensiile instalate să ruleze în cadrul browserului.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 aceste modificări astfel încât pagina să se încarce așa cum ar fi înainte de a fi introduse aceste modificări.Dezactivați restricțiile fișierelor locale: Permite browserului să aibă acces la fișiere de pe discurile dvs. locale, acțiune restricționată implicit din motive de securitate.Dezactivați restricțiile de origine: Aceste restricții sunt introduse în mod implicit pentru a preveni XSS și alte potențiale pericole. Cu toate acestea, adesea trebuie să fie temporar dezactivate în scopuri de dezvoltare.Permiteți JavaScript din câmpul Căutare inteligentă: Când este activată, oferă posibilitatea de a introduce adrese URL javascript: încorporat direct în bara de adrese.Tratați certificatele SHA-1 ca nesigure: Certificatele SSL care utilizează algoritmul SHA-1 sunt în general considerate a fi depășite și vulnerabile.