Hvordan bruke verktøy for nettleserutvikler

av

I tillegg til at de fleste nettleserprodusenter fokuserer på den daglige brukeren som ønsker å surfe på nettet, henvender de seg også til webutviklere, designere og kvalitetssikrings folk som hjelper med å bygge appene og nettstedene som brukerne får tilgang til ved å integrere kraftige verktøy rett i nettleserne. dem selv.

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

Fra et test perspektiv kan du reprodusere hvordan en app eller en webside gjengis i forskjellige nettlesere så vel som på forskjellige enheter og plattformer gjennom magien med responsivt design og innebygde simulatorer. Det beste er at du kan gjøre alt dette uten å måtte forlate nettleseren din!

Veiledningene 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 å avsløre ytelsesproblemer, simulere forskjellige enhets skjermbilder, inkludert de som kjører Android eller iOS, og utføre flere andre nyttige funksjoner.

  1. Velg Chrome hovedmenyen, markert med tre horisontale linjer og plassert øverst til høyre i nettleseren.

  2. Når rullegardinmenyen vises, holder du 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 + SKIFT + I), Mac OS X (ALT (VALG) + KOMMANDO + I)

  4. Grensesnittet for Chrome Developer Tools skal nå vises, som vist i dette eksemplet på skjermbildet. Avhengig av hvilken versjon av Chrome du har, kan den opprinnelige utformingen du ser, være litt annerledes enn den som presenteres her. Hovednavnet til utviklerverktøyene, vanligvis plassert på enten bunnen eller høyre side av skjermen, inneholder følgende faner.

  5. I tillegg til disse seksjonene, kan du også få tilgang til følgende verktøy via >> ikonet, plassert til høyre for Ytelse fanen.

    • Minne: Overvåke og registrere minne bruk på en webside. Du kan se hvor tung JavaScript på nettstedet ditt er.
    • Sikkerhet: Fremhever sertifikat problemer og andre sikkerhetsrelaterte problemer med den aktive siden eller applikasjonen.
    • Søknad: Inspiser ressursene som brukes av en webapplikasjon. Få en fullstendig oversikt over hva som blir brukt.
    • Revisjoner: Tilbyr måter å optimalisere siden eller applikasjonens lastetid og generelle ytelse på.

  6. Enhets modus lar deg se på den aktive siden i en simulator som gjengir den nesten nøyaktig slik 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 spesifikke utviklings- eller test behov.

    Å veksle Enhets modus av og på, velger du mobiltelefon ikon ligger direkte til venstre for Elements fanen.

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

    Fra denne rullegardinmenyen kan du plassere dokken, vise eller skjule forskjellige verktøy, samt starte mer avanserte gjenstander, for eksempel en enhets inspektør. Du vil finne at selve grensesnittet for dev-verktøy er svært tilpass bart via innstillingene som finnes i denne delen.


Mozilla Firefox

Firefox 'nettutvikler-seksjon inneholder verktøy for designere, utviklere og testere, for eksempel en stil redigerer og piksel målretting.

  1. Velg Firefox hovedmenyen, representert av tre horisontale linjer og øverst til høyre i nettleservinduet.

  2. Når rullegardinmenyen vises, velger du Web Developer.

  3. De Webutvikler-meny skal nå vises, som inneholder følgende alternativer. Du vil merke at de fleste meny elementene har hurtigtaster tilknyttet.

    • Bytt verktøy: Viser eller skjuler grensesnittet for utviklerverktøy, vanligvis plassert nederst i nettleservinduet. Hurtigtast: Mac OS X (ALT (VALG) + KOMMANDO + I), Windows (CTRL + SKIFT + I)
    • Inspektør: Lar deg inspisere og / eller tilpasse CSS og HTML-kode på den aktive siden så vel som på en bærbar enhet via ekstern feilsøking. Hurtigtast: Mac OS X (ALT (ALTERNATIV) + KOMMANDO + C), Windows (CTRL + SKIFT + C)
    • Web Console: Lar deg utføre JavaScript-uttrykk på den aktive siden, samt gjennomgå et mangfoldig sett med loggede data, inkludert sikkerhetsadvarsler, nettverksforespørsler, CSS-meldinger og mer. Hurtigtast: Mac OS X (ALT (ALTERNATIV) + KOMMANDO + K), Windows (CTRL + SKIFT + K)
    • Debugger: JavaScript-feilsøkings programmet lar deg finne og fikse feil ved å angi bryte punkter, inspisere DOM-noder, black boxing eksterne kilder og mye mer. Som det er tilfellet med inspektøren, støtter denne funksjonen også ekstern feilsøking. Hurtigtast: Mac OS X (ALT (ALTERNATIV) + KOMMANDO + S), Windows (CTRL + SKIFT + S)
    • Style Editor: Lar deg lage nye stil ark og innlemme dem i den aktive nettsiden, eller redigere eksisterende ark og teste hvordan endringene dine gjengis i en nettleser med bare ett klikk. Hurtigtast: Mac OS X, Windows (SKIFT + F7)
    • Ytelse: Gir en detaljert oversikt over den aktive sidens nettverksytelse, bildefrekvensdata, JavaScript utførings tid og -tilstand, maling blinking og mye mer. Hurtigtast: Mac OS X, Windows (SKIFT + F5)
    • Network: Viser hver nettverksforespørsel initiert av nettleseren sammen med tilsvarende metode, opprinnelses domene, type, størrelse og forløpt tid. Hurtigtast: Mac OS X (ALT (ALTERNATIV) + KOMMANDO + Q), Windows (CTRL + SKIFT + Q)
    • Lagrings inspektør: Ta en titt på hurtig bufferen og informasjonskapslene som lagres av et nettsted. Tastatursnarvei: (SKIFT + F9)
    • Utviklerverktøy linje: Åpner en interaktiv kommandolinje tolk. Tast inn hjelpe inn i tolken for en liste over alle tilgjengelige kommandoer og riktig syntaks. Hurtigtast: Mac OS X, Windows (SKIFT + F2)
    • WebIDE: Gir muligheten til å opprette og utføre web apper gjennom en faktisk enhet som kjører Firefox OS eller via Firefox OS Simulator. Hurtigtast: Mac OS X, Windows (SKIFT + F8)
    • Nettleser konsoll: Tilbyr den samme funksjonaliteten som nett konsollen (se ovenfor). Imidlertid er alle dataene som returneres for hele Firefox-applikasjonen (inkludert utvidelser og funksjoner på nettlesernivå) i motsetning til bare den aktive websiden. Hurtigtast: Mac OS X (SKIFT + KOMMANDO + J), Windows (CTRL + SKIFT + J)
    • Responsiv design visning: Lar deg øyeblikkelig vise en webside i forskjellige oppløsninger, oppsett og skjermstørrelser for å etterligne flere enheter, inkludert nettbrett og smart telefoner. Hurtigtast: Mac OS X (ALT (ALTERNATIV) + KOMMANDO + M), Windows (CTRL + SKIFT + M)
    • pipette: Viser hex-fargekoden for individuelt valgte piksler.
    • Scratchpad: Scratchpad lar deg skrive, redigere, integrere og utføre kode stykker med JavaScript-kode fra et popup-vindu i Firefox. Åpne et interaktivt JavaScript-dokument som lar deg skrive inn kode og teste det mot et nettsted. Tastatursnarvei: (SKIFT + F4)
    • Servicearbeidere: Feilsøk servicearbeidere webapplikasjonen din. Få detaljert informasjon om ytelse og feil.
    • Side kilde: Det originale nettleser baserte utviklerverktøyet, dette alternativet viser bare den tilgjengelige kildekoden for den aktive siden. Hurtigtast: 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

Ofte referert til som F12 utviklerverktøy, en hyllest til hurtigtasten som har lansert grensesnittet siden tidligere versjoner av Internet Explorer, dev-verktøysettet i IE11 og Microsoft Edge har kommet langt siden oppstarten ved å tilby en veldig praktisk gruppe skjermer, feilsøkere, emulatorer og videre -the-fly kompilatorer.

  1. Plukke ut Flere handlinger, representert av tre prikker og øverst til høyre i nettleservinduet.

  2. Når rullegardinmenyen vises, velger du alternativet merket Utviklerverktøy.

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

    • DOM Explorer: Lar deg redigere stilark og HTML på den aktive siden og gjengi de modifiserte resultatene mens du går. Benytter IntelliSense-funksjonalitet til å auto fullføre koden der det er aktuelt. Hurtigtast: (CTRL + 1)
    • Konsoll: Gir muligheten til å sende inn feilsøkings informasjon inkludert tellere, tidtakere, spor og tilpassede meldinger via et integrert API. Gjør det også mulig å injisere kode på en aktiv webside og endre verdiene som er tildelt individuelle variabler i sanntid. Hurtigtast: (CTRL + 2)
    • Debugger: Lar deg angi bryte punkter og feilsøke koden mens den kjøres, linje for linje om nødvendig. Hurtigtast: (CTRL + 3)
    • Network: Viser hver nettverksforespørsel som ble startet av nettleseren under side innlasting og utføring, inkludert protokoll detaljer, innholdstype, bruk av båndbredde og mye mer. Hurtigtast: (CTRL + 4)
    • Ytelse: Detaljerer bilde frekvenser, CPU-bruk og andre ytelses relaterte beregninger som hjelper deg med å øke hastigheten på siden og andre aktiviteter. Hurtigtast: (CTRL + 5)
    • Minne: Hjelper deg med å isolere og korrigere potensielle minnelekkasjer på den aktuelle websiden ved å vise en tidslinje for minnebruk sammen med øyeblikksbilder fra forskjellige tidsintervaller. Hurtigtast: (CTRL + 6)
    • Emulering: Viser hvordan den aktive siden ville gjengis i forskjellige oppløsninger og skjermstørrelser, etterlignende smart telefoner, nettbrett og andre enheter. Det gir også muligheten til å endre bruker agenten og side orienteringen, samt simulere forskjellige GEO lokaliseringer ved å angi en bredde og lengdegrad. Hurtigtast: (CTRL + 7)

  4. For å vise Konsoll mens du er i et av de andre verktøyene, trykker du på firkantet knapp med en høyre brakett inni, plassert i øvre høyre hjørne av utviklingsverktøyets grensesnitt.

  5. For å koble ut utviklerverktøyets grensesnitt slik at det blir et eget vindu, velg to brusende rektangler eller bruk følgende hurtigtast: CTRL + P. Du kan plassere verktøyene på sin opprinnelige plassering ved å trykke CTRL + P en gang til.


Apple Safari (bare OS X)

Safaris mangfoldige utviklingsverktøy gjenspeiler det store utviklermiljøet som bruker en Mac for design- og programmerings behov. I tillegg til en kraftig konsoll og tradisjonelle logge- og feilsøkings funksjoner, tilbys også en brukervennlig responsiv design modus og et verktøy for å lage dine egne nettleser utvidelser.

  1. Plukke ut Safari i nettlesermenyen øverst på skjermen. Når rullegardinmenyen vises, velger du Preferanser. Du kan også bruke følgende hurtigtast i stedet for dette menyelementet: KOMMANDO + PARAGRAF(,)

  2. Safari's Preferanser grensesnittet skal nå vises, overlegg nettleservinduet. Velg Avansert ikon, plassert på høyre side av overskriften.

  3. De Avansert preferanser skal nå være synlige. Nederst på dette skjermbildet er det merket et alternativ Vis Utvikle-menyen i menylinjen, ledsaget av en avkryssingsrute. Hvis det ikke er noen hake i boksen, klikker du på den en gang for å plassere en der.

  4. Lukk Preferanser grensesnitt.

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

    • Åpne side med: Lar deg åpne den aktive websiden i en av de andre nettleserne som for øyeblikket er installert på din Mac.
    • User Agent: Lar deg velge mellom over et dusin forhånds definerte brukeragentverdier, inkludert flere versjoner av Chrome, Firefox og Internet Explorer, samt definere din egen tilpassede streng.
    • Gå inn i responsiv design modus: Gjengir den nåværende siden slik den ville vises på forskjellige enheter og med forskjellige skjermoppløsninger.
    • Vis web inspektør: Starter hoved grensesnittet for Safaris dev-verktøy, vanligvis plassert nederst på nettleser skjermen og inneholder følgende seksjoner: Elementer, Nettverk, Ressurser, Tidslinjer, Feilsøking, Lagring, Konsoll.
    • Vis feil konsoll: Starter også grensesnittet for dev-verktøy, direkte til Konsoll fanen som viser feil, advarsler og andre søkbare loggdata.
    • Vis sidekilde: Åpner Kategorien Ressurser, som viser kildekoden for den aktive siden kategorisert av dokumentet.
    • Vis side ressurser: Utfører den samme funksjonen som alternativet Vis sidekilde.
    • Vis redaktør for utdrag: Åpner et nytt vindu der du kan angi CSS og HTML-kode, og forhånds vise utdataene på farten.
    • Vis utvidelses bygger: Gir muligheten til å opprette eller redigere Safari-utvidelser med CSS, HTML og JavaScript.
    • Vis innspilling av tidslinje: Åpner fanen Tidslinjer og begynner å vise nettverksforespørsler, layout og gjengivelse av informasjon samt JavaScript-utføring i sanntid.
    • Tomme kufferter: Sletter hele hurtig bufferen som for øyeblikket lagres på harddisken.
    • Deaktiver hurtig buffer: Stopper Safari fra hurtigbufring slik at alt innhold blir hentet fra serveren ved hver side innlasting.
    • Deaktiver bilder: Hindrer at bilder gjengis på alle websider.
    • Deaktiver stiler: Ignorerer CSS-egenskaper når en side lastes inn.
    • Deaktiver JavaScript: Begrenser kjøring av JavaScript på alle sider.
    • Deaktiver utvidelser: Forbyder at alle installerte utvidelser kjører i nettleseren.
    • Deaktiver nettsteds spesifikke hack: Hvis Safari er 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 den ville gjort før disse endringene ble introdusert.
    • Deaktiver lokale fil restriksjoner: Tillater nettleseren å få tilgang til filer på dine lokale disker, en handling som av sikkerhetsgrunner er begrenset som standard.
    • Deaktiver begrensninger på tvers av opprinnelse: 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-feltet: Når den er aktivert, gir den muligheten til å legge inn URL-er med javascript: innlemmet direkte i adressefeltet.
    • Behandle SHA-1-sertifikater som usikre: SSL-sertifikater som bruker SHA-1-algoritmen, anses allment for å være utdaterte og sårbare.


Legg igjen en kommentar