Kako koristiti alat za razvoj web preglednika

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.

1. Kliknite gumb Chromea glavnog izbornika, označen s tri vodoravne linije i smješten je u gornjem desnom kutu preglednika.
2. Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad gumba Više alata opcija.
3. Sada bi se trebao prikazati podizbornik. Odaberite opciju označenu Razvojni alati , Umjesto te stavke izbornika možete koristiti i sljedeće tipkovničke prečace: OS Chrome / OS Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (Izbornik) + + I COMMAND )
4. 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: Pruža mogućnost pregleda CSS i HTML koda, kao i uređivanje CSS-a na letu, gledajući učinke vaših promjena u stvarnom vremenu.Konzola: Chromeova JavaScript konzola omogućuje izravni unos naredbi kao i dijagnostičko uklanjanje pogrešaka.izvori: Omogućuje vam 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 Crta: Omogućuje dubinsku analizu svake aktivnosti koja se odvija unutar preglednika čim se pokrene zahtjev za učitavanje stranice ili aplikacije.
5. Pored ovih odjeljaka možete pristupiti i sljedećim alatima putem >> ikonu, koja se nalazi desno od Vremenska Crta kartica.Profil: Uništeno CPU profiler i Profilera za heap odjeljaka 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 na trenutnoj web stranici ili programu.revizije: Nudi načine za optimizaciju vremena učitavanja stranice i aplikacije i opće izvedbe.
6. Način rada uređaja omogućuje vam da vidite aktivnu stranicu u simulatoru koja gotovo da točno prikazuje onu na više 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. Za uključivanje Način rada uređaja uključivanje i isključivanje, odaberite ikonu mobilnog telefona smještenu izravno s lijeve strane Elementi kartica.
7. 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.

Lifewire Preporučeno čitanje:Top 25 Greasemonkey i Tampermonkey korisničke skripte

1. Kliknite gumb za glavni izbornik preglednika Firefox, kojeg predstavljaju tri vodoravne linije i nalaze se u gornjem desnom kutu prozora preglednika.
2. Kada se pojavi padajući izbornik, odaberite ikonu s oznakom razvijač , Web programer trebao bi biti prikazan izbornik 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 (Izbornik) + + I COMMAND ), Windows ( CTRL + SHIFT + I )Inspektor: 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 (Izbornik) + + C COMMAND ), Windows ( CTRL + SHIFT + C )Web konzola: Omogućuje 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 (Izbornik) + + K COMMAND ), Windows ( CTRL + SHIFT + K )Program za ispravljanje pogrešaka: JavaScript ispravljanje pogrešaka omogućuje vam da odredite i popravite nedostatke postavljanjem prekidnih točaka, pregledavanjem DOM čvorova, vanjskim izvorima crne kutije i još mnogo toga. Kao što je slučaj s Inspektor , ova značajka također podržava udaljeno uklanjanje pogrešaka. Tipkovnički prečac: Mac OS X ( ALT (Izbornik) + + S COMMAND ), Windows ( Ctrl + SHIFT + S) Urednik stilova: Omogućuje vam da stvorite 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 )Izvođenje: Pruža detaljnu analizu performansi mreže u aktivnoj stranici, 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: Navodi 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 (Izbornik) + COMMAND + Q ), Windows ( CTRL + SHIFT + P )Alatna traka za razvojne programere: Otvara interaktivni tumač naredbenog retka. Unesi Pomozite u interpretera za popis svih raspoloživih naredbi i njihove odgovarajuće sintakse. 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 preglednika: Pruža iste funkcije 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 pogled dizajna: Omogućuje vam odmah pregledavanje web stranice u različitim razlučivostima, izgledima i veličinama zaslona za oponašanje više uređaja, uključujući tablete i pametne telefone. Tipkovnički prečac: Mac OS X ( ALT (Izbornik) + COMMAND + M ), Windows ( CTRL + SHIFT + M )kapaljke: Prikazuje šesterokutni kôd boja za pojedinačno odabrane piksele.natuknice: 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 ( + U COMMAND ), Windows ( Ctrl + U )Dohvatite više alata: Otvara Web Toolbox za razvojne programere zbirka na Mozillinoj službenoj stranici za dodatke, s desetak popularnih ekstenzija kao što su Firebug i Greasemonkey.

Microsoft Edge / Internet Explorer

Obično se naziva i F12 razvojni alati , počast tipkovničkom 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 prikladnu skupinu monitora, debuggera, emulata i - sastavljači.

1. Klikni na Vise akcije izbornik, koji predstavlja tri točke i nalazi se u gornjem desnom kutu prozora preglednika. Kada se prikaže padajući izbornik, odaberite opciju označenu F12 razvojni alati , Kao što sam već spomenuo, možete pristupiti alatima putem F12 prečac na tipkovnici.
2. 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 uređivanje stilskih listova i HTML-a na aktivnoj stranici, čime se izmijenjeni rezultati odlaze. 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) Program za ispravljanje pogrešaka: 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, upotrebu propusne moći i još mnogo toga. Tipkovnički prečac: (Ctrl + 4) Izvođenje: 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 trenutnoj web stranici prikazivanjem vremenske zone korištenja memorije uz snimke s 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)
3. Za prikaz Konzola dok u bilo kojem od ostalih alata kliknite na gumb trga s desnim zagradom unutar njega, koji se nalazi u gornjem desnom kutu sučelja razvojnih alata.
4. Da biste odvojili, sučelje alata za razvojne programere kako bi postalo zaseban prozor, kliknite gumb predstavljen s dva kaskadna pravokutnika ili upotrijebite sljedeći prečac na tipkovnici: Ctrl + P , Možete vratiti alate natrag 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.

1. Kliknite na Safari u izborniku preglednika, koji se nalazi na vrhu zaslona. Kada se prikaže padajući izbornik, odaberite Postavke , Umjesto ove stavke izbornika možete koristiti i sljedeće tipkovničke prečace: COMMAND + zarez (,)
2. Safari je Postavke Sada bi se trebalo prikazati sučelje, preklapajući prozor vašeg preglednika. Klikni na Napredna ikona koja se nalazi na krajnjoj desnoj strani zaglavlja.
3. Napredna sada bi trebale biti vidljive postavke. Pri dnu zaslona označena je opcija Prikaži izbornik Razviti u traci izbornika , uz kvačicu. Ako se u okviru ne pojavi kvačica, kliknite je jednom da biste je postavili.
4. Zatvori Postavke sučelje klikom na crvenu 'x' koja se nalazi u gornjem lijevom kutu.
5. Sada biste trebali primijetiti novu opciju u izborniku preglednika koji se zove Razviti , koji se nalazi između Oznake i Prozor , 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 više od deset unaprijed definiranih korisničkih agenata, 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 inspektora: Pokreće glavno sučelje za Safariove dev alate, obično postavljene na dnu zaslona preglednika i sadrže sljedeće odjeljke: Elementi , Mreža , Resursi , Rokovi , Program za ispravljanje pogrešaka , skladištenje , Konzola .Prikaži konzolu pogreške: Također pokreće sučelje dev tools, izravno na Konzola kartica koja prikazuje pogreške, upozorenja i druge podatke koji se mogu pretraživati.Prikaži izvor stranice: Otvara Resursi koja prikazuje izvornu šifru za aktivnu stranicu kategoriziranu prema dokumentu.Prikaži resurse stranice: Obavlja istu funkciju kao i Prikaži izvor stranice opcija.Prikaži uređivač isječaka: Otvara novi prozor u kojem možete unijeti CSS i HTML kôd, pregledavajući njegov izlaz na licu mjesta.Prikaži alat za proširenje: Omogućuje stvaranje ili uređivanje Safari ekstenzija s CSS, HTML i JavaScript.Prikaži snimanje vremenske trake: Otvara Rokovi karticu i počinje prikazivati ​​zahtjeve za mrežom, izgled i informacije o prikazivanju, kao i JavaScript izvršavanje u stvarnom vremenu.Prazne predmemorije: Briše cijelu privremenu memoriju koja se trenutno pohranjuje na tvrdom disku.Onemogućivanje predmemorije: Zaustavlja Safari od 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ći stilove: Zanemaruje CSS svojstva kada se učita stranica.Onemogućite JavaScript: Ograničava izvršavanje JavaScripta na svim stranicama.Onemogućivanje proširenja: Onemogućuje pokretanje instaliranih proširenja unutar preglednika.Onemogućite hackove na web-lokaciji: Ako je Safari izmijenjen kako bi se eksplicitno riješila problematika specifična za aktivnu web stranicu, ova će opcija blokirati te promjene tako da se stranica učita kao što bi imala prije nego što se te izmjene uvode.Onemogućivanje lokalnih ograničenja datoteka: Omogućuje pregledniku pristup datotekama na vašim lokalnim diskovima, što je zbog sigurnosnih razloga zadano ograničeno.Onemogući ograničenja prekograničnog porijekla: Ta ograničenja postavljaju se prema zadanim postavkama kako bi spriječili XSS i druge potencijalne opasnosti. Međutim, često ih je potrebno privremeno onemogućiti u razvojne svrhe.Dopusti JavaScript iz polja Smart Search: Kada je omogućeno, omogućuje se unos URL-ova javascript: ugrađeni izravno u adresnu traku.Prihvatite certifikate SHA-1 kao nesigurne: SSL certifikati koji koriste algoritam SHA-1 su široko rasprostranjeni i ranjivi.