Kako uporabljati orodja za razvijalce spletnih brskalnikov

Poleg večine proizvajalcev brskalnikov, ki se osredotočajo na vsakodnevnega uporabnika, ki si želijo brskati po spletu, skrbijo tudi za spletne razvijalce, oblikovalce in strokovnjake za zagotavljanje kakovosti, ki pomagajo pri gradnji aplikacij in spletnih mest, do katerih dostopajo ti uporabniki, z integriranjem močnih orodij v brskalnike sami.

Gone so dnevi, ko so edina orodja za programiranje in preizkušanje v brskalniku omogočila ogled izvorne kode strani in nič več. Današnji brskalniki vam omogočajo veliko globlje potop, tako da naredite stvari, kot so izvrševanje in odpravljanje napak JavaScript-a, pregledovanje in urejanje elementov DOM, spremljanje omrežnega prometa v realnem času, ko vaša aplikacija ali stran nalaga, da prepoznajo ozka grla, analizira učinkovitost CSS in zagotovi, da je vaša koda ne uporabljajte preveč pomnilnika ali preveč ciklov procesorja in še veliko več. Z vidika testiranja lahko reproduciramo, kako se bo aplikacija ali spletna stran prikazala v različnih brskalnikih, pa tudi na različnih napravah in platformah s čarom odzivnega dizajna in vgrajenih simulatorjev. Najboljši del je, da lahko vse to storite, ne da bi morali zapustiti brskalnik!

Spodnje vaje vas vodijo skozi kako dostopate do teh orodij za razvijalce v več priljubljenih spletnih brskalnikih.

Google Chrome

Chrome-ova orodja za razvijalce vam omogočajo urejanje in odpravljanje napak kode, revizijo posameznih komponent za razkritje težav z zmogljivostjo, simulacijo različnih zaslonov naprav, vključno s tistimi, ki uporabljajo Android ali iOS, in opravlja več drugih uporabnih funkcij.

1. Kliknite gumb glavnega menija Chrome, označen s tremi vodoravnimi črtami, ki se nahajajo v zgornjem desnem kotu brskalnika.
2. Ko se prikaže spustni meni, pokažite kazalec miške nad Več orodij možnost.
3. Zdaj naj se prikaže podmeni. Izberite možnost, ki je označena Orodja za razvijalce . Namesto tega elementa menija lahko uporabite naslednjo bližnjico na tipkovnici: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Zdaj je treba prikazati vmesnik orodij za razvijalce za Chrome, kot je prikazano v tem primeru. Glede na različico Chroma se lahko začetna razporeditev, ki jo vidite, nekoliko razlikuje od prikazane tukaj. Glavno vozlišče orodij za razvijalce, ki se navadno nahaja na spodnji ali desni strani zaslona, ​​vsebuje naslednje zavihke.Elementi: Omogoča pregledovanje CSS-a in HTML-kode ter urejanje CSS-ja na spletu, pri čemer vidite učinke sprememb v realnem času.Konzola: Chromeova konzola JavaScript omogoča neposreden vnos ukaza in diagnostično razhroščevanje.Viri: Omogoča vam debug kode JavaScript prek zmogljivega grafičnega vmesnika.Omrežje: Razvrsti in prikaže podrobne informacije o vsakem povezani operaciji na aktivni aplikaciji ali strani, vključno s popolnimi glavi zahtev in odziva ter naprednimi meritvami merjenja časa.Časovna razporeditev: Omogoča poglobljeno analizo vsake dejavnosti, ki poteka v brskalniku, takoj ko se zažene zahteva za nalaganje strani ali aplikacije.
5. Poleg teh razdelkov lahko dostopate tudi do naslednjih orodij prek >> ikona, ki se nahaja desno od Časovnica tab.Profil: Sproščen v CPU profiler in Heap profiler razdelkov, omogoča celovito uporabo pomnilnika in celoten čas izvajanja aktivne aplikacije ali strani.Varnost: Označuje težave s certifikatom in druge težave, povezane z varnostjo, z aktivno stranjo ali aplikacijo.Viri: Tu lahko pregledate piškotke, lokalno shranjevanje, predpomnilnik aplikacij in druge lokalne vire podatkov, ki jih uporablja trenutna spletna stran ali aplikacija.Revizije: Ponuja načine za optimizacijo časa nalaganja strani ali aplikacije in splošne uspešnosti.
6. Način naprave vam omogoča, da si ogledate aktivno stran v simulatorju, ki jo naredi skoraj enako kot pri enem od več kot ducat naprav, vključno z več znanimi modeli Android in iOS, kot so iPad, iPhone in Samsung Galaxy. Imate tudi možnost, da posnemate prilagojene ločljivosti zaslona, ​​da ustrezajo vašim potrebam glede razvoja ali testiranja. Za preklop Način naprave vklopite ali izklopite, izberite ikono mobilnega telefona, ki se nahaja neposredno na levi strani Elementi tab.
7. Prilagodite lahko tudi videz in občutek orodij za razvijalce tako, da najprej kliknete gumb menija, ki ga predstavljajo tri navpične pike in ki se nahajajo na skrajni desni strani zgoraj navedenih zavihkov. V tem spustnem meniju lahko prestavite priklopno postajo, prikažete ali skrijete različna orodja in začnete bolj napredne elemente, kot je inšpektor naprave. Ugotovili boste, da je vmesnik dev orodij zelo prilagodljiv z nastavitvami, ki so v tem razdelku.

Mozilla Firefox

Oddelek za razvijalce Firefoxa vključuje orodja za oblikovalce, razvijalce in preizkuševalce, kot je urejevalnik sloga in usmerjevalnik za ciljanje na slikovne točke.

Lifewire Priporočeno branje:Top 25 Greasemonkey in uporabniške skripte Tampermonkey

1. Kliknite gumb glavnega menija Firefoxa, ki ga predstavljajo tri horizontalne črte in se nahaja v zgornjem desnem kotu okna brskalnika.
2. Ko se prikaže spustni meni, izberite ikono, ki je označena Razvijalec . The Spletni razvijalec zdaj bi moral biti prikazan meni, ki vsebuje naslednje možnosti.Opazili boste, da ima večina elementov v meniju bližnjične tipke, povezane z njimi.Toggle Tools: Prikaže ali skrije vmesnik orodij za razvijalce, ki je običajno nameščen na dnu okna brskalnika. Bližnjica na tipkovnici: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )Inšpektor: Omogoča pregledovanje in / ali spreminjanje CSS in HTML kode na aktivni strani in na prenosni napravi z oddaljenim odpravljanjem napak. Bližnjica na tipkovnici: Mac OS X ( ALT (MOŽNOST) + KOMAND + C ), Windows ( CTRL + SHIFT + C )Spletna konzola: Omogoča izvajanje izrazov JavaScript na aktivni strani in pregled raznovrstnega nabora podatkov, vključno z varnostnimi opozorili, omrežnimi zahtevami, sporočili CSS in drugimi. Bližnjica na tipkovnici: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )Debugger: The JavaScript razhroščevalnik vam omogoča natančno določanje in odpravljanje napak z nastavljanjem prekinitvenih točk, pregledovanjem vozlišč DOM, črnim boksanjem zunanjih virov in še veliko več. Tako kot v primeru Inšpektor , ta funkcija podpira oddaljeno odpravljanje napak. Bližnjica na tipkovnici: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Urejevalnik slogov: Omogoča vam, da ustvarite nove slogovne predloge in jih vključite z aktivno spletno stranjo ali uredite obstoječe liste in preizkusite, kako spremembe v brskalniku prikazujejo samo z enim klikom. Bližnjica na tipkovnici: Mac OS X, Windows ( SHIFT + F7 )Izvedba: Zagotavlja podrobno razčlenitev uspešnosti omrežja aktivne strani, podatkov o hitrosti prenosa podatkov, časa izvedbe in stanja izvajanja JavaScripta, utripanja barve in še veliko več. Bližnjica na tipkovnici: Mac OS X, Windows ( SHIFT + F5 )Omrežje: Navede vsako zahtevo omrežja, ki jo sproži brskalnik, skupaj z ustrezno metodo, izvorno domeno, vrsto, velikostjo in časom, ki je pretekel. Bližnjica na tipkovnici: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )Orodna vrstica razvijalca: Odpre interaktivni tolmač ukazne vrstice. Vnesite pomoč v tolmač za seznam vseh razpoložljivih ukazov in njihovo ustrezno sintakso. Bližnjica na tipkovnici: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Omogoča ustvarjanje in izvajanje spletnih aplikacij z dejansko napravo, ki teče v Firefox OS ali s simulatorjem Firefox OS. Bližnjica na tipkovnici: Mac OS X, Windows ( SHIFT + F8 )Brskalna konzola: Omogoča enako funkcijo kot Spletna konzola (glej zgoraj). Vendar so vsi podatki vrnjeni za celotno aplikacijo Firefox (vključno z razširitvami in funkcijami na ravni brskalnika), v nasprotju z aktivno spletno stranjo. Bližnjica na tipkovnici: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )Odzivni pogled na oblikovanje: Omogoča takojšnjo ogled spletne strani v različnih resolucijah, postavitvah in velikostih zaslona, ​​da posnemate več naprav, vključno s tabličnimi računalniki in pametnimi telefoni. Bližnjica na tipkovnici: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )Eyedropper: Prikaže šestnajsti barvni kod za posamezno izbrane pike.Scratchpad: Omogoča vam pisanje, urejanje, integracijo in izvajanje odrezkov kode JavaScript iz okna Firefox-a. Bližnjica na tipkovnici: Mac OS X, Windows ( SHIFT + F4 )Vir strani: Izvirno orodje za razvijalce, ki temelji na brskalnikih, ta možnost preprosto prikaže razpoložljivo izvorno kodo za aktivno stran. Bližnjica na tipkovnici: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Pridobite več orodij: Odpre Orodje za spletne razvijalce zbirko na Mozillinem uradnem spletnem mestu z dodatki, ki vsebuje približno ducate priljubljenih razširitev, kot sta Firebug in Greasemonkey.

Microsoft Edge / Internet Explorer

Običajno se imenuje F12 orodja za razvijalce , hvaležnost bližnjici na tipkovnici, ki je začela uporabljati vmesnik od starejših različic Internet Explorerja, dev orodja v IE11 in Microsoft Edge, je že od njenega začetka daleč daleč s ponudbo zelo priročne skupine monitorjev, odpravilnikov, emulatorjev in prevajalniki.

1. Kliknite na Več ukrepov meni, ki ga predstavljajo tri pike in se nahaja v zgornjem desnem kotu okna brskalnika. Ko se prikaže spustni meni, izberite možnost, ki je označena F12 orodja za razvijalce . Kot sem že omenil, lahko dostopate do orodij tudi prek F12 bližnjica na tipkovnici.
2. Razvojni vmesnik je zdaj prikazan, navadno na dnu okna brskalnika. Na voljo so naslednja orodja, od katerih je vsaka dostopna s klikom na ustrezen naslov zavihka ali s spremljajočo bližnjično tipko.Raziskovalec DOM: Omogoča vam, da urejate slogovne predloge in HTML na aktivni strani, tako da spremenite rezultate, ko greste. Uporablja funkcijo IntelliSense do kode za samodokončanje, kjer je to ustrezno. Bližnjica na tipkovnici: (CTRL + 1) Konzola: Omogoča pošiljanje razhroščevalnih informacij, vključno s števci, časovniki, sledmi in prilagojenimi sporočili prek integriranega API-ja. Prav tako vam omogoča, da vnesete kodo v aktivno spletno stran in spremenite vrednosti, dodeljene posameznim spremenljivkam v realnem času. Bližnjica na tipkovnici: (CTRL + 2) Debugger: Omogoča nastavitev prekinitvenih točk in odpravljanje napak pri izvajanju, po potrebi po vrstici. Bližnjica na tipkovnici: (CTRL + 3) Omrežje: Navede vsako omrežno zahtevo, ki jo je brskalnik začel med nalaganjem in izvedbo strani, vključno s podrobnostmi protokola, vrsto vsebine, uporabo pasovne širine in še veliko več. Bližnjica na tipkovnici: (CTRL + 4) Izvedba: Podrobnosti o stopnjah okvirja, uporabi CPU in drugih meritvah, povezanih z zmogljivostjo, ki vam pomagajo pospešiti čas nalaganja strani in druge dejavnosti. Bližnjica na tipkovnici: (CTRL + 5) Spomin: Pomaga vam, da na trenutni spletni strani izolirate in popravite morebitne izgube spomina tako, da prikažete časovno črto za uporabo pomnilnika skupaj s posnetki iz različnih časovnih presledkov. Bližnjica na tipkovnici: (CTRL + 6) Emulacija: Prikazuje, kako bi se aktivna stran prikazala v različnih ločljivostih in velikostih zaslona, ​​emuliranju pametnih telefonov, tabličnih računalnikov in drugih naprav. Zagotavlja tudi možnost spreminjanja uporabniškega posrednika in orientacije strani ter simulacijo različnih geolokacij z vnosom zemljepisne širine in dolžine. Bližnjica na tipkovnici: (CTRL + 7)
3. Če želite prikazati Konzola medtem ko v katerem koli drugem orodju kliknite na kvadratni gumb z desnim nosilcem znotraj nje, ki se nahaja v zgornjem desnem kotu vmesnika razvojnih orodij.
4. Če želite razveljaviti orodje vmesnika za razvijalce, tako da postane ločeno okno, kliknite gumb, ki ga predstavljata dva kaskadna pravokotnika, ali uporabite naslednjo bližnjično tipko: CTRL + P . Orodja lahko postavite nazaj na njihovo prvotno lokacijo s pritiskom na CTRL + P drugič.

Apple Safari (samo za OS X)

Raznolik program dev devetih odborov odseva veliko razvijalsko skupnost, ki uporablja Mac za svoje potrebe po načrtovanju in programiranju. Poleg močne konzole in tradicionalnih funkcij beleženja in razhroščevanja so na voljo tudi enostaven za uporabo odziven način oblikovanja in orodje za ustvarjanje lastnih brskalnikov.

1. Kliknite na Safari v meniju brskalnika, ki se nahaja na vrhu zaslona. Ko se prikaže spustni meni, izberite Nastavitve . Namesto tega elementa menija lahko uporabite naslednjo bližnjico na tipkovnici: COMMAND + COMMA (,)
2. Safari's Nastavitve zdaj bi bilo treba prikazati vmesnik, prekrivati ​​okno brskalnika. Kliknite na Napredno ikona, ki se nahaja na skrajni desni strani glave.
3. The Napredno zdaj bi morali biti vidni preferenciali. Na dnu tega zaslona je označena možnost Pokaži meni Razvijal v menijski vrstici , skupaj s potrditvenim poljem. Če v okencu ni nobenega kljukica, ga kliknite enkrat, da ga postavite tam.
4. Zapri Nastavitve vmesnik s klikom na rdečo 'x' v zgornjem levem kotu.
5. V meniju z brskalnikom, ki ste ga imenovali, si zdaj želite ogledati novo možnost Razviti , ki se nahaja med Zaznamki in Okno . Kliknite na ta element menija. Zdaj je treba prikazati spustni meni, ki vsebuje naslednje možnosti.Odpri stran z: Omogoča, da odprete aktivno spletno stran v enem od drugih brskalnikov, ki so trenutno nameščeni v računalniku Mac.Uporabniški agent: Omogoča vam, da izberete več kot ducat vnaprej določenih vrednosti uporabniškega posrednika, vključno z več različicami Chroma, Firefoxa in Internet Explorerja, ter določite svoj lasten niz po meri.Vstopite v način odzivnega oblikovanja: Prikazuje trenutno stran, ki se prikaže na različnih napravah in pri različnih ločljivostih zaslona.Pokaži spletni inšpektor: Zagon glavnega vmesnika za orodja devarijev Safari, ki se navadno nahaja na dnu zaslona brskalnika in vsebuje naslednje dele: Elementi , Omrežje , Viri , Časovni razporedi , Debugger , Skladiščenje , Konzola .Prikaži konzolo za napake: Prav tako sproži vmesnik dev orodij, neposredno na Konzola z jezičkom, ki prikazuje napake, opozorila in druge podatke, ki jih je mogoče iskati.Prikaži vir strani: Odpre Viri kartica, ki prikazuje izvorno kodo za aktivno stran, ki je kategorizirana po dokumentu.Prikaži vire strani: Izvaja isto funkcijo kot Prikaži vir strani možnost.Prikaži prikažnik urejevalnika: Odpre novo okno, kjer lahko vnesete CSS in HTML kodo, predogled njene proizvodnje na letalu.Pokaži razširjevalnik: Omogoča ustvarjanje ali urejanje razširitev Safari s CSS, HTML in JavaScriptom.Prikaži časovno snemanje: Odpre Časovni razporedi zavihek in začne prikazovati zahteve omrežja, informacije o postavitvi in ​​prikazu in izvajanje JavaScript v realnem času.Empty Caches: Izbriše celoten predpomnilnik, ki je trenutno shranjen na trdem disku.Onemogoči predpomnilnike: Zapri Safari iz predpomnjenja, tako da se vsa vsebina pri vsakem nalaganju strani vzame s strežnika.Onemogoči slike: Preprečuje prikaz slik na vseh spletnih straneh.Onemogoči sloge: Prezri lastnosti CSS, ko je stran naložena.Onemogoči JavaScript: Omejuje izvajanje JavaScript na vseh straneh.Onemogoči razširitve: Prepove vse nameščene razširitve v brskalniku.Onemogoči hack-specific: Če je bil Safari spremenjen, da bi izrecno obravnaval težave, povezane z aktivno spletno stranjo, bo ta možnost blokirala te spremembe, tako da bo stran obremenjena, kot bi jo imeli pred uvedbo teh sprememb.Onemogoči lokalne omejitve datotek: Omogoča brskalniku dostop do datotek na lokalnih diskih, ki je zaradi varnostnih razlogov privzeto omejeno.Onemogočanje omejitev navzkrižnega izvora: Te omejitve so privzeto nameščene, da preprečijo XSS in druge morebitne nevarnosti. Vendar pa jih je pogosto treba začasno onemogočiti v razvojne namene.Dovoli JavaScript iz polja za pametno iskanje: Ko je omogočeno, omogoča vnos URL-jev z javascript: neposredno vključeni v naslovno vrstico.S certifikati SHA-1 obravnavajte kot nezanesljive: SSL certifikati, ki uporabljajo algoritem SHA-1, veljajo za zastarele in ranljive.