Seturi de instrumente integrate pentru designeri web, dezvoltatori și testeri
Î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.
- Faceți clic pe butonul principal al meniului Chrome, marcat cu trei linii orizontale și situat în colțul din dreapta sus al browserului.
- Când apare meniul drop-down, plasați cursorul mouse-ului peste opțiunea Mai multe instrumente .
- Un submeniu ar trebui să apară acum. Selectați opțiunea etichetate 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 + COMMAND + I )
- 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.
Consola: Consola JavaScript a Chrome permite introducerea directă a comenzii și diagnosticarea depanării.
Surse: vă permite să depanați codul JavaScript printr-o interfață grafică puternică.
Rețea: categorizează și afișează informații detaliate despre fiecare operație înrudită din aplicația sau pagina activă, inclusiv antetele complete de solicitare și de răspuns, precum și metrici avansate de sincronizare.
Cronologie: Permite analiza aprofundată a fiecărei activități care are loc în cadrul browserului imediat ce este inițiată o solicitare de încărcare a paginii sau a aplicației. - În plus față de aceste secțiuni, puteți accesa și următoarele instrumente prin intermediul pictogramei >> , situată în partea dreaptă a filei Cronologie .
Profil: Fragmentat în secțiunile Profiler CPU și Heap profiler , 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. - Modul Device 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 activa și a dezactiva Modul dispozitiv , selectați pictograma telefonului mobil aflat direct în stânga filei Elemente .
- 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.
Citirea recomandată: Scripturile de Top 25 Greasemonkey și Tampermonkey
- 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.
- Când apare meniul drop-down, selectați pictograma etichetă Dezvoltator . Acum trebuie afișat meniul Web Developer , care conține 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 dezvoltatorului, aflată de obicei î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ă optimizaț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 cadrul paginii active, 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: Debuggerul JavaScript vă permite să identificați și să remediați defectele prin setarea punctelor de întrerupere, inspectarea nodurilor DOM, a surselor externe din boxul negru și multe altele. Ca și în cazul inspectorului , această caracteristică permite, de asemenea, 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, 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. Comandă rapidă de la tastatură: Mac OS X, Windows ( SHIFT + F7 )
Performanță: Oferă o detaliere detaliată a performanței rețelei active a paginii active, a datelor despre rata cadrelor, a timpului și stării de executare a JavaScript, a vopselei intermitente și multe altele. Comandă rapidă de la tastatură: Mac OS X, Windows ( SHIFT + F5 )
Rețea: afișează fiecare solicitare de rețea inițiată de browser împreună cu metoda corespunzătoare, domeniul de origine, tipul, dimensiunea și timpul scurs. Comandă rapidă pentru tastatură: Mac OS X ( ALT (OPȚIUNE) + COMANDĂ + Q ), Windows ( CTRL + SHIFT + Q )
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 corespunzătoare. Comandă rapidă 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. Comandă rapidă de la tastatură: Mac OS X, Windows ( SHIFT + F8 )
Consola de browser: Oferă aceeași funcționalitate ca și Consola Web (a se vedea 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 pagina Web activă. Comandă rapidă de la tastatură: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Vizualizare de proiectare responsivă: vă permite să vizualizați instantaneu o pagină Web cu diferite rezoluții, layout-uri ș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 )
Picapopul: Afișează codul de culoare hexagonal pentru pixelii selectați individual.
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. Comandă rapidă de la tastatură: Mac OS X, Windows ( SHIFT + F4 )
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 colecția de instrumente Web Developer's Toolbox pe site - ul oficial Mozilla, care include aproximativ o duzină de extensii populare, cum ar fi Firebug și Greasemonkey.
Microsoft Edge / Internet Explorer
În mod obișnuit, numit F12 Developer Tools , un omagiu la comanda rapidă de la tastatură care a lansat interfața de la 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 monitoare, depanatoare, emulatori și compilatoare "on the-fly".
- Faceți clic pe meniul Mai multe acțiuni , 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ă F12 Developer Tools . După cum am menționat deja, puteți accesa și instrumentele prin intermediul comenzii rapide de la tastatură F12 .
- 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. Comenzi rapide de la tastatură: (CTRL + 1)
Consola: 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. Comenzi rapide de la tastatură: (CTRL + 2)
Debugger: Vă permite să setați puncte de întrerupere și să depanați codul în timp ce execută, linia după linie, dacă este necesar. Comandă rapidă de la tastatură: (CTRL + 3)
Rețea: afișează 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. Comenzi rapide de la tastatură: (CTRL + 4)
Performanță: Detalii ratele de cadre, utilizarea CPU și alte valori legate de performanță pentru a vă ajuta să accelerați timpul de încărcare a paginilor și alte activități. Comenzi rapide 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 de utilizare a memoriei împreună cu instantanee din intervale de timp diferite. Comandă 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, emulate 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. Comandă rapidă la tastatură: (CTRL + 7) - Pentru a afișa Consola în timp ce se află în oricare din celelalte instrumente, faceți clic pe butonul pătrat cu un consola dreaptă din interiorul acesteia, situat în colțul din dreapta sus al interfeței instrumentelor de dezvoltare.
- Pentru a deconecta interfața cu instrumente de dezvoltare, devine 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 plasa instrumentele înapoi în locația lor originală apăsând CTRL + P a doua oară.
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.
- Faceți clic pe 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 (,)
- Sa fie afișată interfața preferințelor Safari, suprapunând fereastra browserului. Faceți clic pe pictograma Avansat , situată în extrema dreaptă a antetului.
- Preferințele avansate ar trebui să fie acum vizibile. În partea de jos a acestui ecran este o opțiune etichetă Afișați meniul Dezvoltare din bara de meniu , însoțită de o casetă de selectare. Dacă în casetă nu apare nici un semn de selectare, faceți clic pe acesta o dată pentru a plasa unul acolo.
- Închideți interfața Preferințe făcând clic pe roșu "x" găsit în colțul din stânga sus.
- Acum ar trebui să observați o nouă opțiune în meniul browser numit Dezvoltare , 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.
Deschidere pagină cu: Vă permite să deschideți pagina Web activă într-unul din celelalte browsere instalate în prezent pe Mac.
Agent de utilizator: Vă permite să selectați din mai mult de o duzină de valori de agent predefinite, inclusiv mai multe versiuni ale Chrome, Firefox și Internet Explorer, precum și să definiți propriul șir personalizat.
Introduceți Mod de Design Responsabil : Redă pagina curentă așa cum ar apărea pe diverse dispozitive și la rezoluții diferite ale ecranului.
Afișați inspectorul Web: lansează interfața principală pentru instrumentele dev a lui Safari, de obicei plasate în partea de jos a ecranului browserului dvs. și conținând următoarele secțiuni: Elemente , Rețea , Resurse , Cronologie , Debugger , Depozitare , Consola .
Afișați Consola de eroare: lansează, de asemenea, interfața cu unelte dev, direct în fila Consola care afișează erori, avertismente și alte date din jurnalul căutărilor.
Afișați sursa paginii: Deschide fila Resurse , care afișează codul sursă pentru pagina activă clasificată după document.
Afișați resursele paginii: Efectuează aceeași funcție ca opțiunea Afișare sursă pagină .
Afișați editorul de snippeturi: Deschide o fereastră nouă în care puteți introduce codul CSS și HTML, previzualizând ieșirea pe loc.
Show Extension Builder: Oferă posibilitatea de a crea sau edita extensii Safari cu CSS, HTML și JavaScript.
Afișați înregistrarea în timp: Deschide fila Cronologie și începe să afișeze în timp real cereri de rețea, informații despre aspect și redare, precum și executarea JavaScript.
Empty Caches: Șterge întregul cache stocat în prezent pe hard disk.
Dezactivează cache-urile: oprește Safari-ul din cache, astfel încât tot conținutul să fie preluat de la server la încărcarea fiecărei pagini.
Dezactivează imaginile: Previne imaginile de la redare pe toate paginile Web.
Dezactivați stilurile: Ignoră proprietățile CSS când este încărcată o pagină.
Dezactivează JavaScript: Restricționează executarea JavaScript pe toate paginile.
Dezactivați extensiile: interzice tuturor extensiilor instalate să ruleze în browser.
Dezactivați hack-urile specifice site-urilor: 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 ca aceste modificări să fie introduse.
Dezactivați restricțiile fișierelor locale: Permite browserului să aibă acces la fișierele de pe discurile dvs. locale, acțiune restricționată implicit din motive de securitate.
Dezactivați restricțiile de origine transversală: aceste restricții sunt introduse în mod implicit pentru a preveni XSS și alte pericole potențiale. Cu toate acestea, adesea trebuie să fie temporar dezactivate în scopuri de dezvoltare.
Permiteți JavaScript din câmpul Căutare inteligentă: dacă este activat, 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 depășite și vulnerabile.