Integrirani alati za web dizajnere, programere i testere
Osim većine preglednika koji se bave svakodnevnim korisnicima koji žele surfati na webu, oni također razgovaraju s programerima web-lokacije, dizajnerima i stručnjacima za osiguranje kvalitete koji pomažu pri izgradnji aplikacija i web-lokacija koje ti korisnici pristupaju integrirajući snažne alate izravno u preglednike se.
Otišli su dani u kojima su jedini alati za programiranje i testiranje pronađeni unutar preglednika omogućili da pogledate izvorni kôd stranice i ništa više. Današnji preglednici omogućuju vam mnogo dublje zaronenje događajima poput izvođenja i ispravljanja pogrešaka JavaScript odlomaka, pregleda i uređivanja DOM elemenata, praćenja mrežnog prometa u stvarnom vremenu kao aplikacije ili učitavanja stranice radi prepoznavanja uskih grla, analize izvedbe CSS-a, osiguravanje vašeg koda ne koristite previše memorije ili previše ciklusa procesora , i još mnogo toga. Iz perspektive testiranja možete reproducirati kako će se aplikacija ili web stranica prikazivati u različitim preglednicima, kao i na različitim uređajima i platformama kroz čaroliju osjetljivog dizajna i ugrađenih simulatora. Najbolji dio je taj što možete učiniti sve to bez potrebe da napustite svoj preglednik!
U nastavku vodiča saznajte kako pristupiti ovim alatima za razvojne programere u nekoliko popularnih web preglednika.
Google Chrome
Chromeovi alati za razvojne programere omogućuju vam uređivanje i ispravljanje koda, reviziju pojedinačnih komponenti kako biste otkrili probleme s performansama, simulirali različite zaslone uređaja, uključujući one koji rade na Androidu ili iOS-u , te izvršiti nekoliko drugih korisnih funkcija.
- Kliknite gumb Chromea glavnog izbornika, označen s tri vodoravne linije i smješten je u gornjem desnom kutu preglednika.
- Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad opcije Više alata .
- Sada bi se trebao prikazati podizbornik. Odaberite opciju s oznakom Alati za razvojne programere . Umjesto te stavke izbornika možete upotrijebiti i sljedeće tipkovničke prečace: OS / Windows Chrome ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Sada bi se trebao prikazati sučelje alata za razvojne programere Chrome, kao što je prikazano na ovom primjeru zaslona. Ovisno o vašoj verziji Chromea, početni izgled koji vidite može biti malo drugačiji od onog prikazanog ovdje. Glavno središte alata za razvojne programere, obično na donjoj ili desnoj strani zaslona, sadrži sljedeće kartice.
Elementi: Omogućuje pregledavanje CSS i HTML koda, kao i uređivanje CSS-a na licu mjesta, uočavanje učinaka promjena u stvarnom vremenu.
Konzola: Chromeova JavaScript konzola omogućuje izravni unos naredbi kao i dijagnostičko uklanjanje pogrešaka.
Izvori: omogućuje ispravljanje JavaScript koda putem snažnog grafičkog sučelja.
Mreža: Kategorizira i prikazuje detaljne informacije o svakoj povezanoj radnji na aktivnoj aplikaciji ili stranici, uključujući potpune zaglavlja zahtjeva i odgovora kao i napredne mjerne podatke o vremenu.
Vremenska linija: Omogućuje dubinsku analizu svake aktivnosti koja se odvija unutar preglednika čim se pokrene zahtjev za učitavanje stranice ili aplikacije. - Pored ovih odjeljaka, možete pristupiti i sljedećim alatima preko ikone >> , koji se nalazi desno od kartice Vremenska traka.
Profil: Prekinut u odjeljke CPU profilera i Heap profila , pruža sveobuhvatnu upotrebu memorije i ukupno vrijeme izvršenja aktivne aplikacije ili stranice.
Sigurnost: Istakni problemi s certifikatom i ostali sigurnosni problemi s aktivnom stranicom ili aplikacijom.
Resursi: Ovdje možete pregledati kolačiće, lokalnu pohranu, privremenu memoriju aplikacija i druge lokalne izvore podataka koji se koriste u trenutačnoj web-stranici ili aplikaciji.
Revizija: nudi načine optimiziranja vremena učitavanja stranice i aplikacije i opće izvedbe. - Način rada uređaja omogućuje pregled aktivne stranice u simulatoru koji je gotovo točno onako kako se pojavljuje na nekom od desetak uređaja, uključujući nekoliko poznatih Android i iOS modela, kao što su iPad, iPhone i Samsung Galaxy. Također vam je omogućeno da emuliraju prilagođene rezolucije zaslona kako bi odgovarale vašim potrebama za razvojem ili testiranjem. Da biste uključili i isključili način rada uređaja , odaberite ikonu mobilnog telefona smještenu izravno s lijeve strane kartice Elementi .
- Također možete prilagoditi izgled i dojam alata za razvojne programere tako da prvo kliknete gumb izbornika koji predstavlja tri okomito postavljene točkice i nalaze se na desnoj strani prethodno spomenutih kartica. Iz ovog padajućeg izbornika možete premjestiti pristanu, prikazati ili sakriti različite alate, kao i pokrenuti naprednije predmete poput inspektora uređaja. Otkrit ćete da je sučelje dev alata vrlo prilagodljivo putem postavki pronađenih u ovom odjeljku.
Mozilla Firefox
Firefoxov web odjeljak Web Developer uključuje alate za dizajnere, programere i testere, kao što je urednik stilova i piksela za ciljanje piksela.
Preporučeno čitanje: Top 25 Greasemonkey i Tampermonkey korisničke skripte
- Kliknite gumb za glavni izbornik preglednika Firefox, kojeg predstavljaju tri vodoravne linije i nalaze se u gornjem desnom kutu prozora preglednika.
- Kada se pojavi padajući izbornik, odaberite ikonu s oznakom Razvojni programer . Sada bi se trebao prikazati izbornik Web Developer koji sadrži sljedeće opcije. Primijetit ćete da većina stavki izbornika ima tipkovničke prečace povezane s njima.
Uključivanje alata: Prikazuje ili skriva sučelje alata za razvojne programere, obično postavljeno 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 ugađanje CSS i HTML koda na aktivnoj stranici kao i na prijenosnom uređaju putem udaljenog 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 različitih skupova zapisanih podataka, uključujući sigurnosna upozorenja, zahtjeve za mrežu, CSS poruke i još mnogo toga. Tipkovnički prečac: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: JavaScript Debugger vam omogućuje da odredite i popravite nedostatke postavljanjem prekidnih točaka, pregledavanjem DOM čvorova, vanjskim izvorima crnih boksova i još mnogo toga. Kao i kod inspektora , ova značajka također podržava udaljeno uklanjanje pogrešaka. Tipkovnički prečac: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Editor stila: Omogućuje vam da izradite nove stilske listove i ugradite ih u aktivnu web stranicu ili uredite postojeće listove i provjerite kako se promjene mijenjaju u pregledniku samo jednim klikom. Tipkovnički prečac: Mac OS X, Windows ( SHIFT + F7 )
Izvedba: pruža detaljnu analizu performansi mreže aktivne stranice, podatke o brzini okvira, vrijeme izvršavanja JavaScript-a i stanje, boja treperi i još mnogo toga. Tipkovnički prečac: Mac OS X, Windows ( SHIFT + F5 )
Mreža: Prikazuje svaki mrežni zahtjev pokrenut od strane preglednika uz odgovarajuću metodu, domenu podrijetla, vrstu, veličinu i vrijeme. Tipkovnički prečac: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Alatna traka za razvojne programere: otvara interaktivni tumač naredbenog retka. Unesite pomoć u tumača za popis svih dostupnih naredbi i odgovarajuću sintaksu. Tipkovnički prečac: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Omogućuje stvaranje i izvršavanje web aplikacija putem stvarnog uređaja koji pokreće Firefox OS ili putem Firefox OS Simulator. Tipkovnički prečac: Mac OS X, Windows ( SHIFT + F8 )
Konzola za preglednik: pruža istu funkcionalnost kao i Web Konzola (vidi gore). Međutim, svi podaci vraćeni su za cijelu aplikaciju Firefox (uključujući proširenja i funkcije na razini preglednika) za razliku od samo aktivne web stranice. Tipkovnički prečac: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Odgovarajući izgled dizajna: omogućuje vam da odmah pregledate web stranicu u različitim razlučivostima, izgledima i veličinama zaslona kako biste imitirali 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 )
Kapaljka: Prikazuje šesterokutni kôd boja za pojedinačno odabrane piksele.
Scratchpad : Omogućuje vam pisanje, uređivanje, integriranje i izvršavanje isječaka JavaScript koda iz prozora skočnih prozora u Firefoxu. Tipkovnički prečac: Mac OS X, Windows ( SHIFT + F4 )
Izvor stranice: Izvorni alat za razvojne programere koji se temelji na pregledniku, ova opcija jednostavno prikazuje dostupni izvorni kod za aktivnu stranicu. Tipkovnički prečac: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Dohvatite dodatne alate: otvara zbirku alata Toolboxa za Web Developer na Mozillinoj službenoj web stranici s dodatkom , s desetak popularnih ekstenzija kao što su Firebug i Greasemonkey.
Microsoft Edge / Internet Explorer
Obično se nazivaju alati za razvojne programere F12 , počast tipkovničnom prečacu koji je pokrenuo sučelje od ranijih verzija Internet Explorera, alat dev u IE11 i Microsoft Edgeu dugo je od svog osnutka nudeći vrlo zgodnu grupu monitora, debuggers, emulators, i on-the-fly prevodilaca.
- Kliknite izbornik Više radnji , koju predstavljaju tri točke i nalaze se u gornjem desnom kutu prozora preglednika. Kada se prikaže padajući izbornik, odaberite opciju označenu s alatima za razvojne programere F12 . Kao što sam već spomenuo, možete pristupiti alatima putem tipkovničkog prečaca F12 .
- Sada se treba prikazati sučelje za razvoj, obično pri dnu prozora preglednika. Sljedeći su alati dostupni, svaki dostupan tako da kliknete na njihov odgovarajući naslov ili pomoću popratnog tipkovničkog prečaca.
DOM Explorer: Omogućuje vam izmjenu stilskih lista i HTML-a na aktivnoj stranici, čime se izmijenjeni rezultati odvijaju. Koristi IntelliSense funkcionalnost za kôd samodovršavanja kada je to primjenjivo. Tipkovnički prečac: (CTRL + 1)
Konzola: Omogućuje slanje informacija o uklanjanju pogrešaka, uključujući brojače, vremenske oznake, tragove i prilagođene poruke putem integriranog API-ja. Također, možete ubaciti kod u aktivnu web stranicu i izmijeniti vrijednosti dodijeljene pojedinačnim varijablama u stvarnom vremenu. Tipkovnički prečac: (CTRL + 2)
Debugger: Omogućuje vam postavljanje prekidnih točaka i ispravljanje koda dok se izvršava, po potrebi redak po redak. Tipkovnički prečac: (CTRL + 3)
Mreža: Popis svih mrežnih zahtjeva koje je pokrenuo preglednik tijekom učitavanja i izvršenja stranice, uključujući detalje protokola, vrstu sadržaja, korištenje propusne moći i još mnogo toga. Tipkovnički prečac: (CTRL + 4)
Izvedba: Pojedinosti o brzinama okvira, upotrebi procesora i ostalim mjernim podacima vezanim uz izvedbu kako biste ubrzali vrijeme učitavanja stranice i druge aktivnosti. Tipkovnički prečac: (CTRL + 5)
Memorija: Pomaže vam izolirati i ispraviti potencijalne gubitke memorije na trenutačnoj web stranici prikazivanjem vremenske linije korištenja memorije zajedno s snimkama iz različitih vremenskih intervala. Tipkovnički prečac: (CTRL + 6)
Emulacija: prikazuje kako će se aktivna stranica prikazivati u različitim razlučivostima i veličinama zaslona, oponašajuć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 duljine. Tipkovnički prečac: (CTRL + 7) - Da biste prikazali konzolu dok ste u bilo kojem od drugih alata, kliknite gumb na trgu s desnim zagradom unutar njega, koji se nalazi u gornjem desnom kutu sučelja razvojnih alata.
- Da biste odvojili, sučelje alata za razvojne programere tako da postane zaseban prozor, kliknite gumb predstavljen s dva kaskadna pravokutnika ili upotrijebite sljedeći prečac na tipkovnici: CTRL + P. Alate možete vratiti u njihovu izvornu lokaciju pritiskom na CTRL + P drugi put.
Apple Safari (samo OS X)
Safariov raznovrstan dev alatni program odražava veliku zajednicu razvojnih programera koja koristi Mac za svoje potrebe za projektiranjem i programiranjem. Osim snažne konzole i tradicionalnih značajki prijavljivanja i uklanjanja pogrešaka, također je omogućen jednostavan način upotrebe osjetljivog dizajna i alat za izradu vlastitih proširenja preglednika.
- Kliknite na Safari u izborniku preglednika koji se nalazi na vrhu zaslona. Kada se pojavi padajući izbornik, odaberite Preferences . Umjesto te stavke izbornika možete koristiti i sljedeće tipkovničke prečace: COMMAND + COMMA (,)
- Sada bi se trebalo prikazati sučelje Safari's Preferences , preklapajući prozor vašeg preglednika. Kliknite ikonu Napredno , koja se nalazi na krajnjoj desnoj strani zaglavlja.
- Napredne postavke sada bi trebale biti vidljive. Na dnu zaslona nalazi se opcija označena kao Prikaži izbornik Izrada u traci izbornika , uz potvrdni okvir. Ako se u okviru ne pojavi kvačica, kliknite je jednom da biste je postavili.
- Zatvorite sučelje Preferences klikom na crvenu 'x' koja se nalazi u gornjem lijevom kutu.
- Sada biste trebali primijetiti novu opciju u izborniku preglednika pod nazivom Razviti , koji se nalazi između oznaka i prozora . Kliknite ovu stavku izbornika. Sada bi trebao biti prikazan padajući izbornik koji sadrži sljedeće opcije.
Otvaranje stranice sa: Omogućuje vam otvaranje aktivne web stranice u jednom od ostalih preglednika koji su trenutno instalirani na Mac računalu.
Korisnički agent: Omogućuje odabir između desetak unaprijed definiranih vrijednosti korisnika, uključujući nekoliko verzija Chromea, Firefoxa i Internet Explorera, kao i definiranje vlastitog prilagođenog niza.
Unesite način responzivnog dizajna : Prikazuje trenutnu stranicu kao što će se pojaviti na različitim uređajima i na različitim razlučivostima zaslona.
Prikaži web inspektor: pokreće glavno sučelje za Safariove alate za dev, obično postavljene na dnu zaslona preglednika i sadrže sljedeće odjeljke: Elementi , mreža , resursi , Vremenski okvir , Debugger , Storage , konzola .
Prikaži konzolu za pogreške: također pokreće sučelje alata za dev, izravno na karticu Console koja prikazuje pogreške, upozorenja i druge zapisničke podatke o pretraživanju.
Prikaži izvor stranice: otvara karticu Resources , koja prikazuje izvorni kôd za aktivnu stranicu kategoriziranog dokumentom.
Prikaži resurse stranice: Izvršava istu funkciju kao i opcija Prikaži izvor stranice .
Pokaži uređivač isječaka: otvara novi prozor u kojem možete unijeti CSS i HTML kôd, pregledavajući njegov output na licu mjesta.
Prikaži proširenje Builder: Omogućuje stvaranje ili uređivanje Safari ekstenzija s CSS, HTML i JavaScript.
Pokaži snimanje vremenske trake : otvara karticu Timelines i počinje prikazivati zahtjeve za mrežom, izgled i informacije o prikazivanju, kao i izvršavanje JavaScripta u stvarnom vremenu.
Prazne predmemorije : briše cijelu predmemoriju koja se trenutno pohranjuje na tvrdom disku.
Onemogući Spremanje: zaustavlja Safari iz predmemoriranja tako da se sav sadržaj preuzme s poslužitelja nakon svakog učitavanja stranice.
Onemogući slike: sprječava prikazivanje slika na svim web stranicama.
Onemogućivanje stilova: zanemaruje CSS svojstva kada se učita stranica.
Onemogućite JavaScript: Ograničava izvršavanje JavaScripta na svim stranicama.
Onemogućite proširenja: onemogućuje pokretanje instaliranih proširenja unutar preglednika.
Onemogući hakere za određenu web lokaciju: ako je Safari izmijenjen kako bi izričito riješio problematiku koja je specifična za aktivnu web stranicu, ova će opcija blokirati te izmjene tako da se stranica učita kao što bi to trebalo prije nego što se te izmjene uvode.
Onemogućivanje lokalnih ograničenja datoteka: omogućava pregledniku pristup datotekama na vašim lokalnim diskovima, što je zbog sigurnosnih razloga zadano ograničeno.
Onemogući ograničenja među zemljopisnim područjima: ta ograničenja postavljaju se prema zadanim postavkama kako bi se spriječio XSS i ostale opasne opasnosti. Međutim, često ih je potrebno privremeno onemogućiti u razvojne svrhe.
Dopusti JavaScript from Smart Search Field: Kada je omogućen, pruža mogućnost unošenja URL-ova s javascriptom: uključen izravno u adresnu traku.
Prihvatite certifikate SHA-1 kao nesigurne: SSL certifikati pomoću SHA-1 algoritma općenito se smatraju zastarjelima i ranjivi.