Kako koristiti alate za programere web pretraživača

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

Pored većine proizvođača pretraživača koji se fokusiraju na svakodnevne korisnike koji žele surfati webom, oni također pružaju usluge web programerima, dizajnerima i profesionalcima za osiguranje kvalitete koji pomažu u izgradnji aplikacija i web lokacija kojima ti korisnici pristupaju integracijom moćnih alati direktno u same pretraživače.

Prošli su dani kada su vam jedini alati za programiranje i testiranje pronađeni u pretraživaču omogućavali da vidite izvorni kod stranice i ništa više. Današnji preglednici vam omogućavaju da zaronite mnogo dublje radeći stvari kao što su izvršavanje i otklanjanje grešaka JavaScript isječaka, pregledavanje i uređivanje DOM elemenata, praćenje mrežnog prometa u realnom vremenu dok se vaša aplikacija ili stranica učitava kako biste identificirali uska grla, analizirajući CSS performanse, osiguravajući 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 pretraživačima, 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 pretraživača!

Uputstva ispod vode vas kroz kako da pristupite ovim alatima za programere u nekoliko popularnih web pretraživača.

Google Chrome

Chrome programerski alati vam omogućavaju da uređujete i otklanjate greške koda, vršite reviziju pojedinačnih komponenti kako biste otkrili probleme sa performansama, simulirate različite ekrane uređaja, uključujući one koji koriste Android ili iOS, i obavljate nekoliko drugih korisnih funkcija.

1. Odaberite Chromeov glavni meni, označen sa tri horizontalne linije i nalazi se u gornjem desnom uglu pretraživača.

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

   

3. Sad bi se trebao pojaviti podmeni. Odaberite opciju označenu Alati za programere. Također možete koristiti sljedeću prečicu na tastaturi umjesto ove stavke menija: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPCIJA) +COMMAND+I)

   

4. Chrome Developer Tools interfejs bi sada trebao biti prikazan, kao što je prikazano na ovom primjeru snimka ekrana. Ovisno o vašoj verziji Chromea, početni izgled koji vidite može se malo razlikovati od ovdje predstavljenog. Glavno središte programskih alata, koje se obično nalazi na donjoj ili desnoj strani ekrana, sadrži sljedeće kartice.

5. Pored ovih odjeljaka, možete pristupiti i sljedećim alatima putem ikone >>, koja se nalazi desno od Performanse tab.

   • Memorija: Nadgledanje i snimanje upotrebe memorije na web stranici. Možete vidjeti koliko je težak JavaScript na vašoj web lokaciji.
   • Security: Ističe probleme sa certifikatima i druge probleme vezane za sigurnost sa aktivnom stranicom ili aplikacijom.
   • Aplikacija: Pregledajte resurse koje koristi web aplikacija. Dobijte potpuni pregled onoga što se koristi.
   • Revizije: Nudi načine za optimizaciju vremena učitavanja stranice ili aplikacije i opće performanse.

   

6. Režim uređaja vam omogućava da vidite aktivnu stranicu u simulatoru koji je prikazuje gotovo tačno onako kako bi se pojavila 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đe vam je data mogućnost da emulirate prilagođene rezolucije ekrana koje odgovaraju vašim specifičnim potrebama razvoja ili testiranja.

   Da biste uključili i isključili Režim uređaja, odaberite ikonu mobilnog telefona koja se nalazi direktno lijevo od Elementi kartica.

   

7. Također možete prilagoditi izgled i osjećaj vaših programskih alata tako što ćete prvo odabrati dugme predstavljeno sa tri vertikalno postavljene tačke i nalazi se na krajnjoj desnoj strani gore navedenih kartica.

   Unutar ovog padajućeg menija možete premjestiti dock, prikazati ili sakriti različite alate, kao i pokrenuti naprednije stavke kao što je preglednik uređaja. Naći ćete da je sam interfejs alata za programere veoma prilagodljiv putem postavki koje se nalaze u ovom odjeljku.

   

Mozilla Firefox

Firefoxov odjeljak za web programere uključuje alate za dizajnere, programere i testere, poput uređivača stilova i pikselskih kapaljki za oči.

1. Odaberite Firefox glavni meni, predstavljen sa tri horizontalne linije i nalazi se u gornjem desnom uglu prozora pretraživača.

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

   

3. Meni Web Developer sada bi trebao biti prikazan, koji sadrži sljedeće opcije. Primijetit ćete da većina stavki menija ima prečice na tipkovnici povezane s njima.

   • Toggle Tools: Prikazuje ili sakriva interfejs alata za programere, obično pozicioniran na dnu prozora pretraživača. Prečica na tastaturi: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Omogućava vam da pregledate i/ili podesite CSS i HTML kod na aktivnoj stranici kao i na prijenosnom uređaju putem daljinskog otklanjanja grešaka. Prečica na tastaturi: Mac OS X (ALT(OPCIJA)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web konzola: Omogućava vam da izvršite JavaScript izraze unutar aktivne stranice, kao i pregledate raznolik skup evidentiranih podataka uključujući sigurnosna upozorenja, mrežne zahtjeve, CSS poruke i još mnogo toga. Prečica na tastaturi: Mac OS X (ALT(OPCIJA)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger vam omogućava da precizno odredite i popravite nedostatke postavljanjem tačaka prekida, inspekcijom DOM čvorova, crnim okvirom vanjskih izvora i još mnogo toga. Kao što je slučaj sa Inspektorom, ova funkcija takođe podržava udaljeno otklanjanje grešaka. Prečica na tastaturi: Mac OS X (ALT(OPCIJA)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Uređivač stilova: Omogućava vam da kreirate nove tablice stilova i ugradite ih u aktivnu web stranicu, ili uredite postojeće listove i testirate kako se vaše promjene prikazuju u pregledniku samo jednim klikom. Prečica na tastaturi: Mac OS X, Windows (SHIFT+F7)
   • Performanse: Pruža detaljan pregled mrežnih performansi aktivne stranice, podatke o brzini kadrova, vrijeme i stanje izvršavanja JavaScript-a, treperenje boje i još mnogo toga. Prečica na tastaturi: Mac OS X, Windows (SHIFT+F5)
   • Network: Navodi svaki mrežni zahtjev koji je pokrenuo pretraživač zajedno sa odgovarajućom metodom, izvornim domenom, tipom, veličinom i proteklim vremenom. Prečica na tastaturi: Mac OS X (ALT(OPCIJA)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Pogledajte keš memoriju i kolačiće koje pohranjuje web stranica. Prečica na tastaturi: (SHIFT+F9)
   • Traka sa alatkama za programere: Otvara interaktivni interpreter komandne linije. Unesite help u interpreter za listu svih dostupnih komandi i njihovu ispravnu sintaksu. Prečica na tastaturi: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Pruža mogućnost kreiranja i izvršavanja web aplikacija putem stvarnog uređaja koji koristi Firefox OS ili putem Firefox OS Simulatora. Prečica na tastaturi: Mac OS X, Windows (SHIFT+F8)
   • Konzola pretraživača: Pruža istu funkcionalnost kao i Web konzola (vidi gore). Međutim, svi vraćeni podaci odnose se na cijelu Firefox aplikaciju (uključujući ekstenzije i funkcije na razini preglednika) za razliku od samo aktivne web stranice. Prečica na tastaturi: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Omogućava vam da trenutno pregledate web stranicu u različitim rezolucijama, izgledima i veličinama ekrana kako biste oponašali više uređaja uključujući tablete i pametne telefone. Prečica na tastaturi: Mac OS X (ALT(OPCIJA)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Prikazuje heksadecimalni kod boje za pojedinačno odabrane piksele.
   • Scratchpad: Scratchpad vam omogućava da pišete, uređujete, integrišete i izvršavate isječke JavaScript koda iz iskačućeg Firefox prozora. Otvorite interaktivni JavaScript dokument koji vam omogućava da upišete kod i testirate ga na web stranici. Prečica na tastaturi: (SHIFT+F4)
   • Service Workers: Otklanjanje grešaka uslužnim radnicima vaše web aplikacije. Dobijte detaljne informacije o njihovim performansama i greškama.
   • Izvor stranice: Originalni programerski alat zasnovan na pretraživaču, ova opcija jednostavno prikazuje dostupni izvorni kod za aktivnu stranicu. Prečica na tastaturi: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Nabavite više alata: Otvara kolekciju alata za web programere na Mozilla-inoj službenoj stranici dodataka, koja sadrži desetak popularnih ekstenzija kao što su kao Firebug i Greasemonkey.

   

Microsoft Edge/Internet Explorer

Uobičajeno nazvan F12 Developer Tools, omaž prečici na tastaturi koja je pokrenula sučelje od ranijih verzija Internet Explorera, skupa alata za programere u IE11 i Microsoft Edgeu je prešao dug put od svog početka nudeći vrlo zgodnu grupu monitora, debugera, emulatora i kompajlera u pokretu.

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

1. Odaberite Još radnji, predstavljeno sa tri tačke i nalazi se u gornjem desnom uglu prozora pretraživača.

   

2. Kada se pojavi padajući meni, odaberite opciju označenu s Alati za programere.

   

3. Razvojni interfejs bi sada trebao biti prikazan, obično na dnu prozora pretraživača. Dostupni su sljedeći alati, od kojih svakom možete pristupiti klikom na odgovarajuće naslove kartice ili korištenjem prateće prečice na tastaturi.

   

   • DOM Explorer: Omogućava vam da uređujete stilove i HTML na aktivnoj stranici, prikazujući izmijenjene rezultate dok idete. Koristi IntelliSense funkcionalnost za automatsko dovršavanje koda gdje je to primjenjivo. Prečica na tastaturi: (CTRL+1)
   • Console: Pruža mogućnost slanja informacija o otklanjanju grešaka, uključujući brojače, tajmere, tragove i prilagođene poruke putem integriranog API-ja. Također, omogućava vam ubacivanje koda u aktivnu web stranicu i modificiranje vrijednosti dodijeljenih pojedinačnim varijablama u realnom vremenu. Prečica na tastaturi: (CTRL+2)
   • Debugger: Omogućuje vam postavljanje tačaka prekida i otklanjanje grešaka u vašem kodu dok se izvršava, red po red ako je potrebno. Prečica na tastaturi: (CTRL+3)
   • Network: Navodi svaki mrežni zahtjev pokrenut od strane pretraživača tokom učitavanja i izvršavanja stranice uključujući detalje protokola, tip sadržaja, korištenje propusnog opsega i još mnogo toga. Prečica na tastaturi: (CTRL+4)
   • Performanse: Detalji o brzini kadrova, iskorištenosti CPU-a i drugim metrikama vezanim za performanse koje će vam pomoći da ubrzate vrijeme učitavanja stranice i druge aktivnosti. Prečica na tastaturi: (CTRL+5)
   • Memory: Pomaže vam da izolujete i ispravite potencijalno curenje memorije na trenutnoj web stranici tako što prikazuje vremensku liniju upotrebe memorije zajedno sa snimcima iz različitih vremenskih intervala. Prečica na tastaturi: (CTRL+6)
   • Emulacija: Pokazuje vam kako bi se aktivna stranica prikazivala u različitim rezolucijama i veličinama ekrana, emulirajući pametne telefone, tablete i druge uređaje. Takođe pruža mogućnost modifikacije korisničkog agenta i orijentacije stranice, kao i simulacije različitih geolokacija unosom geografske širine i dužine. Prečica na tastaturi: (CTRL+7)

4. Za prikaz Konzole dok se nalazite u bilo kojem od drugih alata pritisnite kvadratno dugme sa desnom zagradom unutar njega, koji se nalazi u gornji desni ugao interfejsa razvojnih alata.

   

5. Da biste poništili interfejs alata za programere tako da postane poseban prozor, izaberite dva kaskadna pravougaonika ili koristite sljedeću prečicu na tipkovnici: CTRL+P. Možete vratiti alate na njihovu originalnu lokaciju pritiskom na CTRL+P drugi put.

   

Apple Safari (samo za Mac)

Safari-jev raznolik skup alata za razvojne programere odražava veliku zajednicu programera koja koristi Mac za svoje potrebe dizajna i programiranja. Pored moćne konzole i tradicionalnih funkcija evidentiranja i otklanjanja grešaka, dostupan je i način rada koji se lako koristi i alat za kreiranje vlastitih ekstenzija preglednika.

1. Izaberite Safari u meniju pretraživača, koji se nalazi na vrhu vašeg ekrana. Kada se pojavi padajući meni, izaberite Preferences. Također možete koristiti sljedeću prečicu na tastaturi umjesto ove stavke menija: COMMAND+COMMA(,)

   

2. Safari-jev Preference interfejs bi sada trebao biti prikazan, prekrivajući prozor vašeg pretraživača. Odaberite ikonu Advanced, koja se nalazi na krajnjoj desnoj strani zaglavlja.

   

3. Preference Advanced bi sada trebale biti vidljive. Na dnu ovog ekrana nalazi se opcija označena Prikaži meni za razvoj u traci menija, praćena potvrdnim okvirom. Ako u polju nema kvačice, kliknite na nju jednom da je postavite tamo.

   

4. Zatvorite Preferences interfejs.

5. Sada biste trebali primijetiti novu opciju u meniju pretraživača pod nazivom Develop, koja se nalazi između Bookmarks i Window. Kliknite na ovu stavku menija. Sada bi se trebao prikazati padajući meni koji sadrži sljedeće opcije.

   • Otvori stranicu sa: Omogućava vam da otvorite aktivnu web stranicu u jednom od drugih pretraživača koji su trenutno instalirani na vašem Macu.
   • Korisnički agent: Omogućuje vam odabir između preko deset unaprijed definiranih vrijednosti korisničkog agenta uključujući nekoliko verzija Chromea, Firefoxa i Internet Explorera, kao i definiranje vlastitog prilagođenog niz.
   • Uđite u Responsive Design Mode: Renderira trenutnu stranicu onako kako bi izgledala na različitim uređajima i na različitim rezolucijama ekrana.
   • Show Web Inspector: Pokreće glavno sučelje za Safari dev alate, obično smješteno na dnu ekrana vašeg pretraživača i sadrži sljedeće odjeljke: Elementi, Mreža, Resursi, Vremenske linije, Debugger, Storage, Console.
   • Show Error Console: Takođe pokreće interfejs dev alata, direktno na karticu Konzola koja prikazuje greške, upozorenja i druge mogućnosti pretraživanja podaci dnevnika.
   • Prikaži izvor stranice: Otvara karticu Resursi, koja prikazuje izvorni kod za aktivnu stranicu kategoriziranu po dokumentu.
   • Prikaži resurse stranice: Obavlja istu funkciju kao opcija Prikaži izvor stranice.
   • Show Snippet Editor: Otvara novi prozor u koji možete unijeti CSS i HTML kod, pregledavajući njegov izlaz u hodu.
   • Show Extension Builder: Pruža mogućnost kreiranja ili uređivanja Safari ekstenzija sa CSS-om, HTML-om i JavaScript-om.
   • Prikaži snimanje na vremenskoj liniji: Otvara karticu Vremenske linije i počinje prikazivanje mrežnih zahtjeva, rasporeda i informacija o renderiranju, kao i izvršavanje JavaScripta u realnom vremenu.
   • Empty Caches: Briše cijeli keš koji je trenutno pohranjen na vašem tvrdom disku.
   • Disable Caches: Zaustavlja Safari od keširanja tako da se sav sadržaj preuzima sa servera pri svakom učitavanju stranice.
   • Disable Images: Sprečava prikazivanje slika na svim web stranicama.
   • Onemogući stilove: Ignoriše CSS svojstva kada se stranica učita.
   • Onemogući JavaScript: Ograničava izvršavanje JavaScript-a na svim stranicama.
   • Disable Extensions: Zabranjuje pokretanje svih instaliranih ekstenzija unutar pretraživača.
   • Onemogući hakove specifične za web lokaciju: Ako je Safari modificiran da eksplicitno rješava probleme specifične za aktivnu web stranicu, ova opcija će blokirati te promjene tako da stranica opterećenja kao što bi imala prije uvođenja ovih modifikacija.
   • Disable Local File Restrictions: Omogućava pregledniku da ima pristup datotekama na vašim lokalnim diskovima, radnja koja je po defaultu ograničena iz sigurnosnih razloga.
   • Disable Cross-Origin Restrictions: Ova ograničenja su 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.
   • Dozvoli JavaScript iz polja za pametno pretraživanje: Kada je omogućeno, pruža mogućnost unosa URL-ova sa javascriptom: ugrađenim direktno u adresnu traku.
   • Tretirajte SHA-1 certifikate kao nesigurne: Smatra se da su SSL certifikati koji koriste SHA-1 algoritam zastarjeli i ranjivi.