Kako koristiti alate za razvojne programere web preglednika

2024 Autor: Abigail Brown | [email protected]. Zadnja promjena: 2024-01-07 19:03

Osim većine proizvođača preglednika koji se usredotočuju na svakodnevne korisnike koji žele surfati webom, oni također opskrbljuju web programere, dizajnere i stručnjake za osiguranje kvalitete koji pomažu u izradi aplikacija i web stranica kojima ti korisnici pristupaju integriranjem moćnih alate izravno u same preglednike.

Prošli su dani kada su vam jedini alati za programiranje i testiranje unutar preglednika omogućavali pregled izvornog koda stranice i ništa više. Današnji vam preglednici omogućuju mnogo dublji zaron radeći stvari kao što su izvršavanje i otklanjanje pogrešaka JavaScript isječaka, pregledavanje i uređivanje DOM elemenata, praćenje mrežnog prometa u stvarnom vremenu dok se vaša aplikacija ili stranica učitava kako bi se identificirala uska grla, analiziranje performansi CSS-a, osiguravanje da je vaš kod ne koriste previše memorije ili previše CPU ciklusa, i još mnogo toga.

Iz perspektive testiranja, možete reproducirati kako će se aplikacija ili web stranica prikazati u različitim preglednicima, kao i na različitim uređajima i platformama kroz magiju responzivnog dizajna i ugrađenih simulatora. Najbolji dio je što sve ovo možete učiniti bez napuštanja preglednika!

Tutoriali u nastavku vode vas kroz pristup ovim alatima za razvojne programere u nekoliko popularnih web preglednika.

Google Chrome

Razvojni alati za Chrome omogućuju vam uređivanje i otklanjanje pogrešaka u kodu, reviziju pojedinačnih komponenti kako biste otkrili probleme s performansama, simulaciju različitih zaslona uređaja uključujući one s Androidom ili iOS-om i izvođenje nekoliko drugih korisnih funkcija.

1. Odaberite Chromeov glavni izbornik, označen s tri vodoravne crte i smješten u gornjem desnom kutu preglednika.

2. Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad opcije More tools.

   

3. Sada bi se trebao pojaviti podizbornik. Odaberite opciju s oznakom Developer tools. Također možete koristiti sljedeću tipkovničku prečicu umjesto ove stavke izbornika: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPCIJA) +NAREDBA+I)

   

4. Sada bi trebalo biti prikazano sučelje alata Chrome Developer Tools, kao što je prikazano na ovom primjeru snimke zaslona. Ovisno o vašoj verziji Chromea, početni izgled koji vidite može se malo razlikovati od ovdje predstavljenog. Glavno središte alata za razvojne programere, koje se obično nalazi na dnu ili na desnoj strani zaslona, sadrži sljedeće kartice.

5. Osim ovih odjeljaka, također možete pristupiti sljedećim alatima putem >> ikone, koja se nalazi desno od Performance tab.

   • Memory: Pratite i bilježite korištenje memorije na web stranici. Možete vidjeti koliko je težak JavaScript na vašoj stranici.
   • Sigurnost: Ističe probleme s certifikatom i druge sigurnosne probleme s aktivnom stranicom ili aplikacijom.
   • Application: Provjerite resurse koje koristi web aplikacija. Dobijte potpuni pregled onoga što se koristi.
   • Audits: Nudi načine za optimizaciju vremena učitavanja stranice ili aplikacije i opće performanse.

   

6. Device Mode omogućuje vam da vidite aktivnu stranicu u simulatoru koji je prikazuje gotovo točno onako kako bi izgledala na jednom od preko desetak uređaja, uključujući nekoliko dobro poznatih Androida i iOS modeli kao što su iPad, iPhone i Samsung Galaxy. Također imate mogućnost oponašanja prilagođenih razlučivosti zaslona kako bi odgovarale vašim specifičnim potrebama razvoja ili testiranja.

   Za uključivanje i isključivanje Device Mode odaberite ikonu mobilnog telefona koja se nalazi izravno lijevo od Elementi kartica.

   

7. Također možete prilagoditi izgled i dojam svojih razvojnih alata tako da prvo odaberete gumb izbornika predstavljen s tri okomito postavljene točke i nalazi se na krajnjoj desnoj strani gore navedenih kartica.

   Iz ovog padajućeg izbornika možete premjestiti dock, prikazati ili sakriti različite alate kao i pokrenuti naprednije stavke kao što je inspektor uređaja. Vidjet ćete da je samo sučelje razvojnih alata vrlo prilagodljivo pomoću postavki koje se nalaze u ovom odjeljku.

   

Mozilla Firefox

Firefoxov odjeljak za web programere uključuje alate za dizajnere, programere i testere, kao što su uređivač stilova i kapaljka za ciljanje piksela.

1. Odaberite Firefoxov glavni izbornik, predstavljen s tri vodoravne crte i smješten u gornjem desnom kutu prozora preglednika.

2. Kada se pojavi padajući izbornik, odaberite Web Developer.

   

3. Izbornik web programera sada bi trebao biti prikazan, sadržavajući sljedeće opcije. Primijetit ćete da većina stavki izbornika ima povezane prečace na tipkovnici.

   • Toggle Tools: Prikazuje ili skriva sučelje alata za razvojne programere, obično smješteno na dnu prozora preglednika. Tipkovnički prečac: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Omogućuje pregled i/ili podešavanje CSS i HTML koda na aktivnoj stranici kao i na prijenosnom uređaju putem daljinskog uklanjanja pogrešaka. Tipkovnički prečac: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web konzola: Omogućuje vam izvršavanje JavaScript izraza unutar aktivne stranice kao i pregled raznolikog skupa zabilježenih podataka uključujući sigurnosna upozorenja, mrežne zahtjeve, CSS poruke i više. Tipkovnički prečac: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger vam omogućuje da precizno odredite i popravite nedostatke postavljanjem prijelomnih točaka, pregledom DOM čvorova, crnim okvirom vanjskih izvora i još mnogo toga. Kao što je slučaj s Inspectorom, ova značajka također podržava daljinsko otklanjanje pogrešaka. Tipkovnički prečac: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Uređivač stilova: Omogućuje vam stvaranje novih listova stilova i njihovo uključivanje u aktivnu web stranicu ili uređivanje postojećih listova i testiranje kako se vaše promjene prikazuju u pregledniku samo jednim klikom. Tipkovnički prečac: Mac OS X, Windows (SHIFT+F7)
   • Performanse: Pruža detaljnu raščlambu mrežnih performansi aktivne stranice, podatke o broju sličica u sekundi, vrijeme i stanje izvršavanja JavaScripta, treptanje boje i još mnogo toga. Tipkovnički prečac: Mac OS X, Windows (SHIFT+F5)
   • Network: Navodi svaki mrežni zahtjev koji je pokrenuo preglednik zajedno s odgovarajućom metodom, izvornom domenom, vrstom, veličinom i proteklim vremenom. Tipkovnički prečac: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Inspektor pohrane: Pogledajte predmemoriju i kolačiće koje pohranjuje web mjesto. Tipkovnički prečac: (SHIFT+F9)
   • Alatna traka za programere: Otvara interaktivni tumač naredbenog retka. Unesite help u tumač za popis svih dostupnih naredbi i njihovu odgovarajuću sintaksu. Tipkovnički prečac: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Pruža mogućnost stvaranja i izvršavanja web aplikacija putem stvarnog uređaja koji pokreće Firefox OS ili putem Firefox OS Simulatora. Tipkovnički prečac: Mac OS X, Windows (SHIFT+F8)
   • Konzola preglednika: Pruža istu funkcionalnost kao Web konzola (vidi gore). Međutim, svi vraćeni podaci odnose se na cijelu Firefox aplikaciju (uključujući proširenja i funkcije na razini preglednika), a ne samo na aktivnu web stranicu. Tipkovnički prečac: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Prikaz responzivnog dizajna: Omogućuje vam trenutno pregledavanje web stranice u različitim rezolucijama, izgledima i veličinama zaslona kako biste oponašali više uređaja uključujući tablete i pametne telefone. Tipkovnički prečac: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Prikazuje heksadecimalni kod boje za pojedinačno odabrane piksele.
   • Scratchpad: Scratchpad vam omogućuje da pišete, uređujete, integrirate i izvršavate isječke JavaScript koda unutar iskačućeg Firefox prozora. Otvorite interaktivni JavaScript dokument koji vam omogućuje pisanje koda i testirajte ga na web stranici. Tipkovnički prečac: (SHIFT+F4)
   • Service Workers: Otklonite pogreške servisnih radnika vaše web aplikacije. Dobijte detaljne informacije o njihovoj izvedbi i pogreškama.
   • Izvor stranice: Izvorni razvojni alat temeljen na pregledniku, ova opcija jednostavno prikazuje dostupni izvorni kod za aktivnu stranicu. Tipkovnički prečac: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Get More Tools: Otvara kolekciju Web Developer's Toolbox na Mozillinoj službenoj stranici dodataka, koja sadrži desetak popularnih proširenja kao što su kao Firebug i Greasemonkey.

   

Microsoft Edge/Internet Explorer

Uobičajeno se naziva F12 Developer Tools, počast tipkovničkom prečacu koji je pokretao sučelje od ranijih verzija Internet Explorera, skupa razvojnih alata u IE11 i Microsoft Edgeu prešao je dug put od svog početka nudeći vrlo praktičnu grupu monitora, programa za ispravljanje pogrešaka, emulatora i kompilatora u hodu.

Microsoft više ne podržava Internet Explorer i preporučuje ažuriranje na noviji Edge preglednik. Idite na njihovu stranicu da preuzmete najnoviju verziju.

1. Odaberite Više radnji, predstavljeno s tri točkice i smješteno u gornjem desnom kutu prozora preglednika.

   

2. Kada se pojavi padajući izbornik, odaberite opciju s oznakom Alati za razvojne programere.

   

3. Razvojno sučelje sada bi trebalo biti prikazano, obično na dnu prozora preglednika. Dostupni su sljedeći alati, a svakom se može pristupiti klikom na odgovarajući naslov kartice ili korištenjem prateće tipkovničke prečice.

   

   • DOM Explorer: Omogućuje vam uređivanje stilova i HTML-a na aktivnoj stranici, prikazujući izmijenjene rezultate u hodu. Koristi funkciju IntelliSense za automatsko dovršavanje koda gdje je primjenjivo. Tipkovnički prečac: (CTRL+1)
   • Konzola: Pruža mogućnost podnošenja informacija o otklanjanju pogrešaka uključujući brojače, mjerače vremena, praćenja i prilagođene poruke putem integriranog API-ja. Također vam omogućuje umetanje koda u aktivnu web stranicu i izmjenu vrijednosti dodijeljenih pojedinačnim varijablama u stvarnom vremenu. Tipkovnički prečac: (CTRL+2)
   • Debugger: Omogućuje vam postavljanje prijelomnih točaka i otklanjanje pogrešaka u vašem kodu dok se izvršava, red po red ako je potrebno. Tipkovnički prečac: (CTRL+3)
   • Network: Navodi sve mrežne zahtjeve koje je pokrenuo preglednik tijekom učitavanja i izvođenja stranice, uključujući detalje protokola, vrstu sadržaja, korištenje propusnosti i još mnogo toga. Tipkovnički prečac: (CTRL+4)
   • Performanse: Detaljan broj sličica u sekundi, korištenje CPU-a i druge metrike povezane s izvedbom koje vam pomažu ubrzati vrijeme učitavanja stranice i druge aktivnosti. Tipkovnički prečac: (CTRL+5)
   • Memory: Pomaže vam izolirati i ispraviti potencijalno curenje memorije na trenutnoj web stranici prikazivanjem vremenske trake upotrebe memorije zajedno sa snimkama iz različitih vremenskih intervala. Tipkovnički prečac: (CTRL+6)
   • Emulacija: Pokazuje vam kako bi se aktivna stranica prikazala u različitim rezolucijama i veličinama zaslona, emulirajući pametne telefone, tablete i druge uređaje. Također pruža mogućnost izmjene korisničkog agenta i orijentacije stranice, kao i simulaciju različitih geolokacija unosom zemljopisne širine i dužine. Tipkovnički prečac: (CTRL+7)

4. Za prikaz Konzole dok unutar bilo kojeg drugog alata pritisnite kvadratni gumb s desnom zagradom unutar njega, koji se nalazi u gornjem desnom kutu sučelja razvojnih alata.

   

5. Da biste odvojili sučelje alata za razvojne programere tako da postane zaseban prozor, odaberite dva kaskadna pravokutnika ili upotrijebite sljedeći tipkovnički prečac: CTRL+P. Alate možete vratiti na njihovo izvorno mjesto pritiskom na CTRL+P po drugi put.

   

Apple Safari (samo Mac)

Safarijev raznolik skup razvojnih alata odražava veliku zajednicu programera koji koriste Mac za svoje potrebe dizajna i programiranja. Uz snažnu konzolu i tradicionalne značajke za bilježenje i otklanjanje pogrešaka, dostupan je i responzivni način dizajna jednostavan za korištenje i alat za izradu vlastitih proširenja preglednika.

1. Odaberite Safari u izborniku preglednika koji se nalazi na vrhu vašeg zaslona. Kada se pojavi padajući izbornik, odaberite Preferences. Također možete koristiti sljedeću tipkovničku prečicu umjesto ove stavke izbornika: COMMAND+COMMA(,)

   

2. Safarijevo Preferences sučelje sada bi trebalo biti prikazano, preklapajući prozor vašeg preglednika. Odaberite ikonu Napredno, koja se nalazi na krajnjoj desnoj strani zaglavlja.

   

3. Napredne postavke sada bi trebale biti vidljive. Na dnu ovog ekrana nalazi se opcija označena Prikaži izbornik za razvoj na traci izbornika, popraćena potvrdnim okvirom. Ako u okviru nema kvačice, kliknite na nju jednom da biste je tamo postavili.

   

4. Zatvorite Preferences sučelje.

5. Sada biste trebali primijetiti novu opciju u izborniku preglednika pod nazivom Develop, koja se nalazi između Oznake i Window. Kliknite na ovu stavku izbornika. Sada bi se trebao prikazati padajući izbornik sa sljedećim opcijama.

   • Otvori stranicu s: Omogućuje vam otvaranje aktivne web stranice u jednom od drugih preglednika koji su trenutno instalirani na vašem Macu.
   • Korisnički agent: Omogućuje odabir između više od desetak unaprijed definiranih vrijednosti korisničkog agenta uključujući nekoliko verzija Chromea, Firefoxa i Internet Explorera, kao i definiranje vlastitih prilagođenih niz.
   • Uđite u način responzivnog dizajna: Prikazuje trenutnu stranicu onako kako bi izgledala na različitim uređajima i pri različitim razlučivostima zaslona.
   • Prikaži Web Inspector: Pokreće glavno sučelje za razvojne alate Safarija, koje se obično nalazi na dnu zaslona preglednika i sadrži sljedeće odjeljke: Elementi, Mreža, Resursi, Vremenske trake, Debugger, Storage, Console.
   • Prikaži konzolu za pogreške: Također pokreće sučelje alata za razvojne programere, izravno na karticu konzole koja prikazuje pogreške, upozorenja i ostalo pretraživo podaci zapisnika.
   • Prikaži izvor stranice: Otvara karticu Resursi, koja prikazuje izvorni kod za aktivnu stranicu kategoriziranu prema dokumentu.
   • Prikaži resurse stranice: Obavlja istu funkciju kao opcija Prikaži izvor stranice.
   • Prikaži uređivač isječaka: Otvara novi prozor u koji možete unijeti CSS i HTML kod, pregledavajući njegov izlaz u hodu.
   • Prikaži alat za izradu proširenja: Pruža mogućnost stvaranja ili uređivanja Safari proširenja pomoću CSS-a, HTML-a i JavaScripta.
   • Prikaži snimku vremenske trake: Otvara karticu Vremenske trake i počinje prikazivati mrežne zahtjeve, izgled i informacije o prikazivanju kao i izvršavanje JavaScripta u stvarnom vremenu.
   • Isprazni predmemorije: Briše cijelu predmemoriju koja je trenutno pohranjena na vašem tvrdom disku.
   • Onemogući predmemorije: Zaustavlja Safari u predmemoriji tako da se sav sadržaj dohvaća s poslužitelja pri svakom učitavanju stranice.
   • Onemogući slike: Sprječava prikazivanje slika na svim web stranicama.
   • Onemogući stilove: Ignorira CSS svojstva kada se stranica učita.
   • Onemogući JavaScript: Ograničava izvršavanje JavaScripta na svim stranicama.
   • Onemogući proširenja: Zabranjuje pokretanje svih instaliranih proširenja unutar preglednika.
   • Disable Site-specific Hacks: Ako je Safari izmijenjen tako da eksplicitno obrađuje problem(e) specifične za aktivnu web stranicu, ova opcija će blokirati te promjene tako da stranica učitava kao što bi bila prije uvođenja ovih izmjena.
   • Onemogući ograničenja lokalnih datoteka: Omogućuje pregledniku pristup datotekama na vašim lokalnim diskovima, radnja koja je prema zadanim postavkama ograničena iz sigurnosnih razloga.
   • Onemogući ograničenja unakrsnog podrijetla: Ova su ograničenja postavljena prema zadanim postavkama kako bi se spriječio XSS i druge potencijalne opasnosti. Međutim, često ih je potrebno privremeno onemogućiti u svrhu razvoja.
   • Dopusti JavaScript iz pametnog polja za pretraživanje: Kada je omogućeno, pruža mogućnost unosa URL-ova s javascriptom: ugrađenim izravno u adresnu traku.
   • Tretirajte SHA-1 certifikate kao nesigurne: SSL certifikati koji koriste SHA-1 algoritam općenito se smatraju zastarjelim i ranjivim.