Vgrajeni orodji za spletne oblikovalce, razvijalce in testere
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.
- Kliknite gumb glavnega menija Chrome, označen s tremi vodoravnimi črtami, ki se nahajajo v zgornjem desnem kotu brskalnika.
- Ko se prikaže spustni meni, pomaknite miškin kazalec nad možnost Več orodij .
- Zdaj naj se prikaže podmeni. Izberite možnost, označeno z orodji 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 )
- 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 ukazov in diagnostično razhroščevanje.
Viri: Omogoča vam debug kode JavaScript prek zmogljivega grafičnega vmesnika.
Omrežje: razvršča in prikazuje 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 vrstica: Omogoča poglobljeno analizo vsake dejavnosti, ki poteka v brskalniku, takoj ko se zažene zahteva za nalaganje strani ali aplikacije. - Poleg teh razdelkov lahko dostopate tudi do naslednjih orodij s pomočjo ikone >> , ki je na desni strani zavihek Timeline .
Profil: razporejen v razdelilnik profilov CPU in profil profilov Heap , omogoča celovito uporabo pomnilnika in celoten čas izvajanja aktivne aplikacije ali strani.
Varnost: z aktivno stranjo ali aplikacijo označuje težave s certifikatom in druge težave v zvezi z varnostjo.
Viri: tukaj 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. - Device Mode vam omogoča, da si ogledate aktivno stran v simulatorju, zaradi česar je skoraj enako, kot se je prikazalo na več kot ducatih napravah, 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. Če želite vklopiti ali izklopiti način naprave , izberite ikono mobilnega telefona, ki se nahaja neposredno na levi strani kartice Elements .
- 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.
Priporočeno branje: Top 25 Greasemonkey in uporabniške skripte programa Tampermonkey
- Kliknite gumb glavnega menija Firefoxa, ki ga predstavljajo tri horizontalne črte in se nahaja v zgornjem desnem kotu okna brskalnika.
- Ko se prikaže spustni meni, izberite ikono, ki je označena kot razvijalec . Zdaj je treba prikazati meni Web Developer , ki vsebuje naslednje možnosti. Opazili boste, da ima večina elementov v meniju bližnjične tipke, povezane z njimi.
Toggle Tools (Orodja za preklop): prikaže ali skrije vmesnik orodij za razvijalce, ki se običajno nahaja 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 (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Spletna konzola: omogoča, da v aktivni strani izvršite izraze JavaScript in pregledate raznolik nabor prijavljenih 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: JavaScript Debugger vam omogoča natančno določanje in odpravljanje napak z nastavljanjem mejnih vrednosti, pregledovanjem vozlišč DOM, črnimi boksarskimi zunanjimi viri in še veliko več. Kot pri Inšpektorju , 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, 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 )
Uspešnost: Omogoča podrobno razčlenitev uspešnosti omrežja aktivne strani, podatkov o okvirju, časa izvajanja in stanja izvajanja JavaScripta, utripanja barve in še veliko več. Bližnjica na tipkovnici: Mac OS X, Windows ( SHIFT + F5 )
Omrežje: seznam vseh zahtev omrežja, ki jih je začel brskalnik, skupaj z ustrezno metodo, izvorno domeno, vrsto, velikostjo in časom, ki je preteklo. Bližnjica na tipkovnici: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Orodna vrstica razvijalca: odpre interaktivni interprek za ukazno vrstico. Vpišite 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 prek dejanske naprave z OS Firefox ali s simulatorjem Firefox OS. Bližnjica na tipkovnici: Mac OS X, Windows ( SHIFT + F8 )
Brskalna konzola: Omogoča enako funkcionalnost kot spletna konzola (glejte 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 )
Odzivno oblikovanje: omogoča takojšnjo ogled spletne strani v različnih ločljivostih, 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ško barvno kodo za posamično izbrane pike.
Scratchpad : Omogoča vam pisanje, urejanje, integracijo in izvajanje odrezkov kode JavaScript iz okna v Firefoxu. 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 izvorno kodo, ki je na voljo za aktivno stran. Bližnjica na tipkovnici: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Pridobite več orodij: odpre zbirko orodij spletnega razvijalca na uradnem spletnem mestu Mozilla, ki vsebuje približno ducate priljubljenih razširitev, kot sta Firebug in Greasemonkey.
Microsoft Edge / Internet Explorer
Različica orodij za razvijalce F12, ki se pogosto imenuje orodja za razvijalce F12 , ki je začela uporabljati bližnjico na tipkovnici, ki je začela vmesnik od starejših različic Internet Explorerja, je dev designet v IE11 in Microsoft Edge že od svojega začetka dala precej priročno skupino monitorjev, debugov, emulatorjev in prevajalcev na letenju.
- Kliknite meni Več dejanj , 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 kot F12 Developer Tools . Kot sem že omenil, lahko dostopate tudi do orodij prek bližnjične tipke F12 .
- 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 predloge za sloge in HTML na aktivni strani, tako da spremenite rezultate, kot ste. Uporablja funkcijo IntelliSense do kode za samodokončanje, kjer je to ustrezno. Bližnjica na tipkovnici: (CTRL + 1)
Konzola: omogoča posredovanje podatkov o odpravljanju napak, vključno s števci, časovniki, sledmi in prilagojenimi sporočili prek vgrajenega 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 vam nastavljanje mejnih vrednosti in odpravljanje napak pri izvajanju, po potrebi po vrstici po vrstici. Bližnjica na tipkovnici: (CTRL + 3)
Omrežje: seznam vseh zahtev omrežja, ki jih 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)
Učinkovitost: stopnje podrobnosti okvirja, uporaba CPU in druge meritve, povezane z zmogljivostjo, ki vam pomagajo pospešiti čas nalaganja strani in druge dejavnosti. Bližnjica na tipkovnici: (CTRL + 5)
Pomnilnik: vam pomaga izolirati in popraviti morebitne pomanjkanje pomnilnika na trenutni spletni strani, tako da prikažete časovno linijo 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) - Če želite prikazati konzolo med katerim koli drugim orodjem, kliknite kvadratni gumb z desnim nosilcem znotraj nje, ki se nahaja v zgornjem desnem kotu vmesnika razvojnih orodij.
- Če želite razveljaviti vmesnik orodij za razvijalce, tako da postane ločeno okno, kliknite gumb, ki ga predstavljata 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 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.
- Kliknite 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 (,)
- Sedaj je treba prikazati vmesnik Safari's Preferences , prekrivati okno brskalnika. Kliknite ikono Advanced , ki se nahaja na skrajni desni strani glave.
- Napredne nastavitve bi morale biti zdaj vidne. Na dnu tega zaslona je možnost v menijski vrstici označena z menijem Prikaži razvoj , skupaj s potrditvenim poljem. Če v okencu ni nobenega kljukica, ga kliknite enkrat, da ga postavite tam.
- Zaprite vmesnik Preferences, tako da kliknete rdeči "x", ki se nahaja v zgornjem levem kotu.
- V meniju brskalnika Razviti , ki se nahaja med zaznamki in oknom, morate zdaj opaziti novo možnost. 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 vašem računalniku Mac.
Uporabniški agent: omogoča izbiro 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, kot bi se prikazala na različnih napravah in pri različnih ločljivostih zaslona.
Prikaži spletnega inšpektorja: zažene glavni vmesnik za orodja devarijev Safari, ki se navadno nahajajo na dnu zaslona brskalnika in vsebujejo naslednje dele: Elementi , Omrežje , Viri , Časovni okni , Razhroščevalnik , Shranjevanje , Konzola .
Prikaži konzolo za napake: zagnati tudi vmesnik dev orodij, neposredno na zavihku Konzola, ki prikazuje napake, opozorila in druge podatke, ki jih je mogoče iskati.
Prikaži vir strani: odpre jeziček Resources , ki prikaže izvorno kodo za aktivno stran, ki je kategorizirana po dokumentu.
Prikaži vire strani: izvaja isto funkcijo kot možnost Prikaz strani .
Prikaži odrezek urejevalnika: Odpre novo okno, kjer lahko vnesete CSS in HTML kodo, predogled svoje proizvodnje na letenju.
Show Extension Builder: Omogoča ustvarjanje ali urejanje razširitev Safari s CSS, HTML in JavaScriptom.
Prikaži zaporedno snemanje: Odpre se časovni vrstici in prične prikazovanje zahtev omrežja, postavitve in prikaza ter izvajanja JavaScript v realnem času.
Prazni predpomnilniki: izbriše celoten predpomnilnik, ki je trenutno shranjen na trdem disku.
Onemogoči predpomnilnike: zaprejo Safari iz predpomnjenja, tako da se vsa vsebina pri vsakem nalaganju strani vzpostavi s strežnika.
Onemogoči slike: preprečuje, da bi slike prikazovale na vseh spletnih straneh.
Onemogoči sloge: preusmeri lastnosti CSS ob nalaganju strani.
Onemogoči JavaScript: omejuje izvedbo JavaScript na vseh straneh.
Onemogoči razširitve: prepoveduje, da vse nameščene razširitve ne bodo prikazane v brskalniku.
Onemogoči hack za specifične lokacije: č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čite omejitve navzkrižnega izvora: te omejitve so privzeto nameščene, da preprečite 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: če je omogočeno, omogoča vnos URL-jev z javascriptom: vključeno neposredno v naslovno vrstico.
Šeste certifikate SHA-1 obravnavajte kot negotove: SSL certifikate, ki uporabljajo algoritem SHA-1 , veljajo za zastarele in ranljive.