Kako uporabljati orodja za razvijalce spletnega brskalnika

2024 Avtor: Abigail Brown | [email protected]. Nazadnje spremenjeno: 2023-12-17 07:00

Poleg večine izdelovalcev brskalnikov, ki se osredotočajo na vsakdanje uporabnike, ki želijo brskati po spletu, skrbijo tudi za spletne razvijalce, oblikovalce in strokovnjake za zagotavljanje kakovosti, ki pomagajo zgraditi aplikacije in spletna mesta, do katerih ti uporabniki dostopajo, z integracijo zmogljivih orodja neposredno v same brskalnike.

Minili so dnevi, ko so edina orodja za programiranje in testiranje v brskalniku omogočala ogled izvorne kode strani in nič več. Današnji brskalniki vam omogočajo veliko globlji potop, tako da počnete stvari, kot so izvajanje in odpravljanje napak v izrezkih JavaScripta, pregledovanje in urejanje elementov DOM, spremljanje omrežnega prometa v realnem času, ko se vaša aplikacija ali stran nalaga, da prepoznate ozka grla, analizirate delovanje CSS in zagotovite, da je vaša koda ne uporablja preveč pomnilnika ali preveč ciklov procesorja in še veliko več.

Z vidika testiranja lahko s pomočjo čarovnije odzivnega dizajna in vgrajenih simulatorjev reproducirate, kako se bo aplikacija ali spletna stran upodobila v različnih brskalnikih ter na različnih napravah in platformah. Najboljši del je, da lahko vse to počnete, ne da bi morali zapustiti brskalnik!

Spodnje vadnice vas vodijo skozi dostop do teh orodij za razvijalce v več priljubljenih spletnih brskalnikih.

Google Chrome

Orodja za razvijalce Chrome vam omogočajo urejanje kode in odpravljanje napak, revizijo posameznih komponent za razkrivanje težav z zmogljivostjo, simulacijo različnih zaslonov naprav, vključno s tistimi, ki uporabljajo Android ali iOS, in izvajanje številnih drugih uporabnih funkcij.

1. Izberite Chromov glavni meni, označen s tremi vodoravnimi črtami in se nahaja v zgornjem desnem kotu brskalnika.

2. Ko se prikaže spustni meni, premaknite miškin kazalec nad možnost Več orodij.

   

3. Sedaj bi se moral prikazati podmeni. Izberite možnost z oznako Orodja za razvijalce. Namesto tega menijskega elementa lahko uporabite tudi naslednjo bližnjico na tipkovnici: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +COMMAND+I)

   

4. Vmesnik Chromovih orodij za razvijalce bi moral biti zdaj prikazan, kot je prikazano na tem primeru posnetka zaslona. Začetna postavitev, ki jo vidite, se lahko nekoliko razlikuje od tiste, ki je predstavljena tukaj, odvisno od vaše različice Chroma. Glavno središče orodij za razvijalce, ki se običajno nahaja na dnu ali na desni strani zaslona, vsebuje naslednje zavihke.

5. Poleg teh razdelkov lahko dostopate tudi do naslednjih orodij prek ikone >>, ki se nahaja desno od Performance zavihek.

   • Memory: spremljajte in beležite porabo pomnilnika na spletni strani. Vidite lahko, kako težak je JavaScript na vašem spletnem mestu.
   • Varnost: Označuje težave s certifikati in druge težave, povezane z varnostjo aktivne strani ali aplikacije.
   • Application: Preverite vire, ki jih uporablja spletna aplikacija. Pridobite popolno razčlenitev tega, kar se uporablja.
   • Revizije: Ponuja načine za optimizacijo časa nalaganja in splošne učinkovitosti strani ali aplikacije.

   

6. Device Mode vam omogoča ogled aktivne strani v simulatorju, ki jo upodablja skoraj natanko tako, kot bi bila videti na eni od več kot ducat naprav, vključno z več dobro znanimi napravami Android in modeli iOS, kot so iPad, iPhone in Samsung Galaxy. Prav tako imate možnost posnemati ločljivosti zaslona po meri, da ustrezajo vašim posebnim razvojnim ali preskusnim potrebam.

   Za vklop in izklop Device Mode izberite ikono mobilnega telefona, ki se nahaja neposredno na levi strani Elementi zavihek.

   

7. Prilagodite lahko tudi videz in občutek svojih razvijalskih orodij tako, da najprej izberete menijski gumb, ki ga predstavljajo tri navpično postavljene pike in se nahaja na skrajni desni strani zgoraj omenjenih zavihkov.

   V tem spustnem meniju lahko prestavite priklopno postajo, prikažete ali skrijete različna orodja, kot tudi zaženete naprednejše elemente, kot je inšpektor naprav. Ugotovili boste, da je sam vmesnik orodij za razvijalce zelo prilagodljiv z nastavitvami, ki jih najdete v tem razdelku.

   

Mozilla Firefox

Firefoxov razdelek za spletne razvijalce vključuje orodja za oblikovalce, razvijalce in preizkuševalce, kot sta urejevalnik slogov in kapalka za ciljanje slikovnih pik.

1. Izberite Firefoxov glavni meni, predstavljen s tremi vodoravnimi črtami in se nahaja v zgornjem desnem kotu okna brskalnika.

2. Ko se prikaže spustni meni, izberite Spletni razvijalec.

   

3. Sedaj bi moral biti prikazan meni za spletne razvijalce, ki vsebuje naslednje možnosti. Opazili boste, da ima večina elementov menija z njimi povezane bližnjice na tipkovnici.

   • Preklop orodij: prikaže ali skrije vmesnik orodij za razvijalce, običajno na dnu okna brskalnika. Bližnjica na tipkovnici: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Omogoča pregledovanje in/ali prilagajanje kode CSS in HTML na aktivni strani kot tudi na prenosni napravi prek oddaljenega odpravljanja napak. Bližnjica na tipkovnici: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Spletna konzola: Omogoča vam izvajanje izrazov JavaScript znotraj aktivne strani ter pregledovanje raznolikega nabora zabeleženih podatkov, vključno z varnostnimi opozorili, omrežnimi zahtevami, sporočili CSS in drugim. Bližnjica na tipkovnici: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Razhroščevalnik JavaScript vam omogoča natančno določanje in odpravljanje napak z nastavitvijo prelomnih točk, pregledovanjem vozlišč DOM, črnim poljem zunanjih virov in še veliko več. Tako kot v primeru Inspectorja ta funkcija podpira tudi oddaljeno odpravljanje napak. Bližnjica na tipkovnici: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Urejevalnik slogov: Omogoča ustvarjanje novih slogovnih listov in njihovo vključitev v aktivno spletno stran ali urejanje obstoječih listov in preizkusite, kako so vaše spremembe upodobljene v brskalniku s samo enim klikom. Bližnjica na tipkovnici: Mac OS X, Windows (SHIFT+F7)
   • Performance: Ponuja podrobno razčlenitev omrežne zmogljivosti aktivne strani, podatke o hitrosti sličic, čas in stanje izvajanja JavaScript, utripanje barve in še veliko več. Bližnjica na tipkovnici: Mac OS X, Windows (SHIFT+F5)
   • Network: Navede vsako omrežno zahtevo, ki jo sproži brskalnik, skupaj z ustrezno metodo, izvorno domeno, vrsto, velikostjo in pretečenim časom. Bližnjica na tipkovnici: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Oglejte si predpomnilnik in piškotke, ki jih shranjuje spletno mesto. Bližnjica na tipkovnici: (SHIFT+F9)
   • Orodna vrstica za razvijalce: odpre interaktivni tolmač ukazne vrstice. Vnesite help v tolmač za seznam vseh razpoložljivih ukazov in njihovo pravilno sintakso. Bližnjica na tipkovnici: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Omogoča ustvarjanje in izvajanje spletnih aplikacij prek dejanske naprave s sistemom Firefox OS ali prek simulatorja Firefox OS. Bližnjica na tipkovnici: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: Zagotavlja enako funkcionalnost kot spletna konzola (glejte zgoraj). Vendar so vsi vrnjeni podatki za celotno aplikacijo Firefox (vključno z razširitvami in funkcijami na ravni brskalnika) v nasprotju samo z aktivno spletno stranjo. Bližnjica na tipkovnici: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Pogled odzivnega oblikovanja: Omogoča takojšen ogled spletne strani v različnih ločljivostih, postavitvah in velikostih zaslona za posnemanje več naprav, vključno s tablicami in pametnimi telefoni. Bližnjica na tipkovnici: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Prikaže šestnajstiško barvno kodo za posamezne izbrane piksle.
   • Scratchpad: Scratchpad vam omogoča pisanje, urejanje, integracijo in izvajanje izrezkov kode JavaScript v pojavnem oknu Firefoxa. Odprite interaktivni dokument JavaScript, ki vam omogoča pisanje kode in ga preizkusite na spletnem mestu. Bližnjica na tipkovnici: (SHIFT+F4)
   • Service Workers: Odpravite storitvene delavce v vaši spletni aplikaciji. Pridobite podrobne informacije o njihovi uspešnosti in napakah.
   • Izvorna koda strani: izvirno orodje za razvijalce, ki temelji na brskalniku, 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)
   • Get More Tools: odpre zbirko Web Developer's Toolbox na Mozillinem uradnem spletnem mestu z dodatki, ki vsebuje približno ducat priljubljenih razširitev, kot so kot Firebug in Greasemonkey.

   

Microsoft Edge/Internet Explorer

Običajno imenovano F12 Developer Tools, poklon bližnjici na tipkovnici, ki je zagnala vmesnik od prejšnjih različic Internet Explorerja, nabora orodij za razvijalce v IE11 in Microsoft Edge je od svojih začetkov prehodil dolgo pot s ponudbo zelo priročne skupine monitorjev, razhroščevalnikov, emulatorjev in sprotnih prevajalnikov.

Microsoft ne podpira več Internet Explorerja in priporoča, da posodobite na novejši brskalnik Edge. Pojdite na njihovo spletno mesto in prenesite najnovejšo različico.

1. Izberite Več dejanj, ki ga predstavljajo tri pike in se nahaja v zgornjem desnem kotu okna brskalnika.

   

2. Ko se prikaže spustni meni, izberite možnost z oznako Orodja za razvijalce.

   

3. Razvojni vmesnik bi moral biti zdaj prikazan, običajno na dnu okna brskalnika. Na voljo so naslednja orodja, do katerih lahko dostopate tako, da kliknete naslov ustreznega zavihka ali uporabite pripadajočo bližnjico na tipkovnici.

   

   • DOM Explorer: Omogoča vam urejanje slogovnih listov in HTML-ja na aktivni strani, ki sproti upodablja spremenjene rezultate. Uporablja funkcijo IntelliSense za samodejno dokončanje kode, kjer je primerno. Bližnjica na tipkovnici: (CTRL+1)
   • Console: Omogoča pošiljanje informacij o odpravljanju napak, vključno s števci, časovniki, sledmi in prilagojenimi sporočili prek integriranega API-ja. Omogoča tudi vstavljanje kode v aktivno spletno stran in spreminjanje vrednosti, dodeljenih posameznim spremenljivkam v realnem času. Bližnjica na tipkovnici: (CTRL+2)
   • Debugger: Omogoča vam nastavitev prekinitvenih točk in odpravljanje napak v vaši kodi med izvajanjem, vrstico za vrstico, če je potrebno. Bližnjica na tipkovnici: (CTRL+3)
   • Network: Navede vse omrežne zahteve, ki jih sproži brskalnik med nalaganjem in izvajanjem strani, vključno s podrobnostmi protokola, vrsto vsebine, uporabo pasovne širine in še veliko več. Bližnjica na tipkovnici: (CTRL+4)
   • Zmogljivost: Podrobnosti o hitrosti sličic, izkoriščenosti procesorja in drugih meritvah, povezanih z zmogljivostjo, ki vam pomagajo pospešiti nalaganje strani in druge dejavnosti. Bližnjica na tipkovnici: (CTRL+5)
   • Memory: Pomaga vam izolirati in popraviti morebitno uhajanje pomnilnika na trenutni spletni strani s prikazom časovnice uporabe pomnilnika skupaj s posnetki iz različnih časovnih intervalov. Bližnjica na tipkovnici: (CTRL+6)
   • Emulacija: Pokaže, kako bi bila aktivna stran upodobljena v različnih ločljivostih in velikostih zaslona, posnema pametne telefone, tablične računalnike in druge naprave. Omogoča tudi možnost spreminjanja uporabniškega agenta in orientacije strani ter simulacijo različnih geolokacij z vnosom zemljepisne širine in dolžine. Bližnjica na tipkovnici: (CTRL+7)

4. Za prikaz Konzole med katerim koli drugim orodjem pritisnite kvadratni gumb z desnim oklepajem znotraj njega, ki se nahaja v zgornjem desnem kotu vmesnika razvojnih orodij.

   

5. Če želite odklopiti vmesnik orodij za razvijalce, tako da postane ločeno okno, izberite dva kaskadna pravokotnika ali uporabite naslednjo bližnjico na tipkovnici: CTRL+P. Orodja lahko postavite nazaj na prvotno mesto tako, da drugič pritisnete CTRL+P.

   

Apple Safari (samo Mac)

Safarijev raznolik nabor orodij za razvijalce odraža veliko skupnost razvijalcev, ki uporabljajo Mac za svoje potrebe oblikovanja in programiranja. Poleg zmogljive konzole in tradicionalnih funkcij beleženja in odpravljanja napak sta na voljo tudi odziven način oblikovanja, ki je enostaven za uporabo, in orodje za ustvarjanje lastnih razširitev brskalnika.

1. Izberite Safari v meniju brskalnika, ki se nahaja na vrhu zaslona. Ko se prikaže spustni meni, izberite Preferences. Namesto tega menijskega elementa lahko uporabite tudi naslednjo bližnjico na tipkovnici: COMMAND+VEJICA(,)

   

2. Zdaj bi moral biti prikazan vmesnik

   Safari Preferences, ki prekriva okno brskalnika. Izberite ikono Napredno, ki se nahaja na skrajni desni strani glave.

   

3. Nastavitve Advanced bi morale biti zdaj vidne. Na dnu tega zaslona je možnost z oznako Prikaži meni za razvoj v menijski vrstici, ki jo spremlja potrditveno polje. Če v polju ni kljukice, jo kliknite enkrat, da jo tam postavite.

   

4. Zaprite vmesnik Preferences.

5. Zdaj bi morali opaziti novo možnost v meniju brskalnika z imenom Razvoj, ki se nahaja med Zaznamki in Okno. Kliknite to postavko menija. Zdaj bi moral biti prikazan spustni meni, ki vsebuje naslednje možnosti.

   • Odpri stran z: Omogoča odpiranje aktivne spletne strani v enem od drugih brskalnikov, ki so trenutno nameščeni na vašem Macu.
   • Uporabniški posrednik: Omogoča vam izbiro med več kot ducatom vnaprej določenih vrednosti uporabniškega agenta, vključno z več različicami Chroma, Firefoxa in Internet Explorerja, ter definiranje lastnih po meri niz.
   • Vstopite v način odzivnega oblikovanja: upodobi trenutno stran, kot bi bila videti na različnih napravah in pri različnih ločljivostih zaslona.
   • Pokaži Web Inspector: Zažene glavni vmesnik za Safarijeva razvijalska orodja, ki je običajno postavljen na dno zaslona vašega brskalnika in vsebuje naslednje razdelke: Elementi, Omrežje, Viri, Časovnice, Razhroščevalnik, Shramba, Konzola.
   • Prikaži konzolo za napake: zažene tudi vmesnik orodij za razvijalce, neposredno na zavihek konzole, ki prikazuje napake, opozorila in drugo, po katerem je mogoče iskati. dnevniški podatki.
   • Prikaži izvorno kodo strani: Odpre zavihek Viri, ki prikazuje izvorno kodo za aktivno stran, razvrščeno po dokumentu.
   • Pokaži vire strani: Izvede isto funkcijo kot možnost Prikaži vir strani.
   • Pokaži urejevalnik izrezkov: Odpre novo okno, kjer lahko vnesete kodo CSS in HTML ter si sproti ogledate njen izpis.
   • Pokaži graditelja razširitev: Omogoča ustvarjanje ali urejanje razširitev Safari s CSS, HTML in JavaScript.
   • Pokaži posnetek časovne osi: Odpre zavihek Časovnice in začne prikazovati omrežne zahteve, postavitev in informacije o upodabljanju ter izvajanje JavaScripta v realnem času.
   • Prazni predpomnilnike: Izbriše celoten predpomnilnik, ki je trenutno shranjen na vašem trdem disku.
   • Onemogoči predpomnilnike: Safariju prepreči predpomnjenje, tako da se vsa vsebina pridobi iz strežnika ob vsakem nalaganju strani.
   • Onemogoči slike: Prepreči upodabljanje slik na vseh spletnih straneh.
   • Onemogoči sloge: Prezre lastnosti CSS, ko je stran naložena.
   • Onemogoči JavaScript: Omejitev izvajanja JavaScripta na vseh straneh.
   • Onemogoči razširitve: Prepoveduje izvajanje vseh nameščenih razširitev v brskalniku.
   • Disable Site-specific Hacks: Če je bil Safari spremenjen tako, da izrecno obravnava težave, značilne za aktivno spletno stran, bo ta možnost blokirala te spremembe, tako da stran naloži, kot bi se pred uvedbo teh sprememb.
   • Onemogoči lokalne omejitve datotek: Omogoča brskalniku dostop do datotek na vaših lokalnih diskih, dejanje, ki je privzeto omejeno iz varnostnih razlogov.
   • Onemogoči navzkrižne omejitve: Te omejitve so privzeto uvedene za preprečevanje XSS in drugih morebitnih nevarnosti. Vendar jih je pogosto treba začasno onemogočiti za razvojne namene.
   • Dovoli JavaScript iz pametnega iskalnega polja: Ko je omogočeno, omogoča vnos URL-jev z javascriptom: vgrajenim neposredno v naslovno vrstico.
   • Potrdila SHA-1 obravnavajte kot nevarna: Potrdila SSL, ki uporabljajo algoritem SHA-1, na splošno veljajo za zastarela in ranljiva.