Share
I del 1 så vi hvordan du skriver og utfører JavaScript ved hjelp av DevTools. I del 2 skal vi se på feilsøkings-JavaScript og vedta en arbeidsflyt slik at løsningen av JavaScript-feil og diagnostisering av problemer blir mer effektiv.
Du kan bruke debugger-søkeordet direkte i koden din for å aktivere feilsøkingsfunksjonene (hvis noen) av JavaScript-kjøretiden. Effekten av å legge til søkeordet debugger i koden din er identisk med manuelt å sette et brytepunkt via DevTools brukergrensesnitt. I Chrome er det debugger Søkeordet har ingen effekt mens DevTools er stengt.
Feilsøkingskontrollene gir finkornet kontroll over debugging-strømmen. Bruk disse når pause på et brytepunkt for å navigere effektivt gjennom JavaScript-koden. Hver debugger-kontroll som er oppført i denne delen, tilsvarer en knapp i DevTools som du kan velge mens du er pause på et brytepunkt.
Blir det nåværende brytepunktet og gjenoppta kjøring av kode som normalt. Dette påvirker ikke andre bruddpunkter som ennå ikke er pauset.
Bruk Fortsette når det nåværende pausede brytepunktet ikke er nyttig, og du vil at kodekjøring skal gjenoppta som normalt.
Trinn gjennom kode linje for linje (en linje per klikk) til et funksjonsanrop nås. På dette tidspunktet blir funksjonsanropet "over", og du går ikke inn i det aktuelle funksjonssamtalen.
Bruk Tråkke over når det du prøver å løse er scoped med gjeldende funksjon, og du trenger ikke å se på eksterne funksjonssamtaler.
Lik Tråkke over, bortsett fra at i dette tilfellet navigerer du til eksterne funksjonssamtaler ved å gå til sin første linje.
Bruk Gå inn i når du er interessert i linje etter linjeutførelse, samt eventuelle eksterne funksjonssamtaler.
Når du går inn i en funksjon, Gå ut vil fortsette å utføre resten som fungerer kode, men det er ikke debugged.
Bruk Gå ut når du ikke har interesse for resten av gjeldende funksjon og ønsker å fortsette debugging utenfor den.
Anropsstakken er aktiv når den er pauset ved et bruddpunkt. Utførelsesbanen som fører til det for øyeblikket midlertidige pausepunktet, vises i anropsstakken, hvor toppsamtalen er den nyeste.
Hver samtale i stakken inneholder:
Klikk på et hvilket som helst anrop i stakken for å navigere til punktet i kildekoden med den aktuelle linjen uthevet. For å kopiere en stakkspor til utklippstavlen, Høyreklikk på en samtale og velg Kopier stakk spor. I samtalemenyen for samtalestap kan du også velge Start på nytt ramme.
Overvei brukssaken at debuggeren har stoppet midtveis gjennom en tilbakeringingsfunksjon utløst av en klikkhendelseshåndterer, og du prøver å feilsøke hvorfor henting av mål ser ikke ut til å fungere som forventet.
Du ser et forsøk på å få tilgang til målegenskapen som en del av dette søkeord, men du husker at det er en eiendomsdel av hendelsesobjektet som er gått som et argument til tilbakeringingsfunksjonen.
Du kan omskrive funksjonen ved hjelp av Live Edit for å bekrefte at endringene dine fungerer, og det nye JavaScript blir injisert i V8-motoren.
Når du skriver en hendelseshåndterer for et arrangement som bla, kan du begynne å bruke console.log for å se hva det passerte argumentet (hendelsesobjektet) ser ut som. Et raskt tips for å oppnå dette er å bruke monitorEvents snarvei. Lim inn følgende kode i Konsollpanel og deretter bla siden:
monitorEvents (vindu, "endre størrelse");
Legg merke til at hendelsesobjektet er logget på konsollen klar til inspeksjon.
Når du vil at debuggeren skal sette pause på første linje av en funksjon under utførelsen, kan du gjøre ett av følgende:
En annen teknikk er å utføre debug (fn) som er en del av Command Line API. Funksjonen tar den funksjonen du vil feilsøke som argument, og vil bryte på den første linjen i den funksjonens utførelse.
Denne teknikken gjør at du kan stoppe feilsøkeren når en egenskap av en gjenstand du har interesse for, er tilgjengelig på noen måte (en lese eller skrive). Å bryte når en egenskap av et objekt leses eller skrives til, utfør følgende (via Konsollpanel eller Tekstutdrag):
Object.defineProperty (document.body, 'scrollTop', get: funksjon () debugger;, sett: funksjon (val) debugger;);
Dette gjelder en getter og setter til scrollTop eiendom av document.body gjenstand. I den tilpassede getter og setter finnes debugger-setningen. Du kan også bruke Object.observe å bryte på egenskapstillatelser for et spesifisert objekt:
var watchMe = ; Object.observe (watchMe, function () debugger;);
Feilsøkingsordet til side, for å angi et brytepunkt via DevTools, kan du klikke på linjen med kode du ønsker å bryte i innenfor røret. Denne metoden for å angi et brytepunkt har ekstra funksjonalitet: Du angir et betinget bruddpunkt som vil instruere DevTools å pause på et brytepunkt bare hvis et bestemt uttrykk evaluerer til ekte. For eksempel kan du angi et betinget bruddpunkt for å bare stoppe midlertidig hvis det finnes et feilargument.
For å angi et betinget bruddpunkt:
Du kan også bruke betinget bruddpunktsteknikk for raskt å sette inn en console.log uttalelse som uttrykket for å evaluere. Siden console.log evaluerer til udefinert, DevTools pause ikke, men siden uttrykket er fortsatt utført, kan du inspisere verdien av variabler på denne måten.
Når debuggeren er pauset ved et bruddpunkt, kan du hente opp Konsollpanel i skuffmodus ved hjelp av Flukt nøkkel. Koden du legger inn evalueres i samme kontekst som det punktet du er pauset på, noe som betyr at variabler som er scoped, vil være tilgjengelige for deg.
En Watch Expression er et verktøy for å forenkle regelmessig inspeksjonsteknikk (via console.log for eksempel) av scoped variabler. Watch Expressions er en rute i kilden panelet. Du kan legge til eller fjerne Watch Expressions ved hjelp av I tillegg til og Minus knapper. Et typisk objekt å se etter er dette gjenstand; Legg merke til hvordan det refererer til et globalt vinduobjekt når du ikke er pauset på et bruddpunkt.
Watch Expressions oppdateres vanligvis mens du går gjennom kode. Hvis det ikke gjør det, klikker du på Forfriske knapp.
Vurder følgende skript:
Accentsconagua
funksjon a () return b (); funksjon b () return c (); funksjon c () console.trace ('The Trace'); returnere 42; a ();
Det er tre deklarerte funksjoner. Funksjon en samtaler funksjon b, deretter fungere b samtaler funksjon c. Skriptet initierer kjeden med et kall for å fungere en. De console.trace setningen logger til konsollen en stakk spor fra det punktet hvor metoden ble kalt. Bruke console.trace viser utgangen av bruk console.trace.
Vær oppmerksom på at funksjonsnavn og linjene der de blir kalt, vises i spormeldingen. Du kan klikke på linjenummeret som skal tas til sitt punkt i kildekoden via kilden panelet. Denne teknikken fungerer også for utdrag.
Feilsøkeren tilbyr ulike moduser for å håndtere unntak:
Når du må feilsøke et nettsted som du ikke har lite innsikt i, kan du bruke en annen debuggingteknikk. I denne tilnærmingen knytter du til hendelser du tror vil utløse, og be om DevTools pauser på slike hendelser hvis og når de oppstår. Det er to kategorier av "utenfor" i "inngangspunkter:
Du har til oppgave å feilsøke en nettside, spesielt DOM. Noder legges til og fjernes i løpet av livssyklusen til siden, og du må inspisere JavaScript som gjør at dette skjer. Sett et DOM-brytepunkt med følgende trinn:
Hver gang du setter et DOM-brytepunkt, kan du enkelt slå det på og av på DOM breakpoints rutenett i Elements Panel. I denne ruten er hvert bruddpunkt du angir, oppført, og du kan samhandle med denne ruten på følgende måter:
Beskrivelse: En subtree-modifisering skjer når treet til en rotnode (som har breakpoint-settet) endres. Dette kan inkludere tillegg eller fjerning av noder.
Bruk tilfelle: En tom div Beholderen er til stede i DOM, og en Ajax-forespørsel skjer på sidebelastning som legger til noen nye noder, den originale containeren. Legg til et Subtree-modifikasjonsbruddpunkt på beholderen for å se det eksakte punktet i koden som legger til nye noder til DOM.
Meldingseksempler: Pauset på en Subtree Modified brytepunkt satt på kropp, fordi dens etterkommer p var fjernet. Eller: Pauset på en Subtree Modified brytepunkt satt på div # forelder, fordi et nytt barn ble lagt til den noden.
Beskrivelse: En attributt modifikasjon utløser når et attributtnavn eller verdi på en node er lagt til, fjernet eller endret. Dette inkluderer alle attributter, for eksempel klasse, data-*, eller stil.
Bruk tilfelle: En visuell forandring skjer på siden på et tilsynelatende tilfeldig tidspunkt, og du begrenser dette til en klasse som er dynamisk satt på kroppselementet. Du ønsker å undersøke årsaken til dette dynamiske klassen tillegget.
Meldingseksempel: Pauset på en Attributtmodifisert brytepunkt satt på p.
Beskrivelse: Et knutepunkt for fjerning av knutepunktet utløser det punktet der en knute er fjernet fra foreldrene som inneholder det angitte knutepunktet.
Bruk tilfelle: Du bygger en gjøremålsliste-app og ønsker å bekrefte at når en bruker sletter en gjøremål, blir den også fjernet fra DOM. Du kan angi et knutepunkt for fjerning av knutepunkt for å sikre at denne oppførselen oppstår.
Meldingseksempel: Pauset på en Node fjernet div # container.
I DevTools er en rekke forhåndsdefinerte Event Listener Breakpoints tilgjengelige for deg å aktivere. Disse tilbyr inngangspunkter i JavaScript som tilhører en side.
Tenk på en enkel about: blank side. Sett a klikk Hendelseslytterbruddpunkt på denne siden med følgende trinn:
Mus Event Listener kategori.Klikk hendelse lytter.Du har nå satt et brytepunkt. Hvis du klikker på siden, merk at ingenting skjer. Nå utfør følgende stykke JavaScript-kode i Konsollpanel.
document.addEventListener ('klikk', console.log.bind (konsoll))Når du angir et brytepunkt for samme begivenhet, har du registrert en hendelseslytter for, avbryter feilsøkeren før punktet der hendelseslytterens tilbakeringing blir utført.
Du kan registrere breakpoints for mange typer hendelser som timere, berøringshendelser og mer, som er oppført i tabellen nedenfor.
| Hendelse Kategori | Hendelseseksempler |
|---|---|
animasjon | requestAnimationFrame, cancelAnimationFrame, animasjonFrameFired |
Styre | endre størrelse, bla, zoom, fokus, slør, velg, endre, send, tilbakestill |
utklippstavlen | kopiere, klippe, lime, beforecopy, beforecut, beforepast |
DOM-mutasjon | DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded |
Enhet | deviceorientation, devicemotion |
Dra slipp | dragenter, dragover, dragleave, drop |
Tastatur | keydown, tastatur, tastetrykk, inngang |
Laste | last, beforeunload, losse, avbryte, feil, hashchange, popstate |
Mus | klikk, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel, hjul |
Timer | setTimer, clearTimer, timerFired |
Ta på | touchstart, touchmove, touchend, touchcancel |
WebGL | webglErrorFired, webglWarningFired |
"Feilsøking fra utsiden i" -teknikken kan være nyttig når du trenger å feilsøke et tredjepartswebområde hvis funksjonalitet er ødelagt, eller til og med når du er nysgjerrig på hvordan noe på en side du ser, fungerer.
Det finnes flere Chrome-utvidelser, hvorav mange forbedrer DevTools-funksjonaliteten. En utvalgt liste finnes i DevTools Extensions Gallery.
For DevTools Extension forfattere er JavaScript preprocessing-funksjonen et verdifullt emne å lære om. Forprosessoren kan fange opp JavaScript-kildekoden før den går inn i V8-motoren, noe som betyr at JavaScript-kildekoden kan endres via DevTools før den går inn i VM, alt fra en utvidelse.
I tillegg til avlytingsfunksjonene har forhåndsbehandlings-API-en programmatisk tilgang for omlastning av skriptkilder. En utvidelse kan, på et hvilket som helst tidspunkt i løpet av sin livssyklus, laste inn en JavaScript-kilde uten å laste opp den opprinnelige nettsiden.
Denne delen dekker et par verktøy som gir et visst nivå av integrasjon mellom Node.js og Chrome DevTools.
Det er to deler til DevTools:
Ethvert program kan implementere kommunikasjon over den eksterne feilsøkingsprotokollen og tillate brukerne å feilsøke via DevTools. Node Inspector er et slikt verktøy. Etter installasjon kan du kjøre et node script ved hjelp av Node Inspector. Verktøyet starter en webserver som er vert for DevTools-fronten. Denne spesielle versjonen av DevTools bruker ikke Chrome-backend, men heller Node Inspector's own one.
Som du kan se i Node Inspector, er DevTools pauset på et bruddpunkt. Anropsstakken refererer til samtalene som er utført i Node.js. Nettleserens eneste engasjement her er for DevTools brukergrensesnitt.
Bruk Node Heapdump til å ta et øyeblikksbilde av V8-bunken på et tidspunkt i koden din. Den nåværende tilstanden til V8-bunken er serialisert og utdata til en fil.
Sammenlign to heap øyeblikksbilder for å finne ut hvilke objekter som ikke blir søppel samlet. Dette er nyttig for å fange minnelekkasjer.
Det er det for denne todelte serien på en moderne debugging-opplevelse. Forhåpentligvis på dette punktet er du komfortabel med å forberede og feilsøke JavaScript i Chrome DevTools. Du er kjent med arbeidsflyter som kan hjelpe feilsøking, og du vet noen tips og triks når du arbeider med et produksjonssted du ikke har jobbet med før. Pass på å prøve noen av teknikkene du lærte her neste gang du må feilsøke.
Takk for at du leser!
