Share
Det er nødvendig for webutviklere å forstå og vite hvordan man bruker nettleserutviklerverktøy, og i denne opplæringen vil jeg introdusere deg til Chrome Developer Tools. Du vil lære noe av det grunnleggende, begynner med å markere og utforme en nettside.
Et raskt notat til eksisterende utviklerverktøysbrukere: Formålet med denne opplæringen er å gi en relativt grunnleggende introduksjon til Chromes utviklerverktøy. Hvis du bruker et hvilket som helst nettleseres utviklingsverktøy, for eksempel Firebug i Firefox eller IEs utviklingsverktøy, kan du kanskje finne ut at du allerede vet mye av informasjonen som er dekket i denne spesielle opplæringen.
Nettleserutviklingsverktøy lar deg bore deg ned i en nettside og inspisere omtrent alt på siden. For eksempel kan du:
Før jeg graver inn i Chromes utviklerverktøy, vil jeg bare gi deg en kort titt på utviklingsverktøyene som tilbys av de store nettleserne. Vær oppmerksom på at dette ikke er et omfattende kikk på disse verktøyene og deres funksjoner, men jeg gir grunnleggende informasjon for hvert verktøy.
Du kan bruke utviklerverktøyene i Chrome, Chrome Canary og til og med krom.
Safari bruker kode fra Web Inspector repository; Det kan imidlertid hende du oppdager at den ikke oppdateres så ofte som Chrome.
Firebug
Firefox kommer nå med sitt eget sett med utviklerverktøy som har et fint fokus på den visuelle siden av ting. For de som er vant til Firebug, er det fortsatt tilgjengelig som tillegg.
Merk: denne opplæringen bruker Canary-bygningen av Chrome. Derfor kan noen funksjoner som er dekket i denne artikkelen, kanskje være tilgjengelige i beta eller stabile utgivelser.
Før du tar en titt på innholdet i Elements panel, la oss ta litt tid til å forstå de små kontrollene i nærheten av toppen og bunnen. Vennligst se den nummererte listen under følgende bilde som forklarer de ulike brukergrensesnittelementene i verktøylinduet.
Det er godt å velge en layout du er komfortabel med. Klikk en gang i nederste venstre hjørne og legg merke til hvordan verktøylinduet løsner seg fra hovedvinduet - perfekt for multi-monitoroppsett. Ved å klikke og holde nederst på venstre ikon kan du dock til høyre, slik:
De Elements panelet viser sidenes merking som den blir gjengitt i nettleseren. Enhver endring som gjøres til DOM via JavaScript, reflekteres i elementene som finnes i dette panelet.
La oss bli kjent med dette panelet. Som tidligere, referer til listeelementene under følgende skjermbilde som identifiserer de ulike delene av Elements panel.
Makt gitt til oss av dev verktøy er ikke kort enn fantastisk.
Accentsconagua
Skriftsnittet viser bare skrifter som nettleseren har hatt å laste ned.
Endre DOM i Elements panelet er en ganske enkel prosess. For å slette en knute, høyreklikker du bare på den og velger Slett node. Som du kanskje forventer, slettes også foreldrenes barn ved å slette en foreldre node. Praktisk tips: Du kan også trykke på slettasten på tastaturet for å slette den valgte noden.
Endring av elementets type er mulig ved å dobbeltklikke på elementnavnet selv. For eksempel: p del på en avsnittetikett. Naturligvis vil endring av et element fra en type til et annet føre til at både åpnings- og lukkekoder endres.
Å vise sidens ressurser er avgjørende for feilsøking.
Legge til attributter kan oppnås ved å høyreklikke på elementet og velge Legg til attributt. Markøren posisjonerer umiddelbart seg der du ville forvente det, og du kan begynne å skrive attributter du vil legge til elementet. For eksempel: class = "title". Ved å trykke på tasten på tastaturet plasseres markøren til neste attributposisjon.
Redigerer attributter ligner på å legge dem til. Finn attributet du vil redigere, og dobbeltklikk enten på attributtnavnet eller dets verdi. Den førstnevnte fremhever navnet på attributten, og sistnevnte fremhever verdien.
Rå HTML-redigering aktiveres ved å høyreklikke på et element og velge Rediger som HTML.
Utviklerverktøyene gir noen nyttige teknikker for å finne elementer i dokumentet. Hovering over elementer i Elements ruten forårsaker at de tilsvarende gjengitte elementene skal utheves på siden. Dette er en fin måte å finne ut hvilket element i utviklerverktøyet samsvarer med elementet på siden.
Naturligvis ser vi ikke elementer utenfor nettleserens visningsport uthevet når du svinger over de tilsvarende elementene i Elements ruten. Heldigvis ser vi et verktøytips som angir retningen for ut-visningselementet. Glasuret på kaken er imidlertid Bla til visningen funksjonen finnes i et elements kontekstmeny. Det gjør akkurat hva det sier: det ruller elementet inn i visningen.
Utviklerverktøyene har også en søkefunksjon. Mens verktøylinjen dev har fokus, trykk Control + f for å åpne søkeboksen. Dette er en enkel tekst søkeboks; Så, å skrive "kropp" vil finne første forekomst av teksten "kropp" i dokumentet.
Før vi kommer til stilruten (høyre side) av Elements kategorien, kan vi få tilgang til litt stilinformasjon direkte fra et element hvis den har alle tre margene, paddings og grenser som er angitt i stilarket. Hovering over ett av disse elementene gir oss et glimt på sin boks modell, slik:
Når du lurer på hvorfor noen flytende elementer ikke oppfører seg som forventet, kan det hende at visning av margin / polstringsinformasjon kan hjelpe deg med å diagnostisere problemet. For eksempel kan du oppdage at et element er bredere enn det du forventet på grunn av ekstra utfylling.
Mens det er temaet marginer / paddings / grenser, la oss bytte til stilområdet av Elements panelet og sjekk ut "Metrics" -panelet.
Dette lar deg bore ned og identifisere mulige problemer med hvorfor et element gjør det som det gjør. Det er også et flott læringsverktøy; hvis du ikke har fått hodet rundt CSS Box-modellen, så metrics diagrammet er et flott visuelt hjelpemiddel.
De metrics ruten lar deg vise elementdimensjoner, polstring, grenser og marginer. Legg merke til hvordan du kan markere over hver enkelt del for å få en visuell fremstilling av hvordan det gjøres i nettleseren. De metrics Diagrammet gir også pikselbaserte målinger for hver del av elementet, f.eks. en stilregel av polstring: 10px 5px (10px øverst og nederst, 5px høyre og venstre) viser de nøyaktige målingene for hver side av elementet.
Vise stil informasjon er morsomt, men umiddelbart tinkering med hvilken som helst side stil er rangert mye høyere på 'ol moro meter. Enten det er å utdanne oss, eksperimentere med et design, eller til og med kommunisere ideer til våre jevnaldrende, er kraften tildelt av dev-verktøyene ikke noe kort enn fantastisk.
Sørg for Styles panelet er utvidet og klikker bare til høyre for åpningskurven. Du merker at en markør posisjonerer seg automatisk slik at du kan skrive en stilegenskap. Skriv inn et eiendomsnavn, trykk på fanen for å flytte markøren til verdien, og skriv inn verdien. Jeg skal legge til følgende CSS:
grense: 1px solid grønn
De Elements panelet viser sidenes merking som den blir gjengitt i nettleseren.
Når du begynner å skrive inn eiendomsnavnet, gir Chrome forslag, som gir deg fordelene ved automatisk fullføring. Rått! Trykk på fanen velger nærmeste match til hva du skrev og flytter markøren til verdien posisjon. Men trykker du på høyre piltast får markøren til å forbli i eiendomsdelen, men fyller i nærmeste samsvar med det du skrev inn.
Automatisk fullføring fungerer også med eiendomsverdier. For eksempel skriver du i "pos" * tab * "fi" * -fanen * oppretter en stilegenskap av posisjon: fast. Når du legger inn pixel- / prosentbaserte verdier, for eksempel 15% eller 10px, kan vi øke og redusere disse verdiene ved hjelp av piltastene opp og ned. For å øke med 10, bruk skift + opp piltastene.
Endring av fargeverdier er en bris takket være fargevalgeren. Etter å ha angitt en fargevare, enkeltklikk på den lille, fargede firkanten til venstre for verdien for å få opp fargepluksverktøyet. Du kan også bytte mellom fargevareformater ved å skifte + klikke på den firkantede firkanten.
Du kan opprette en ny stilregel ved å klikke på det lille + ikonet i stilruten. Markup som ser ut som:
Hallo
Genererer automatisk følgende stilregel:
#something
Markup som ser ut som:
Hallo
Genererer automatisk følgende:
.noen klasse
Markup som ser ut som:
Hallo
genererer:
.h1
Markup som ser ut som:
Hei der
Genererer automatisk:
.class1.class2.class3
Selvfølgelig kan stilregler endres til din smak.
De Elements panelet gir deg mye strøm med strukturen og stilen på siden, men dev-verktøyene gir oss mange flere verktøy som er avgjørende for vårt arbeid.
De ressurser panelet viser hvilke ressurser en side bruker. La oss ta en titt på hva den gir.
De metrics ruten lar deg vise elementdimensjoner, polstring, grenser og marginer.
lokal lagring.sessionStorage.Utviklerverktøyene har også en søkefunksjon.
lokal lagring, informasjonskapsler eller annen data lagringsmekanisme. I tillegg bestemte ressurser, for eksempel lokal lagring kan endres via utviklerverktøyene.Til tross for mangel på rammebruk i dagens nettsider, er det en verdifull ferdighet å forstå hvordan man inspiserer en side med flere rammer. I følgende skjermbilde vil du legge merke til en kolonnert side hvor hver kolonne representerer en annen ramme:
Du kan lagre en ressurs på datamaskinen din
Hver ramme er plassert i sin egen mappe. Hver mappe inneholder hver sidees eiendeler, og du kan klikke på hver side for å vise innholdet. Vise innholdet på en HTML-side er nyttig, men vi kan gå deg dypere inn i hver side og se ressursene. JavaScript, CSS, bilder og til og med fonter kan ses! Eiendeler som inneholder kode vises i utviklerverktøys kodevisning, som kommer med syntaxutheving og linjenumre.
Det er viktig å merke seg at systemfonter, for eksempel Arial eller Helvetica, ikke er oppført under Fonter; Font-delen viser bare de skriftene som nettleseren har hatt å laste ned.
Skriften skaler slik at den kan passe inn i ressursinnholdsområdet; Derfor endrer størrelsen på ressursinnholdsområdet også eiendelen!
Det er klart at noen tanke gikk inn i bildevisningen.
Utviklerverktøyene viser bildet i innholdsområdet, og bildet skaleres i henhold til innholdsområdets størrelse. Bilder med gjennomsiktighet (som den i skjermbildet ovenfor) vises med et tavle i bakgrunnen, noe som gjør det enklere å se bildet. Andre nyttige opplysninger, for eksempel dimensjonene, filstørrelsen og MIME-typen, vises under bildet.
JavaScript! Ved å klikke på en skriptfil vises innholdet, men ikke mye annet.
Men fortvil ikke; Visning av eiendeler er rett og slett det: visning av eiendeler. I en fremtidig opplæring, ser vi på dev-verktøyets JavaScript-støtte og -funksjoner.
Du kan vise de forskjellige stilarkene som nettleseren lastet for nettsiden.
Som med JavaScript-filer, kan du ikke gjøre mye med stilarket.
Av og til kan nettleseren ikke laste inn en bestemt ressurs på grunn av nettverksproblemer eller utviklerfeil.
Når dette skjer, vises en liten rød melding til høyre for aktiva. Tallet angir hvor mange feil som har oppstått, og innholdsruten gir mer informasjon om feilen.
Hver ressurs har en kontekstmeny; ganske enkelt høyreklikk på en ressurs viser en meny som ligner på dette:
Du kan lagre en ressurs på datamaskinen, åpne en ressurs i en ny kategori og utføre mange andre oppgaver. Dobbeltklikk på ressursen åpner aktiva i en ny kategori.
Som jeg tidligere nevnte, kan du se informasjon om informasjonskapsler for et bestemt nettsted. For eksempel kan navigering til Twitter mens du logger på, gi lignende informasjon til det som vises i dette skjermbildet:
Her ser vi:
Når du lurer på hvorfor noen flytende elementer ikke oppfører seg som forventet, kan det hende at visning av margin / padding-informasjonen kan diagnostisere problemet.
.twitter.com tillater eventuelle underdomener på twitter.com.Du kan slette en informasjonskapsel ved å høyreklikke på en informasjonskapsel og velge Slett fra kontekstmenyen.
Det er interessant å merke seg hvordan nettlesere bruker informasjonskapsel for å avgjøre om du er en godkjent bruker. Når du logger inn på Twitter, ber vi om å slette "auth_token" og "_twitter_sess" informasjonskapsler oss etter å ha oppdatert siden. Twitter lagrer sannsynligvis vår loggede status og andre biter av sensitiv informasjon i disse informasjonskapslene.
Lagring og visning av nøkkel / verdi par i lokal lagring er ganske enkelt. I stedet for å lagre egne taster, bruker vi et eksisterende nettsted som et eksempel. Følgende skjermbilde viser den lokale lagringsvisningen til et kjøkkenvaskeksempel-app laget med den mobile webapplikasjonsrammen Sencha Touch.
Når du først ser på siden, gjør nettleseren en forespørsel om en CSS-fil. Forfriskning av siden føles mye snappier fordi Sencha lagret CSS i lokal lagring. Kjøkkenvaskappen har noen interessante nøkkel- / verdipar. For eksempel ser en nøkkel slik ut:
3a867610-670a-11e1-a90e-4318029d18bb-http: //dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css
Verdien for den aktuelle nøkkelen begynner med dette:
/ * 45e6f4ffe818855b26f3dcbfc156025eca58e4f5 * / kode, pre, pre * font-family: Menlo, Monaco, Courier, monospace
Steve Souders skrev om lagring av eiendeler i lokal lagring; Det er en interessant og spennende bruk av lokal lagring som kan forbedre ytelsen - spesielt på mobile enheter.
Programbufferen forteller nettleseren hvilke ressurser den skal cache, og Programmeringsbuffer kategori lar oss vise hva som er blitt cached.
Det er tre kolonner med denne visningen:
Se denne opplæringen hvis du ikke er kjent med HTML5-programbufferen.
Vi har nettopp kommet i gang. I del to ser vi på flere paneler med et lite fokus på ytelse, slik at vi kan gi en bedre brukeropplevelse.
