Integrisani alati za web dizajnere, programere i testere
Osim većine proizvođača pretraživača koji se fokusiraju na svakodnevne korisnike koji žele da surfuju na Vebu, oni takođe poslužuju web programerima, dizajnerima i profesionalcima za osiguranje kvaliteta koji pomažu u izgradnji aplikacija i lokacija na koje korisnici pristupaju integrišući moćne alate direktno u pretraživače sami.
Gone su dani u kojima su jedini alati za programiranje i testiranje koji su pronađeni u pregledaču omogućili pregled izvornog koda stranice i ništa više. Današnji pregledači vam omogućavaju da napravite mnogo dublje ronjenje tako što ćete vršiti stvari kao što su izvršavanje i otklanjanje šablona JavaScripta, pregledanje i uređivanje DOM elementa, praćenje mrežnog saobraćaja u realnom vremenu, kao što aplikacija ili stranica učitavaju da identifikuju uske grlo, analiziraju performanse CSS-a, osiguravajući da je vaš kôd ne koristeći previše memorije ili previše CPU ciklusa, i mnogo više. Iz perspektive testiranja možete reprodukovati kako će aplikacija ili veb stranica prikazivati u različitim pregledačima, kao i na različitim uređajima i platformama kroz magiju odgovarajućeg dizajna i ugrađenih simulatora. Najbolje je da sve ovo možete učiniti bez napuštanja pregledača!
Tutorijali ispod pokazuju kako da pristupite ovim alatima za programer u nekoliko popularnih veb pregledača.
google chrome
Chrome-ovi alati za razvijanje omogućavaju vam da uređujete i debugujete kôd, reviziju pojedinačnih komponenti radi izlaganja problema sa performansama, simuliraju različite ekrane uređaja uključujući i one koji pokreću Android ili iOS i izvršavaju nekoliko drugih korisnih funkcija.
- Kliknite na dugme Chrome-a u glavnom meniju, označeno sa tri horizontalne linije i nalazi se u gornjem desnom uglu pretraživača.
- Kada se pojavi padajući meni, pomjerite kursor miša preko opcije Više alata .
- Sada bi trebalo da se pojavi podmeni. Izaberite opciju labeled Developer tools . Umesto ove stavke menija možete koristiti i sljedeću tastersku prečicu: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Sada je prikazan interfejs Chrome Developer Tools, kao što je prikazano u ovom primeru. U zavisnosti od vaše verzije Chrome-a, početni izgled koji vidite je možda malo drugačiji od onog koji je ovde prikazan. Glavno čvorište alata za razvijanje, tipično smešteno na donjoj ili desnoj strani ekrana, sadrži sledeće kartice.
Elementi: Pruža mogućnost provere CSS-a i HTML-koda, kao i editovanje CSS-a na licu, vidjeti efekte vaših promjena u realnom vremenu.
Konzola: Chromeova JavaScript konzola omogućava direktan unos komandi kao i dijagnostičko debagovanje.
Izvori: Omogućava vam da debagujete JavaScript kod pomoću moćnog grafičkog interfejsa.
Mreža: kategorizuje i prikazuje detaljne informacije o svakoj povezani operaciji na aktivnoj aplikaciji ili stranici, uključujući kompletne zahtjeve i zaglavlje odgovora, kao i napredne merne parametre merenja vremena.
Vremenski okvir: Omogućava detaljnu analizu svake aktivnosti koja se odvija u okviru pretraživača čim se pokrene zahtev za učitavanje stranice ili aplikacije. - Pored ovih sekcija, možete takođe pristupiti sledećim alatkama pomoću ikone >> , koji se nalazi desno od kartice Timeline .
Profil: Razbijena u profilere CPU i Heap profiler , pruža sveobuhvatnu upotrebu memorije i ukupno vreme izvršenja aktivne aplikacije ili stranice.
Sigurnost: Ističe probleme sertifikata i druge probleme vezane za sigurnost sa aktivnom stranom ili aplikacijom.
Resursi: Ovdje možete pregledati kolačiće, lokalno skladište, keš aplikacija i druge lokalne izvore podataka koje koristi trenutna Web stranica ili aplikacija.
Revizije: Nudi načine za optimizaciju vremena učitavanja stranice i aplikacije i opštih performansi. - Režim uređaja vam omogućava da pregledate aktivnu stranicu na simulatoru koji ga čini skoro upravo onako kako će se pojaviti na jednom od više od dvanaest uređaja, uključujući nekoliko poznatih Android i iOS modela kao što su iPad, iPhone i Samsung Galaxy. Takođe vam je omogućeno da emulirate prilagođene rezolucije ekrana kako biste odgovarali vašim potrebama za razvoj ili testiranjem. Da biste uključili i isključili režim uređaja , izaberite ikonu mobilnog telefona koja se nalazi direktno levo od kartice Elements .
- Takođe možete prilagoditi izgled i osećaj vaših alata za razvijanje tako što ćete prvo kliknuti na dugme menija koje predstavljaju tri vertikalno postavljene tačke i nalazi se na krajnjoj desnoj strani gore navedenih tabova. U okviru ovog padajućeg menija, možete da premeštate dok, da prikažete ili sakrijete različite alate, kao i da pokrenete naprednije stavke kao što je inspektor uređaja. Naći ćete da je sam interfejs dev alata veoma prilagodljiv preko postavki pronađenih u ovom odeljku.
Mozilla Firefox
Odeljak Firefox-ovog Web Developer-a sadrži alate za dizajnera, programera i testera, kao što su uredjivač stilova i eyedropper za ciljanje piksela.
Preporučeno čitanje: Top 25 Greasemonkey i Korisnički skripti Tampermonkey
- Kliknite na dugme Firefox-a u glavnom meniju, koje predstavljaju tri horizontalne linije i nalazi se u gornjem desnom uglu prozora pregledača.
- Kada se pojavi padajući meni, izaberite ikonu označenu kao Developer . Sada bi trebalo da se prikaže meni Web Developer , koji sadrži sledeće opcije. Primetili ste da većina stavki menija imaju prečice sa tastature koje su povezane sa njima.
Toggle Tools: Prikazuje ili sakriva interfejs alata za programer, tipično pozicioniran na dnu prozora pregledač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 kôd na aktivnoj stranici, kao i na prenosnom uređaju putem daljinskog otklanjanja grešaka. Prečica na tastaturi: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web konzola: Omogućava vam da izvršite JavaScript izraze unutar aktivne stranice, kao i pregled raznovrsnog skupa prijavljenih podataka uključujući sigurnosna upozorenja, mrežne zahtjeve, CSS poruke i još mnogo toga. Prečica na tastaturi: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debuger: JavaScript debugger vam omogućava da odredite i defini¹ete defektne postavke tako što ćete postaviti tačke prekida, pregledati DOM čvorove, izvore izvora crne boksa i još mnogo toga. Kao što je slučaj sa inspektorom , ova funkcija takođe podržava daljinsko otklanjanje grešaka. Prečica na tastaturi: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Uređivač stilova: Omogućava vam da kreirate nove stilove i uključite ih na aktivnu Web stranicu, ili izmenite postojeće listove i testirajte kako se vaše promjene prikazuju u pregledaču samo jednim klikom. Prečica na tastaturi: Mac OS X, Windows ( SHIFT + F7 )
Performanse: Omogućava detaljno razdvajanje performansi mreže aktivne stranice, podatke o kadrovima, vreme izvršavanja JavaScripta i stanje, trepćuće boje i još mnogo toga. Tasterska prečica: Mac OS X, Windows ( SHIFT + F5 )
Mreža: Prikazuje svaki zahtev mreže koji je pokrenuo pretraživač zajedno sa odgovarajućim metodom, domenom porekla, tipom, veličinom i vremenom. Prečica na tastaturi: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Toolbar za programer: Otvara interaktivni interpreter za naredbenu liniju. Unesite pomoć u tumaču za listu svih raspoloživih komandi i odgovarajuću sintaksu. Prečica na tastaturi: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Pruža mogućnost stvaranja i izvršavanja Web aplikacija preko stvarnog uređaja koji radi pod OS Firefox ili preko 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 (pogledajte gore). Međutim, svi podaci se vraćaju za cijelu Firefox aplikaciju (uključujući i proširenja i funkcije na nivou pretraživača) nasuprot samo aktivnoj Web stranici. Prečica na tastaturi: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Odzivni prikaz dizajna: Omogućava vam da odmah pogledate Web stranicu u različitim rezolucijama, izgledima i veličinama ekrana da biste imali više uređaja uključujući tablete i pametne telefone. Prečica na tastaturi: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Prikazuje heks kôd boje za pojedinačno odabrane piksele.
Scratchpad : Omogućava vam da pišete, uređujete, integrišete i izvršavate fragmente JavaScript kodova iz prozora Firefox-a. Prečica na tastaturi: Mac OS X, Windows ( SHIFT + F4 )
Izvor stranice: Originalni alat za razvijanje na pretraživaču, ova opcija jednostavno prikazuje raspoloživi izvorni kod za aktivnu stranicu. Prečica na tastaturi: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Saznajte više alata: Otvara kolekciju alatki Web Developer Toolbox- a na zvaničnoj web lokaciji Mozilla - a, koja sadrži oko desetak popularnih ekstenzija poput Firebug-a i Greasemonkey-a.
Microsoft Edge / Internet Explorer
Uobičajeno nazvan F12 Developer Tools , poštovanje prečice na tastaturi koja je pokrenula interfejs od starijih verzija Internet Explorer-a, dev setni alat u IE11 i Microsoft Edge-u je dosta dug put od svog osnivanja, pružajući veoma zgodnu grupu monitori, debugeri, emulatori i kompilatori na licu.
- Kliknite na meni Više akcije , prikazano sa tri tačke i nalazi se u gornjem desnom uglu prozora pregledača. Kada se pojavi padajući meni, izaberite opciju označenu kao F12 Developer Tools . Kao što sam već spomenuo, možete takođe pristupiti alatkama preko prečice tastera F12 .
- Razvojni interfejs sada bi trebao biti prikazan, obično na dnu prozora pregledača. Sledeći alati su dostupni, svaki dostupan klikom na odgovarajući naslov zaglavlja ili pomoću prateće prečice na tastaturi.
DOM Explorer: Omogućava vam da uređujete stilove i HTML na aktivnoj stranici, tako što ćete modifikovane rezultate prikazivati dok idete. Koristi IntelliSense funkcionalnost kod autocomplete gdje je primjenjivo. Prečica na tastaturi: (CTRL + 1)
Konzola: Pruža mogućnost da podnese informacije o debagiranju uključujući brojače, tajmere, tragove i prilagođene poruke preko integrisanog API-ja. Takođe, možete da ubacite kôd na aktivnu Web stranicu i izmenite vrijednosti dodijeljene pojedinačnim varijablama u realnom vremenu. Prečica na tastaturi: (CTRL + 2)
Debuger: Omogućava vam da postavite tačke prekida i debugate svoj kod dok ga izvršavate, ako je potrebno, linijom po liniji. Prečica na tastaturi: (CTRL + 3)
Mreža: Prikazuje svaki zahtev mreže koji je pokrenuo pretraživač prilikom učitavanja i izvršenja stranice uključujući podatke o protokolu, tip sadržaja, korišćenje propusnog opsega i još mnogo toga. Prečica na tastaturi: (CTRL + 4)
Performanse: stope frejmova podataka, korištenje CPU-a i druge mjerne performanse koje će vam pomoći u ubrzavanju vremena učitavanja stranica i drugih aktivnosti. Prečica na tastaturi: (CTRL + 5)
Memorija: Pomaže vam da izolujete i ispravite potencijalne gubitke memorije na trenutnoj Web stranici tako što ćete prikazati vremenski okvir korištenja memorije zajedno sa snimcima iz različitih vremenskih intervala. Prečica na tastaturi: (CTRL + 6)
Emulacija: prikazuje kako će aktivna stranica prikazivati različite rezolucije i veličine ekrana, emulirati pametne telefone, tablete i druge uređaje. Takođe pruža mogućnost mijenjanja korisničkog agenta i orijentacije stranica, kao i simulaciju različitih geolokacija unošenjem geografske širine i dužine. Prečica sa tastature: (CTRL + 7) - Da biste prikazali konzolu u okviru bilo kojeg drugog alata, kliknite na četvrtasto dugme sa desnim nosačem unutar nje, koja se nalazi u gornjem desnom uglu interfejsa razvojnih alata.
- Da uklonite interfejs alata za programer tako da postane zaseban prozor, kliknite na dugme koje predstavljaju dva kaskadna pravougaonika ili koristite sledeću prečicu na tastaturi: CTRL + P. Alat možete vratiti na prvobitnu lokaciju pritiskanjem CTRL + P po drugi put.
Apple Safari (samo OS X)
Safarijev raznovrstan alat odražava veliku zajednicu programera koja koristi Mac za svoje potrebe za dizajnom i programiranjem. Osim moćne konzole i tradicionalnih funkcija za prijavljivanje i otklanjanje grešaka, takođe su obezbeđeni jednostavan za korišćenje režim dizajna i alat za kreiranje sopstvenih proširenja pretraživača.
- Kliknite na Safari u meniju pregledača, koji se nalazi na vrhu ekrana. Kada se pojavi padajući meni, izaberite Preferences . Umjesto ove stavke menija možete koristiti i sljedeću prečicu na tastaturi: COMMAND + COMMA (,)
- Safari's Preferences interfejs sada bi trebao biti prikazan, overlay vaš prozor pregledača. Kliknite na Advanced ikonu, koja se nalazi na krajnjoj desnoj strani zaglavlja.
- Napredne željene postavke bi sada trebale biti vidljive. Na dnu ovog ekrana je opcija označena kao Show Show meni na traci menija , uz potvrdu kvadratića. Ako u polju ne postoji znak za potvrdu, kliknite jednom na jednom da ga stavite.
- Zatvorite interfejs Preferences tako što ćete kliknuti na crveni 'x' koji se nalazi u gornjem levom uglu.
- Trebalo bi da primetite novu opciju u meniju pretraživača pod nazivom Razvijte , koja se nalazi između Bookmarks i Window-a . Kliknite na ovu stavku menija. Sada bi trebalo da se prikaže padajući meni koji sadrži sledeć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 Mac računaru.
Korisnički agent: Omogućava vam da izaberete više od dvanaest unapred definisanih vrijednosti korisničkog agenta, uključujući nekoliko verzija Chrome-a, Firefox-a i Internet Explorer-a, kao i da definišete sopstveni prilagođeni niz.
Režim reagovanja režima rada : prikazuje trenutnu stranicu kako bi se pojavila na raznim uređajima i na različitim rezolucijama ekrana.
Show Web Inspector: Pokreće glavni interfejs za Safarijeve dev alate, obično smeštene na dnu ekrana pregledača i sadrže sljedeće odeljke: Elementi , Mreža , Resursi , Vremenski okvir , Debugger , Skladištenje , Konzola .
Prikaži konzolu grešaka: Takođe pokreće interfejs dev alatki, direktno na karticu Console koja prikazuje greške, upozorenja i druge podatke dnevnika pretraživanja.
Show Page Source: Otvara karticu Resources , koja prikazuje izvorni kod za aktivnu stranicu kategorizovanu dokumentom.
Prikaži resurse stranice: Izvrši istu funkciju kao i opcija Show Page Source .
Show Snippet Editor: Otvara novi prozor u koji možete uneti CSS i HTML kod, pregledajući svoj izlaz na licu.
Show Extension Builder: Pruža mogućnost kreiranja ili uređivanja Safari ekstenzija sa CSS, HTML-om i JavaScriptom.
Prikaži snimak vremenske linije : Otvara karticu Vremenski okvir i počinje prikazivanje mrežnih zahteva, rasporeda i prikaza kao i izvršenje JavaScript-a u realnom vremenu.
Prazni kešeri: Briše čitavu keš memoriju koja se trenutno čuvaju na tvrdom disku.
Onemogući kešove: zaustavlja Safari od keširanja tako da se svaki sadržaj preuzima sa servera na svakom opterećenju stranice.
Onemogući slike: sprečava slike na renderingu na svim Web stranicama.
Onemogući Styles: Ignori CSS svojstva kada se stranica učita.
Onemogući JavaScript: Ograničava izvršenje JavaScript-a na svim stranicama.
Disable Extensions: zabranjuje sve instalirane dodatke da se pokreću unutar pregledača.
Onemogući hackove specifične za lokaciju: Ako je Safari modifikovan da eksplicitno rešava probleme specifične za aktivnu Web stranicu, ova opcija će blokirati te promjene tako da se stranica učita kao što bi bilo prije uvođenja ovih izmjena.
Onemogući lokalne ograničenja datoteka: Omogućava pregledaču da ima pristup datotekama na lokalnim diskovima, akcija koja je po defaultu ograničena zbog sigurnosnih razloga.
Onemogućite ograničenja ograničenja porekla: Ova ograničenja se postavljaju podrazumevano kako bi se spriječio XSS i druge potencijalne opasnosti. Međutim, oni često moraju biti privremeno onemogućeni u razvojne svrhe.
Dozvoli JavaScript iz Smart Search polja: Kada je omogućeno, pruža mogućnost unosa URL-ova sa javascript-om: ugrađen direktno u adresnu traku.
Sklonite SHA-1 certifikate kao nesigurne: SSL sertifikati koristeći SHA-1 algoritam smatraju se zastarelim i ranjivim.