Slik bruker du nettleserutviklerverktøy

I tillegg til de fleste nettlesere som fokuserer på den daglige brukeren som ønsker å surfe på Internett, imøtekommer de også webutviklere, designere og kvalitetssikringsprofessorer som hjelper til med å bygge applikasjoner og nettsteder som disse brukerne får tilgang til ved å integrere kraftige verktøy rett inn i nettleserne dem selv.

Borte er de dagene hvor de eneste programmerings- og testverktøyene som finnes i en nettleser, tillot deg å vise en kildes kildekode og ingenting mer. Dagens nettlesere lar deg ta en mye dypere dykk ved å gjøre ting som å utføre og feilsøke JavaScript-fragmenter, inspisere og redigere DOM-elementer, overvåke sanntidsnettetrafikk når appen din eller siden laster for å identifisere flaskehalser, analysere CSS-ytelse, og sørg for at koden din er Ikke bruk for mye minne eller for mange CPU-sykluser, og mye mer. Fra et testperspektiv kan du gjengi hvordan en app eller webside vil gjengis i forskjellige nettlesere, samt på forskjellige enheter og plattformer gjennom magien av lydhør design og innebygde simulatorer. Den beste delen er at du kan gjøre alt dette uten å måtte forlate nettleseren din!

Opplæringen nedenfor viser hvordan du får tilgang til disse utviklerverktøyene i flere populære nettlesere.

Google Chrome

Chromes utviklerverktøy lar deg redigere og feilsøke kode, revidere individuelle komponenter for å avsløre ytelsesproblemer, simulere forskjellige skjermbilder, inkludert de som kjører Android eller iOS, og utføre flere andre nyttige funksjoner.

1. Klikk på Kroms hovedmeny-knapp, merket med tre horisontale linjer og plassert øverst i høyre hjørne av nettleseren.
2. Når rullegardinmenyen vises, holder du musemarkøren over Flere verktøy alternativ.
3. En undermeny skal nå vises. Velg alternativet merket Utviklerverktøy . Du kan også bruke følgende snarvei i stedet for dette menyelementet: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (EKSTRA) + COMMAND + I )
4. Grensesnittet for utviklere for Chrome-utviklere skal nå vises, som vist i dette eksempelbildet. Avhengig av din versjon av Chrome, kan det opprinnelige layoutet du ser, være litt annerledes enn det som presenteres her. Hovednavet til utviklerverktøyene, som vanligvis ligger på enten nederst eller høyre side av skjermen, inneholder følgende faner.elementer: Gir muligheten til å inspisere CSS og HTML-kode, samt redigere CSS on-the-fly, se effektene av endringene dine i sanntid.konsoll: Chromes JavaScript-konsoll tillater direkte kommandooppføring, samt diagnostisk feilsøking.kilder: Lar deg feilsøke JavaScript-kode via et kraftig grafisk grensesnitt.nettverk: Kategoriserer og viser detaljert informasjon om hver relatert operasjon på det aktive programmet eller siden, inkludert komplette forespørsler og responsoverskrifter, samt avanserte tidsberegninger.Tidslinje: Tillater en grundig analyse av hver aktivitet som finner sted i nettleseren så snart en forespørsel om side- eller applastning er startet.
5. I tillegg til disse delene kan du også få tilgang til følgende verktøy via >> ikonet, plassert til høyre for Tidslinje fane.Profil: Brokket ned i CPU profiler og Heap profiler seksjoner, gir omfattende minnebruk og overføringstid for det aktive programmet eller siden.Sikkerhet: Fremhever sertifikatproblemer og andre sikkerhetsrelaterte problemer med den aktive siden eller applikasjonen.ressurser: Her kan du inspisere informasjonskapsler, lokal lagring, appbuffer og andre lokale datakilder som brukes av den nåværende nettsiden eller applikasjonen.revisjoner: Tilbyr måter å optimalisere en side eller programmets ladetid og generell ytelse.
6. Enhetsmodus lar deg se den aktive siden i en simulator som gjør den nesten nøyaktig som den ville vises på en av over et dusin enheter, inkludert flere kjente Android- og iOS-modeller som iPad, iPhone og Samsung Galaxy. Du får også muligheten til å etterligne tilpassede skjermoppløsninger for å passe dine spesielle utviklings- eller testbehov. Å veksle Enhetsmodus På og av, velg mobiltelefonikonet som ligger direkte til venstre for Elements fane.
7. Du kan også tilpasse utseendet til utviklerverktøyene dine ved å først klikke på menyknappen representert av tre vertikalt plasserte prikker og plassert på høyre side av de ovennevnte fanene. Fra denne rullegardinmenyen kan du plassere dokken, vise eller gjemme forskjellige verktøy, samt lansere mer avanserte elementer, som for eksempel enhetsinspektør. Du finner at dev-verktøyets grensesnitt selv er svært tilpassbart via innstillingene som finnes i denne delen.

Mozilla Firefox

Firefox-webutvikler-delen inneholder verktøy for designere, utviklere og testere som en stilredigerer og pikselmålretting-eyedropper.

Lifewire Anbefalt lesing:Topp 25 Greasemonkey og Tampermonkey User Scripts

1. Klikk på Firefox hovedmeny-knapp, representert av tre horisontale linjer og plassert øverst i høyre hjørne av nettleservinduet.
2. Når rullegardinmenyen vises, velg ikonet merket Utvikler . De Webutvikler menyen skal nå vises, og inneholder følgende alternativer.Du vil legge merke til at de fleste menyelementer har tastatursnarveier knyttet til dem.Veksle verktøy: Viser eller skjuler grensesnittet til utviklerverktøyet, vanligvis plassert nederst i nettleservinduet. Tastaturgenvei: Mac OS X ( ALT (EKSTRA) + COMMAND + I ), Windows ( CTRL + SHIFT + I )Inspektør: Lar deg inspisere og / eller justere CSS og HTML-kode på den aktive siden, så vel som på en bærbar enhet via fjerningsfeil. Tastaturgenvei: Mac OS X ( ALT (EKSTRA) + COMMAND + C ), Windows ( CTRL + SHIFT + C )Webkonsoll: Lar deg utføre JavaScript-uttrykk på den aktive siden, samt vurdere et mangfoldig sett med loggede data, inkludert sikkerhetsadvarsler, nettverksforespørsler, CSS-meldinger og mer. Tastaturgenvei: Mac OS X ( ALT (EKSTRA) + COMMAND + K ), Windows ( CTRL + SHIFT + K )debugger: De JavaScript Debugger lar deg finne og rette feil ved å sette brytpunkter, inspisere DOM noder, svart boksing eksterne kilder og mye mer. Som det er tilfellet med Inspektør Denne funksjonen støtter også ekstern feilsøking. Tastaturgenvei: Mac OS X ( ALT (EKSTRA) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Stilredigerer: Lar deg lage nye stilark og inkorporere dem med den aktive nettsiden, eller redigere eksisterende ark og teste hvordan endringene gjøres i en nettleser med bare ett klikk. Tastaturgenvei: Mac OS X, Windows ( SHIFT + F7 )Opptreden: Gir en detaljert oversikt over den aktive sideens nettverksytelse, bildefrekvensdata, JavaScript-utførelsestid og -status, maling blinkende og mye mer. Tastaturgenvei: Mac OS X, Windows ( SHIFT + F5 )nettverk: Viser hver nettverksforespørsel initiert av nettleseren sammen med tilhørende metode, opprinnelsesdomene, type, størrelse og tid som er gått. Tastaturgenvei: Mac OS X ( ALT (EKSTRA) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )Utvikler verktøylinje: Åpner en interaktiv kommandolinjestolker. Tast inn hjelp inn i tolken for en liste over alle tilgjengelige kommandoer og deres riktige syntaks. Tastaturgenvei: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Gir muligheten til å opprette og kjøre Web-apper gjennom en faktisk enhet som kjører Firefox OS eller via Firefox OS Simulator. Tastaturgenvei: Mac OS X, Windows ( SHIFT + F8 )Nettleserkonsoll: Gir samme funksjonalitet som Webkonsoll (se ovenfor). Imidlertid er alle dataene returnert for hele Firefox-applikasjonen (inkludert utvidelser og nettleserfunksjoner) i motsetning til bare den aktive websiden. Tastaturgenvei: Mac OS X ( Skift + Kommando + J ), Windows ( CTRL + SHIFT + J )Responsive Design View: Lar deg øyeblikkelig vise en nettside i forskjellige oppløsninger, oppsett og skjermstørrelser for å etterligne flere enheter, inkludert tabletter og smarttelefoner. Tastaturgenvei: Mac OS X ( ALT (EKSTRA) + COMMAND + M ), Windows ( CTRL + SHIFT + M )pipette: Viser hex-fargekoden for individuelt valgte piksler.Notatblokk: Lar deg skrive, redigere, integrere og utføre utdrag av JavaScript-kode fra et pop-out Firefox-vindu. Tastaturgenvei: Mac OS X, Windows ( SHIFT + F4 )Side Kilde: Det opprinnelige nettleserbaserte utviklerverktøyet, dette alternativet viser bare den tilgjengelige kildekoden for den aktive siden. Tastaturgenvei: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Få flere verktøy: Åpner Webutviklerens verktøykasse samling på Mozillas offisielle tilleggsside, med omtrent et dusin populære utvidelser som Firebug og Greasemonkey.

Microsoft Edge / Internet Explorer

Vanligvis referert til som F12 Utviklerverktøy , en hyllest til tastaturgenveien som har lansert grensesnittet siden tidligere versjoner av Internet Explorer, har dev verktøyet i IE11 og Microsoft Edge kommet langt siden starten ved å tilby en veldig nyttig gruppe skjermer, debuggere, emulatorer og på -flyvende kompilatorer.

1. Klikk på Flere handlinger meny, representert av tre prikker og plassert i øvre høyre hjørne av nettleservinduet. Når rullegardinmenyen vises, velger du alternativet merket F12 Utviklerverktøy . Som jeg allerede nevnte, kan du også få tilgang til verktøyene via F12 hurtigtast.
2. Utviklingsgrensesnittet skal nå vises, vanligvis nederst i nettleservinduet. Følgende verktøy er tilgjengelige, hver tilgjengelig ved å klikke på deres respektive fanebok eller ved hjelp av den medfølgende snarveien.DOM Explorer: Lar deg redigere stilark og HTML på den aktive siden, noe som gir de modifiserte resultatene når som helst. Bruker IntelliSense-funksjonalitet til å fylle ut kode når det er aktuelt. Tastaturgenvei: (Ctrl + 1) konsoll: Gir muligheten til å sende inn feilsøkingsinformasjon, inkludert tellere, timere, spor og tilpassede meldinger via en integrert API. Også lar deg injisere kode til en aktiv nettside og endre verdiene som er tilordnet individuelle variabler i sanntid. Tastaturgenvei: (CTRL + 2) debugger: Lar deg sette brytpunkter og feilsøke koden mens den utføres, linje for linje hvis nødvendig. Tastaturgenvei: (CTRL + 3) nettverk: Viser alle nettverksforespørsler initiert av nettleseren under sidebelastning og utførelse, inkludert protokolldetaljer, innholdstype, båndbreddebruk og mye mer. Tastaturgenvei: (CTRL + 4) Opptreden: Detaljer rammefrekvenser, CPU utnyttelse, og andre ytelsesrelaterte beregninger for å hjelpe deg med å øke hastigheten på sidelastningstider og andre aktiviteter. Tastaturgenvei: (CTRL + 5) Hukommelse: Hjelper deg med å isolere og korrigere potensielle minnelekkasjer på gjeldende nettside ved å vise en tidslinje for minnebruk sammen med stillbilder fra forskjellige tidsintervaller. Tastaturgenvei: (CTRL + 6) emulering: Viser deg hvordan den aktive siden skulle gjengis i ulike oppløsninger og skjermstørrelser, emulerer smarttelefoner, tabletter og andre enheter. Gir også muligheten til å endre brukeragenten og sideorienteringen, samt simulere forskjellige geolokasjoner ved å angi breddegrad og lengdegrad. Tastaturgenvei: (CTRL + 7)
3. For å vise Console mens i noen av de andre verktøyene klikker du på torget med en rettbrakett inne i den, plassert øverst til høyre i utviklingsverktøyets grensesnitt.
4. For å løsne, utviklerverktøyet grensesnitt slik at det blir et eget vindu, klikk på knappen representert ved to cascading rektangler eller bruk følgende hurtigtaster: CTRL + P . Du kan plassere verktøyene tilbake i deres opprinnelige posisjon ved å trykke CTRL + P en gang til.

Apple Safari (kun OS X)

Safaris mangfoldige dev-verktøysett gjenspeiler det store utviklerfellesskapet som bruker en Mac for deres design og programmeringsbehov. I tillegg til en kraftig konsoll og tradisjonelle loggings- og feilsøkingsfunksjoner, er det også en lett å bruke responsiv designmodus og et verktøy for å lage dine egne nettleserutvidelser.

1. Klikk på Safari i nettlesermenyen, plassert øverst på skjermen. Når rullegardinmenyen vises, velger du Preferanser . Du kan også bruke følgende snarvei i stedet for dette menypunktet: KOMMANDO + komma (,)
2. Safari Preferanser grensesnittet skal nå vises, overlegger nettleservinduet. Klikk på Avansert ikonet, som ligger på høyre side av overskriften.
3. De Avansert preferanser skal nå være synlige. Nederst på denne skjermen er et alternativ merket Vis Utvikle-menyen i menylinjen , ledsaget av en avkrysningsboks. Hvis det ikke er noen merketrykk som vises i boksen, klikker du på det en gang for å plassere en der.
4. Lukk Preferanser grensesnitt ved å klikke på den røde 'x' funnet i øvre venstre hjørne.
5. Du bør nå legge merke til et nytt alternativ i nettlesermenyen som heter Utvikle , plassert mellom bokmerker og Vindu . Klikk på dette menyelementet. En rullegardinmeny skal nå vises, og inneholder følgende alternativer.Åpne side med: Lar deg åpne den aktive websiden i en av de andre nettleserne som er installert på Mac-en din.Bruker agent: Lar deg velge fra over et dusin forhåndsdefinerte brukeragentverdier, inkludert flere versjoner av Chrome, Firefox og Internet Explorer, samt definere din egen tilpassede streng.Skriv inn Responsive Design Mode: Gjør gjeldende side som den ville vises på forskjellige enheter og på forskjellige skjermoppløsninger.Vis web inspektør: Lanserer hovedgrensesnittet for Safari's dev-verktøy, vanligvis plassert nederst på nettleserskjermbildet, og inneholder følgende seksjoner: Elements , Network , ressurser , Tidslinjer , debugger , Oppbevaring , Console .Vis feilkonsoll: Lanserer også dev-verktøyets grensesnitt, direkte til Console fanen som viser feil, advarsler og andre søkbare loggdata.Vis side Kilde: Åpner ressurser kategorien, som viser kildekoden for den aktive siden kategorisert etter dokument.Vis side ressurser: Utfører samme funksjon som Vis sidekilde alternativ.Vis utklippsredigerer: Åpner et nytt vindu der du kan legge inn CSS og HTML-kode, forhåndsvisning av utdataene på flyet.Vis utvidelsesbygger: Gir muligheten til å opprette eller redigere Safari-utvidelser med CSS, HTML og JavaScript.Vis tidslinjeinnspilling: Åpner Tidslinjer fanen og begynner å vise nettverksforespørsler, layout og gjengivelse samt JavaScript-kjøring i sanntid.Tomme kufferter: Sletter hele cachen som lagres på harddisken din.Deaktiver Caches: Stopper Safari fra caching slik at alt innhold hentes fra serveren ved hver side lastes.Deaktiver bilder: Forhindrer bilder fra gjengivelse på alle websider.Deaktiver stiler: Ignorerer CSS-egenskaper når en side er lastet inn.Deaktiver JavaScript: Begrenser JavaScript-kjøring på alle sider.Deaktiver utvidelser: Forbyder at alle installerte utvidelser kjører i nettleseren.Deaktiver nettstedspesifikke hacker: Hvis Safari har blitt endret for å eksplisitt håndtere problem (er) som er spesifikke for den aktive websiden, vil dette alternativet blokkere disse endringene, slik at siden lastes som den ville ha før disse endringene ble introdusert.Deaktiver lokale filrestriksjoner: Lar nettleseren ha tilgang til filer på de lokale diskene, en handling som er begrenset som standard av sikkerhetsmessige årsaker.Deaktiver grenseoverskridende restriksjoner: Disse begrensningene er satt som standard for å forhindre XSS og andre mulige farer. Imidlertid må de ofte være midlertidig deaktivert for utviklingsformål.Tillat JavaScript fra Smart Search Field: Når aktivert, gir muligheten til å skrive inn nettadresser med javascript: innlemmet direkte i adressefeltet.Behandle SHA-1-sertifikater som usikre: SSL-sertifikater ved hjelp av SHA-1-algoritmen anses allment å være utdaterte og sårbare.