Hvordan bruke nettleserutviklerverktøy

2024 Forfatter: Abigail Brown | [email protected]. Sist endret: 2023-12-17 06:57

I tillegg til at de fleste nettleserprodusenter fokuserer på den daglige brukeren som ønsker å surfe på nettet, henvender de seg også til nettutviklere, designere og kvalitetssikringspersonell som hjelper til med å bygge appene og nettstedene som disse brukerne har tilgang til ved å integrere kraftige verktøy rett inn i selve nettleserne.

Dagen er borte da de eneste programmerings- og testverktøyene som ble funnet i en nettleser tillot deg å se en sides kildekode og ingenting mer. Dagens nettlesere lar deg ta et mye dypere dykk ved å gjøre ting som å utføre og feilsøke JavaScript-kodebiter, inspisere og redigere DOM-elementer, overvåke nettverkstrafikk i sanntid mens appen eller siden din lastes inn for å identifisere flaskehalser, analysere CSS-ytelse, og sikre at koden din er ikke bruker for mye minne eller for mange CPU-sykluser, og mye mer.

Fra et testperspektiv kan du gjengi hvordan en app eller nettside gjengis i forskjellige nettlesere så vel som på forskjellige enheter og plattformer gjennom magien til responsiv design og innebygde simulatorer. Det beste er at du kan gjøre alt dette uten å måtte forlate nettleseren din!

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

Google Chrome

Chrome-utviklerverktøyene lar deg redigere og feilsøke kode, revidere individuelle komponenter for å avdekke ytelsesproblemer, simulere forskjellige enhetsskjermer, inkludert de som kjører Android eller iOS, og utføre flere andre nyttige funksjoner.

1. Velg Chromes hovedmeny, merket med tre horisontale linjer og plassert i øvre høyre hjørne av nettleseren.

2. Når rullegardinmenyen vises, hold musepekeren over Flere verktøy- alternativet.

   

3. En undermeny skal nå vises. Velg alternativet merket Utviklerverktøy. Du kan også bruke følgende hurtigtast i stedet for dette menyelementet: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +KOMMANDO+I)

   

4. Chrome Developer Tools-grensesnittet skal nå vises, som vist i dette eksempelskjermbildet. Avhengig av din versjon av Chrome, kan det første oppsettet du ser, være litt forskjellig fra det som presenteres her. Hovednavet til utviklerverktøyene, vanligvis plassert enten nederst eller på høyre side av skjermen, inneholder følgende faner.

5. I tillegg til disse delene, kan du også få tilgang til følgende verktøy via >>-ikonet, plassert til høyre for Performance fane.

   • Memory: Overvåk og registrer minnebruk på en nettside. Du kan se hvor tungt JavaScript på nettstedet ditt er.
   • Security: Fremhever sertifikatproblemer og andre sikkerhetsrelaterte problemer med den aktive siden eller applikasjonen.
   • Application: Inspiser ressursene som brukes av en nettapplikasjon. Få en fullstendig oversikt over hva som brukes.
   • Revisjon: Tilbyr måter å optimalisere en side eller apps lastetid og generelle ytelse.

   

6. Device Mode lar deg se den aktive siden i en simulator som gjengir den nesten nøyaktig slik den vil se ut på en av over et dusin enheter, inkludert flere velkjente Android og iOS-modeller som iPad, iPhone og Samsung Galaxy. Du får også muligheten til å emulere tilpassede skjermoppløsninger for å passe dine spesielle utviklings- eller testbehov.

   For å slå Device Mode på og av, velg mobiltelefonikonet som ligger rett til venstre for Elements fane.

   

7. Du kan også tilpasse utseendet og følelsen til utviklerverktøyene dine ved først å velge menyknappen representert av tre vertik alt plasserte prikker og plassert helt til høyre på de nevnte fanene.

   Fra denne rullegardinmenyen kan du flytte dokken, vise eller skjule forskjellige verktøy, samt starte mer avanserte elementer, for eksempel en enhetsinspektør. Du vil oppdage at selve grensesnittet for utviklerverktøyene kan tilpasses i stor grad via innstillingene i denne delen.

   

Mozilla Firefox

Firefoxs nettutviklerseksjon inneholder verktøy for både designere, utviklere og testere, for eksempel en stilredigerer og pikselmålrettet pipette.

1. Velg Firefoxs hovedmeny, representert av tre horisontale linjer og plassert i øvre høyre hjørne av nettleservinduet.

2. Når rullegardinmenyen vises, velg Web Developer.

   

3. Webutviklermenyen skal nå vises, og inneholder følgende alternativer. Du vil legge merke til at de fleste menyelementer har hurtigtaster knyttet til seg.

   • Toggle Tools: Viser eller skjuler utviklerverktøygrensesnittet, vanligvis plassert nederst i nettleservinduet. Tastatursnarvei: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Lar deg inspisere og/eller justere CSS- og HTML-kode på den aktive siden så vel som på en bærbar enhet via ekstern feilsøking. Tastatursnarvei: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Lar deg kjøre JavaScript-uttrykk på den aktive siden, samt se gjennom et mangfoldig sett med loggede data, inkludert sikkerhetsadvarsler, nettverksforespørsler, CSS-meldinger og mer. Tastatursnarvei: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: JavaScript Debugger lar deg finne og fikse defekter ved å angi bruddpunkter, inspisere DOM-noder, black boxing eksterne kilder og mye mer. Som tilfellet er med Inspector, støtter denne funksjonen også ekstern feilsøking. Tastatursnarvei: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: Lar deg lage nye stilark og inkorporere dem med den aktive nettsiden, eller redigere eksisterende ark og teste hvordan endringene gjengis i en nettleser med bare ett klikk. Tastatursnarvei: Mac OS X, Windows (SHIFT+F7)
   • Ytelse: Gir en detaljert oversikt over den aktive sidens nettverksytelse, bildefrekvensdata, JavaScript-utførelsestid og -tilstand, fargeblinking og mye mer. Tastatursnarvei: Mac OS X, Windows (SHIFT+F5)
   • Network: Viser hver nettverksforespørsel initiert av nettleseren sammen med tilsvarende metode, opprinnelsesdomene, type, størrelse og medgått tid. Tastatursnarvei: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Ta en titt på bufferen og informasjonskapslene som lagres av et nettsted. Tastatursnarvei: (SHIFT+F9)
   • Utviklerverktøylinje: Åpner en interaktiv kommandolinjetolk. Skriv inn help i tolken for en liste over alle tilgjengelige kommandoer og deres riktige syntaks. Tastatursnarvei: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Gir muligheten til å lage og kjøre nettapper gjennom en faktisk enhet som kjører Firefox OS eller via Firefox OS-simulator. Tastatursnarvei: Mac OS X, Windows (SHIFT+F8)
   • Nettleserkonsoll: Gir samme funksjonalitet som nettkonsollen (se ovenfor). Imidlertid er alle data som returneres for hele Firefox-applikasjonen (inkludert utvidelser og funksjoner på nettlesernivå) i motsetning til bare den aktive nettsiden. Tastatursnarvei: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsiv designvisning: Lar deg umiddelbart se en nettside i forskjellige oppløsninger, oppsett og skjermstørrelser for å etterligne flere enheter, inkludert nettbrett og smarttelefoner. Tastatursnarvei: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eyedropper: Viser hex-fargekoden for individuelt valgte piksler.
   • Scratchpad: Scratchpad lar deg skrive, redigere, integrere og kjøre utdrag av JavaScript-kode fra et pop-out Firefox-vindu. Åpne et interaktivt JavaScript-dokument som lar deg skrive inn kode og teste det mot et nettsted. Tastatursnarvei: (SHIFT+F4)
   • Service Workers: Feilsøk tjenestearbeidere i nettapplikasjonen din. Få detaljert informasjon om deres ytelse og feil.
   • Sidekilde: Det originale nettleserbaserte utviklerverktøyet, dette alternativet viser ganske enkelt den tilgjengelige kildekoden for den aktive siden. Tastatursnarvei: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Få flere verktøy: Åpner Web Developer's Toolbox-samlingen på Mozillas offisielle tilleggsside, med omtrent et dusin populære utvidelser som f.eks. som Firebug og Greasemonkey.

   

Microsoft Edge/Internet Explorer

Vanligvis referert til som F12 Developer Tools, en hyllest til hurtigtasten som har lansert grensesnittet siden tidligere versjoner av Internet Explorer, utviklerverktøysettet i IE11 og Microsoft Edge har kommet langt siden starten ved å tilby en veldig hendig gruppe skjermer, debuggere, emulatorer og kompilatorer.

Microsoft støtter ikke lenger Internet Explorer og anbefaler at du oppdaterer til den nyere Edge-nettleseren. Gå til nettstedet deres for å laste ned den nyeste versjonen.

1. Velg Flere handlinger, representert av tre prikker og plassert i øvre høyre hjørne av nettleservinduet.

   

2. Når rullegardinmenyen vises, velg alternativet merket Developer Tools.

   

3. Utviklingsgrensesnittet skal nå vises, vanligvis nederst i nettleservinduet. Følgende verktøy er tilgjengelige, alle tilgjengelige ved å klikke på deres respektive faneoverskrift eller bruke den medfølgende hurtigtasten.

   

   • DOM Explorer: Lar deg redigere stilark og HTML på den aktive siden, og gjengi de endrede resultatene mens du går. Bruker IntelliSense-funksjonalitet for å autofullføre kode der det er aktuelt. Tastatursnarvei: (CTRL+1)
   • Console: Gir muligheten til å sende inn feilsøkingsinformasjon, inkludert tellere, tidtakere, spor og tilpassede meldinger via en integrert API. Lar deg også injisere kode i en aktiv nettside og endre verdiene som er tildelt individuelle variabler i sanntid. Tastatursnarvei: (CTRL+2)
   • Debugger: Lar deg angi bruddpunkter og feilsøke koden mens den kjøres, linje for linje om nødvendig. Tastatursnarvei: (CTRL+3)
   • Network: Viser hver nettverksforespørsel initiert av nettleseren under sideinnlasting og kjøring, inkludert protokolldetaljer, innholdstype, båndbreddebruk og mye mer. Tastatursnarvei: (CTRL+4)
   • Ytelse: Detaljer om bildefrekvenser, CPU-bruk og andre ytelsesrelaterte beregninger for å hjelpe deg med å øke hastigheten på sideinnlastingstider og andre aktiviteter. Tastatursnarvei: (CTRL+5)
   • Memory: Hjelper deg med å isolere og korrigere potensielle minnelekkasjer på gjeldende nettside ved å vise en tidslinje for minnebruk sammen med øyeblikksbilder fra forskjellige tidsintervaller. Tastatursnarvei: (CTRL+6)
   • Emulation: Viser deg hvordan den aktive siden vil gjengis i ulike oppløsninger og skjermstørrelser, og emulerer smarttelefoner, nettbrett og andre enheter. Det gir også muligheten til å endre brukeragenten og sideorienteringen, samt simulere forskjellige geolokasjoner ved å angi bredde- og lengdegrad. Tastatursnarvei: (CTRL+7)

4. For å vise Console mens du er inne i et av de andre verktøyene, trykker du på firkantknappen med en høyre parentes inne i den, plassert i øvre høyre hjørne av grensesnittet for utviklingsverktøy.

   

5. For å koble fra utviklerverktøy-grensesnittet slik at det blir et eget vindu, velg two cascading rektangler eller bruk følgende hurtigtast: CTRL+P. Du kan plassere verktøyene tilbake på deres opprinnelige plassering ved å trykke CTRL+P en gang til.

   

Apple Safari (bare Mac)

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

1. Velg Safari i nettlesermenyen, som ligger øverst på skjermen. Når rullegardinmenyen vises, velg Preferences. Du kan også bruke følgende hurtigtast i stedet for dette menyelementet: COMMAND+COMMA(,)

   

2. Safaris Preferences-grensesnitt skal nå vises, over nettleservinduet ditt. Velg Avansert-ikonet, plassert helt til høyre i overskriften.

   

3. Advanced-preferansene skal nå være synlige. Nederst på denne skjermen er et alternativ merket Vis utviklingsmeny i menylinjen, ledsaget av en avmerkingsboks. Hvis det ikke vises noen hake i boksen, klikk på den én gang for å plassere en der.

   

4. Lukk Preferences-grensesnittet.

5. Du bør nå legge merke til et nytt alternativ i nettlesermenyen k alt Develop, som ligger mellom Bokmerker og Window. Klikk på dette menyelementet. En rullegardinmeny skal nå vises, som inneholder følgende alternativer.

   • Åpne side med: Lar deg åpne den aktive nettsiden i en av de andre nettleserne som er installert på din Mac.
   • User 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.
   • Gå inn responsiv designmodus: Gjengir gjeldende side slik den vil se ut på forskjellige enheter og med forskjellige skjermoppløsninger.
   • Show Web Inspector: Starter hovedgrensesnittet for Safaris utviklerverktøy, vanligvis plassert nederst på nettleserskjermen og inneholder følgende seksjoner: Elements, Network, Resources, Timelines, Debugger, Storage, Console.
   • Show Error Console: Lanserer også grensesnittet for utviklerverktøy, direkte til Konsoll-fanen som viser feil, advarsler og annet søkbart loggdata.
   • Vis sidekilde: Åpner fanen Ressurser, som viser kildekoden for den aktive siden kategorisert av dokumentet.
   • Vis sideressurser: Utfører samme funksjon som alternativet Vis sidekilde.
   • Show Snippet Editor: Åpner et nytt vindu der du kan skrive inn CSS- og HTML-kode, og forhåndsvise utdataene på farten.
   • Show Extension Builder: Gir muligheten til å opprette eller redigere Safari-utvidelser med CSS, HTML og JavaScript.
   • Vis tidslinjeopptak: Åpner Tidslinjer-fanen og begynner å vise nettverksforespørsler, layout og gjengivelsesinformasjon samt JavaScript-kjøring i sanntid.
   • Empty Caches: Sletter hele bufferen som for øyeblikket er lagret på harddisken.
   • Deaktiver cacher: Stopper Safari fra å bufre slik at alt innhold hentes fra serveren ved hver sidelast.
   • Deaktiver bilder: Hindrer bilder fra å gjengi på alle nettsider.
   • Deaktiver stiler: Ignorerer CSS-egenskaper når en side lastes inn.
   • Deaktiver JavaScript: Begrenser JavaScript-kjøring på alle sider.
   • Deaktiver utvidelser: Forbyr alle installerte utvidelser fra å kjøre i nettleseren.
   • Deaktiver nettstedspesifikke hacks: Hvis Safari har blitt endret for å eksplisitt håndtere problemer som er spesifikke for den aktive nettsiden, vil dette alternativet blokkere disse endringene slik at siden lastes inn som før disse modifikasjonene ble introdusert.
   • Deaktiver lokale filbegrensninger: Gir nettleseren tilgang til filer på dine lokale disker, en handling som er begrenset som standard av sikkerhetsgrunner.
   • Deaktiver Cross-Origin Restrictions: Disse begrensningene er satt på plass som standard for å forhindre XSS og andre potensielle farer. Imidlertid må de ofte deaktiveres midlertidig for utviklingsformål.
   • Tillat JavaScript fra Smart Search Field: Når det er aktivert, gir det muligheten til å legge inn nettadresser med javascript: inkorporert direkte i adressefeltet.
   • Behandle SHA-1-sertifikater som usikre: SSL-sertifikater som bruker SHA-1-algoritmen, anses for å være utdaterte og sårbare.