Share
I 2013 skrev jeg noen opplæringsprogrammer på DevTools: Markup and Style, Networking og Console og JavaScript og Performance, som dekker de grunnleggende funksjonene i de ulike DevTools-panelene. Siden da har mye endret seg, så la oss ta en titt.
DevTools har vokst ganske siden den sist ble dekket på Tuts +, her er noen av funksjonene du vil være oppmerksomme på:
screen: se og samhandle med nettsider på Android-enheten din via DevTools på skrivebordet.
arbeidsområder: bruke kilder panel som kode redigerer. Rediger koden i prosjektet ditt og har det vedvarer til disken.
Kilde kart feilsøking: skriver LESS / Sass eller CoffeeScript? Utgangskildekart under samling for å ha DevTools forstå kartleggingen.
* Flammekart: *se en interaktiv visualisering av JavaScript-behandling over tid.
Mobil emulering: etterligne bestemte enhetsegenskaper (for eksempel skjermdimensjoner, brukeragenter) og bruk dem på siden din for å se hvordan det reagerer.
Løsning av lærred: Gå gjennom kommandoene HTML5 lerret mottar og se hvordan lerretet endres med hver instruksjon.
Mye har gått inn i DevTools for å forbedre utviklings- og feilsøkingsflyten. Fra kildekart feilsøking til ekstern feilsøking er det forhåpentligvis minst en ting i dette innlegget, du vil kunne ta bort og begynne å bruke. Hvis du vil prøve noen av disse funksjonene, kan du gå videre og gi Chrome Canary et forsøk.
Med Screencasting får du muligheten til å samhandle med en nettside som er åpnet i Chrome for Android, fra din stasjonære maskin. Klikk, swipes, rulling og mer er alle gjort mulig ved hjelp av en mus.
Åpne Kontroller enheter side ved å klikke på pølse ikon i Chrome (øverst til høyre) og gå til Verktøy> Kontroller enheter (Alternativt, skriv inn chrome: // inspisere / # enheter i adressefeltet). Pass på at du kan se enheten din i listen. Enheten må ha USB-feilsøking aktivert hvis ikke allerede. Når enheten din har vist seg, skriver du inn en nettadresse du vil fjerne feilsøking i "Åpne kategorien med URL", og velg åpen. På dette tidspunktet bør du se denne siden lastes opp i Chrome for Android. Truffet 'Undersøke'tilbake på krom: // inspisere side og legg merke til en liten Skjerm ikonet i øverste høyre hjørne av DevTools. Ved å klikke på dette aktiveres Screencasting.
Skjermbildet du ser innenfor DevTools, oppdateres i sanntid. Hvis du ruller siden (via DevTools eller på enheten) vil også motparten bla. Legg merke til i skjermbildet under, at Inspisér element Funksjonen oppfører seg akkurat som du forventer, ved at funksjoner som skriving og bevegelser gjør at du kan flytte betydelige deler av enhetstestingsflyten til DevTools.
Sjekk ut den offisielle dokumentasjonen på Screencasting på skjermen din.
Den generelle ideen er at du har kilder panelet viser innholdet i prosjektkildens filer som de eksisterer på filsystemet ditt. Hver fil kan redigeres med lagringskapasitet. Rediger ikke bare filene som en tekstredigerer, men synkroniser endringer til dem, enten du redigerer stiler i Elements panel, eksternt i en annen editor eller i DevTools.
Å forberede arbeidsområder:
Du legger først en mappe til arbeidsområdet ditt. Høyreklikk i kilder ruten og velg 'Legg til mappe til arbeidsområde'.
Gi filsystemtillatelser som forespurt av Chrome.
Etter at du har gitt filsystemtillatelser, kan du gå videre og redigere koden din i DevTools, og lagre den på samme måte som i en kodeditor. Den virkelige fordelen kommer fra redigeringskoden som deles av nettsiden du ser på. Hvis du serverer en side på http: // localhost: 3000 / gå videre og legg til det tilsvarende prosjektet som en Workspace-mappe i DevTools. På dette tidspunktet vil du lære DevTools om kartlegging mellom nettverksressursen og den tilhørende filsystemressursen.
Høyreklikk på en fil i en nettverksbasert mappe i kilder panelet (sørg for at det har en tydelig kartlegging til en fil på filsystemet ditt).
Å velge Kart til File System Resource ...
Når DevTools har fått beskjed om kartleggingen, vil prosjektkildelfiler vises i stedet for nettverksressursfilene.
Noen få små, men nyttige funksjoner verdt å merke seg er:
De fleste filer kommer med syntaxutheving.
Bruk Cmd + P for å åpne en fil raskt, hvis du ser uønskede resultater (som filer i node_modules), Høyreklikk på den inneholdende mappen og velg 'Ekskluder mappe'.
Opprett nye filer fra Kontekstmenyen > 'Ny fil'.
Hvis du oppdaterer en fil andre steder, vil DevTools forsøke å automatisk laste på nytt fra det når det gjenopptar fokus.
Se DevTools dokumentasjon for Workspaces over på Google for mer informasjon.
For mindre, Sass, CoffeeScript og noen andre verktøy, kan deres kompileringsprosess produsere kildekartfiler. DevTools er i stand til å tolke slike filer og gi deg live-rediger evner. Dette betyr at du kan redigere kildefilene dine (.mindre, .scss, .coffee) innen kilder panel. Hvis du har en klokkeoppgave på dine forhåndsbehandlede filer som gjenoppretter en ny CSS / JS-fil ved endring, vil DevTools automatisk laste på nytt fra den filen ved endring og oppdatere nettsiden tilsvarende.
For å forstå mer om disse arbeidsflytene, har vi dekket DevTools pluss kildekortsfelging i fortiden:
Utvikling med Sass og Chrome DevTools (juni 2013)
Arbeider med mindre og Chrome DevTools (jan 2014)
Flamediagrammet gir deg en visuell oversikt over JavaScript-aktiviteten over en viss tid.
Hvis du vil opprette og vise en flammediagramvisualisering, samler du en JavaScript CPU-profil fra profiler fanen og valgte "Chart"visning på Profil resultat. Spikes i grafen kan zoomes inn i dra og velge en del av interesse. Du kan velge et område som vil føre til at flammediagrammet oppdateres tilsvarende, og dra deretter flammene horisontalt eller vertikalt for å panorere rundt.
Høyden på alle stolper i en bestemt kolonne er ikke signifikant, det representerer bare hver funksjonssamtale som skjedde. Det som er viktig er imidlertid bredden på en linje, da lengden er relatert til tiden som funksjonen tok for å utføre.
Hver stolpe kan sveve over for å få opp timing detaljer. Et utgangspunkt for å oppdage ytelse flaskehalser ville være:
Finn en bred stang i flammediagrammet.
Sveve over det for å hente opp detaljer-delen.
Sørg for at "Total tid'er til en tilfredsstillende mengde.
En bar som har en høy kjøretid kan senke nettsiden din ned, klikk på det å bli tatt til det tilsvarende punktet i koden.
Det er et dedikert dokumentasjon for Flamediagrammet over på Google.
Mobil emulering gjør at skrivebordet Chrome kan etterligne bestemte egenskaper for mobile enheter. Egenskaper kan styres individuelt eller via et sett med faste forhåndsinnstillinger basert på populære enheter som Nexus 5, Galaxy S4, iPhone, iPad, Kindle og mange flere.
Rett utenfor flaggermuset kan du bruke en forhåndsinnstilt enhet for å se hvordan den inspiserte nettsiden oppfører seg under mobile forhold.
Åpne DevTools skuffen ved å trykke Flukt.
Naviger til emuleringsruten.
Å velge 'Google Nexus 5'
Trykk 'Etterligne'
Du vil også oppdatere siden for å sikre at enhetens innstillinger er riktig brukt. Legg merke til hvordan det synlige webområdet er nå mye mindre, dette tilsvarer aspektforholdet til enheten som er forhåndsinnstilt. Hva annet har endret seg?
Bruker agent: Typing navigator.userAgent i konsollen vil utdatere emulert enhetsbrukeragent, for eksempel: "Mozilla / 5.0 (Linux; Android 4.2.1; en-oss; Nexus 4 Build / JOP40D) AppleWebKit / 535.19 (KHTML, som Gecko) Chrome / 18.0.1025.166 Mobile Safari / 535.19"
Skjermoppløsning: De rapporterte dimensjonene screen.width og screen.height nå rapporter dimensjonene du vil motta fra enheten selv. Legg merke til at bredden og høyden for Nexus 5 er forhåndsinnstilt som 384 og 640 henholdsvis. Se Et piksel er ikke en piksel er ikke en piksel.
* devicePixelRatio: *window.devicePixelRatio rapporter 2 som vil muliggjøre en medieforespørsel som retter seg mot Min-enhet-pixel-forhold: 2.
Trykk på hendelser: "Klikk" du utfører, vil nå oversettes til den vanlige berøringsstart, berøre og andre hendelser. Tips: Hør raskt etter berøringshendelser ved hjelp av monitorEvents (vindu, "touchstart"); i Console panel.
Uavhengig av en forhåndsinnstilt enhet, finnes det noen andre emuleringsalternativer som kan aktiveres. Sensorpanelet i emulasjonspanelet inneholder en realtids-akselerometer som kan trekkes rundt.
Du kan tilpasse den rapporterte breddegraden og lengdegraden som også ligger innenfor Sensor-ruten, dette er nyttig når den inspiserte nettsiden utnytter navigator.geolocation fremgangsmåter.
For mer informasjon om emuleringsalternativer som er tilgjengelige i DevTools, se den offisielle mobilemuleringsdokumentasjonen.
Canvas Inspection i DevTools er for øyeblikket en eksperimentell funksjon. Aktiver det på DevTools> Innstillinger> Eksperimenter. Canvas Inspection er i hovedsak en profil type, så du finner den under profiler ruten hvor den kan aktiveres.
Lerretsprofilen samler inn instruksjoner som sendes til lerretet selv og lar deg gå gjennom hverandre mens du ser på de nåværende lærredegenskapene og en visuell representasjon av lerretet på et bestemt tidspunkt.
Når en profil er registrert, kan du utforske toppnivåelementene (trekk samtalegrupper) og oppdage individuelle trekksamtaler (ctx.drawImagefor eksempel). Til høyre for hvert tegneanrop må du legge merke til file: linenumber referanse, ved å klikke på dette navigerer du til kilder Panel med den aktuelle koden du valgte. Du kan bruke verktøylinjen:
... for enkelt å navigere gjennom individuelle tegneanrop, eller påfølgende tegneoppringningsgrupper. Med rullegardinmenyen kan du angi hvilket lerretskontekst som skal inspisere egenskapene til, hvis det er mer enn én.
En mer detaljert guide, se: Lerretinspeksjon ved hjelp av Chrome DevTools over på HTML5Rocks.
DevTools for Mobile - Chrome Dev Summit 2013 av Paul Irish.
Det er også The Breakpoint Ep. 6: Accelerating Load Time, Run Time og JS tooling som har stor vekt på ytelse, det er en år gammel, men fortsatt verdt en klokke.
For de med sakte rulling sider på mobil, kassen: The Breakpoint Ep. 7: Profiling et mobilt nettsted med Chrome DevTools med Paul Irish og John McCutchan
En fin dybdebryte episode på minne profilering: Ep. 8: Minneprofilering med Chrome DevTools, episoden inneholder Loreena Lee og John McCutchan.
Addy Osmani opprettet en DevTools produktivitetsvideo: Forbedre 2013-produktiviteten din med Chrome DevTools.
Paul irsk viser en rekke tidligere eksperimentelle funksjoner i DevTools.
Noen DevTools-fordøyelser ble publisert på HTML5 Rocks, det er november og desember-utgavene med den nyeste versjonen av Chrome 33-utgaven.
Remy Sharp deler sin innsikt i rendering ytelse med tidslinjen panelet.
Paul Lewis og Addy Osmani skrev nylig en ekstremt detaljert artikkel for Smashing Magazine med tittelen: Gone In 60 Frames Per Second: En Pinterest Paint Performance Case Study, som er fint, da det gir praktiske eksempler på problematisk ytelse.
Opplevelser i Jank Busting: Parallax, ytelse og den nye Flickr-hjemmesiden som ble lagt ut på Flickr Engineering-bloggen, er et utrolig detaljert innlegg på hvordan dårlig ytelse ble forbedret dramatisk ved å ta tiltak på tidslinjepanelmålinger.
Brian Grinstead deler sine DevTools Snippets på GitHub sammen med et blogginnlegg.
Secrets of Browser Utviklerverktøy av Andi Smith har et stort utvalg av DevTools-tips som forhåpentligvis skal gjøre utviklere mer effektive under utviklingsarbeidet.
DevThemez inneholder en haug med egendefinerte temaer som kan brukes med DevTools.
Jeg prøver å re-tweet / dele nyttige lenker på min Twitter og Google+ sider i profilen min her på Tuts+.
Det er alt for nå, takk for å lese.
Liker du hva du har lært? Finn ut mer om Chrome DevTools!
Accentsconagua