Share
I denne todelte opplæringsserien tar vi en titt på å skrive og feilsøke JavaScript-kode ved hjelp av moderne verktøy, for eksempel Chrome DevTools.
I del 1 får du et innledende blikk på de ulike panelene i DevTools og hvilke arbeidsflyter de passer for. Det vil også være fokus på å skrive og utføre JavaScript-kode gjennom nettleseren i stedet for en kodeditor.
Utviklerverktøy er funksjoner som tilbys av nettlesere som inneholder et sett med verktøy for å inspisere, samhandle med og feilsøke nettsider. Browser DevTools er vanligvis kombinert med alle moderne nettlesere, inkludert Chrome, Firefox, Safari, Opera og Internet Explorer. Denne opplæringen vil fokusere spesielt på DevTools-delen av Chrome Canary, men alle funksjonene som er oppført her, vil trolig være en del av Chrome Stable snart.
Den åpne nettplattformen gjør det mulig å Høyreklikk> Inspiser element på en hvilken som helst nettside og oppdag internals av det, men JavaScript har alltid vært litt mer ut av rekkevidde enn CSS (Cascading Style Sheets). Mens DevTools er fullpakket med funksjoner relatert til styling av siden, er det også en haug med mindre kjent funksjonalitet som gjør at du kan se, skrive og feilsøke JavaScript på en rekke måter, enten det er på din egen side eller på en tredjedel -parti-området.
Hvis du er en front-end webutvikler, anbefales det at du i det minste er oppmerksom på JavaScript-verktøyene DevTools har å tilby. Høyt nivå funksjoner inkluderer:
Denne delen vil dekke brukergrensesnittelementene til DevTools, spesielt Kilden Panel og Console Panel, siden disse er de to panelene som vil bli brukt for resten av denne opplæringen.
Legg merke til noen få oppsettegenskaper:
Kilden panelet gir deg en kode editor, og den støtter syntaksutheving for mange vanlige filformater som HTML, CSS, JavaScript, CoffeeScript, LESS og Sass. Kodeditoren er tilstede i hovedruten. Rett over hovedruten kan du se faner som svarer til dine åpne filer.
I kildenruten i venstre sidefelt finnes det et filtre som vanligvis viser eiendelene den nåværende inspiserte siden har lastet inn. Eiendeler er gruppert etter domene, og mapper kan være i en utvidet eller sammenfalt tilstand. Hvis du enkelt klikker på et aktiv, åpnes det i kodeditoren.
Den høyre sidelinjen inneholder kontroller for JavaScript-feilsøking, og hver rute kan være i en utvidet eller sammenfalt tilstand. Ulike utgangsnivåer vises her når JavaScript er pauset ved et bruddpunkt.
Konsollpanelet lar deg vise utdataene produsert ved diagnostisk logging (for eksempel console.log uttalelser), men også å skrive og evaluere JavaScript i sammenheng med den aktuelt inspiserte siden. Konsollpanelet støtter både Console API og Command Line API. Her er noen funksjoner som er utsatt for hver API, sammen med en beskrivelse av deres produksjon.
Accentsconagua
// En enkel logg setning, logger en streng, array og en objekt console.log ('Hei', [1,2,3], dette);
// Samme som console.log, men formatert i rødt for å indikere en feil console.error ('En feil oppstod');
taster (vindu); // Få egenskapene til et objekt
0 $; // Hent det valgte elementet i elementpanelet
Øverst på konsollpanelet inneholder noen få kontroller som vist nedenfor.
klar(), som er en del av Command Line API.Konsollpanelet er en av de få panelene som du kan overlegge over andre paneler i DevTools (Elements, Network, Kilder) for å gi bedre arbeidsflyt. Hvis du finner deg selv regelmessig tilbake til konsollpanelet, kan du hente konsollskuffen ved å trykke på Flukt nøkkel.
Denne delen vil fokusere på å bruke DevTools for å se JavaScript-ressurser et nettsted bruker. Før du fortsetter, anbefales det å deaktivere nettleserens cache via DevTools. For å gjøre dette, naviger til Innstillinger> Generelt og aktiver avkrysningsruten med tittelen Deaktiver cache (mens DevTools er åpen). Dette sikrer at du alltid får en ny versjon av et aktivum.
Naviger til HTML5Please.com, et nettsted som forklarer beredskapen til Web Platform-funksjoner. Åpne DevTools ved hjelp av Kommando-Skift-I eller ved å velge Inspisér element fra sidenes kontekstmeny. Hodet på over til Kilder Panel og legg merke til filtrestrukturen som vises i venstre sidefelt. Det er ikke uvanlig for nettsteder å lagre JavaScript i mapper som "js" eller "skript", slik at du allerede vet hvor du skal se. Åpne opp script.js fil i js mappe. Legg merke til noen få funksjoner i kodeditoren som kan vise seg nyttig når du ser eller rediger JavaScript-kode:
Bruk go-to-definisjonen for å raskt finne eller oppdage JavaScript-metoder eller -funksjoner. Du kan åpne modifikasjonsvinduet for go-to-definisjon via snarveien Kommando-Skift-P. Hvis du kjenner navnet på metoden eller funksjonen du leter etter, skriv den inn i søkeboksen for å gå til definisjon. Når du skriver, oppdateres resultatene i sanntid. Hvert resultat inneholder samsvarende metodenavn (hvis det er en) og linjenummeret der den er definert. Bruk Tast inn for å velge et søkeresultat, og du deretter lander på linjen med kode hvor funksjonen er definert.
Nå åpen modernizr-2.0.min.js i JS / libs mappe. Det faktum at denne filen er minifisert, gjør det vanskeligere å vise. Å velge Pretty Print å ha DevTools bruke en mer intuitiv formatering til filen, ved hjelp av linjeskift og innrykk. Funksjonen Pretty Print fungerer for både CSS og JavaScript.
Hver JavaScript-fil i filtre har en kontekstmeny, så åpne den opp med Høyreklikk. Legg merke til noen få alternativer som er nyttige for å ta filen offline for senere bruk.
Nettverkspanelet, i tillegg til å bare vise deg hvilke ressurser en side har lastet inn, vil også vise annen informasjon og data.
Bruk HTML5Please.com som et eksempel nettsted, følg med trinnene nedenfor:
Det første skriptet, modernizr-2.0.min.js, har verdien av html5please.com/:17 for initiativtaker. Dette antyder at det var en HTML-ressurs som initierte nedlasting av skriptet (i stedet for en skriptlaster, for eksempel). Klikk på initiatoren, og du blir tatt til linjen med kode i kilden panelet som refererer til filen:
I tilfelle at et skript er dynamisk satt inn (med en skriptlaster for eksempel), kan initiatorkolonnen i nettverkspanelet gi en JavaScript-anropsstabel knyttet til samtalene som skjedde helt opp til punktet hvor skriptet ble dynamisk satt inn inn i DOM.
Du kan klikke på hver samtale i en anropsstabel for å navigere til den aktuelle delen av koden i kilden panelet.
I avsnittet "Vise JavaScript ved hjelp av DevTools", forklarte jeg hvordan du viser informasjon, metadata og kildekoden på JavaScript-aktiver. Denne delen vil undersøke måtene du kan skrive JavaScript ved hjelp av DevTools.
Bruk konsollpanelet til å skrive raske JavaScript-linjer med umiddelbare resultater. JavaScript utføres med konteksten til den aktuelt inspiserte siden. Utfør noe JavaScript i konsollpanelet ved å trykke på Tast inn etter at du har tastet inn noen kode.
Se API-en for API og kommandolinje for en liste over tilgjengelige metoder og funksjoner.
Mens konsollpanelet er relativt enkelt, er det noen få små tips for å forbedre arbeidsflyten din:
tastene (vindu) for å oppdage globale variabler på den nåværende siden.$ _ hjelper til å hente siste resultat av en tidligere kommando.Du kan finne konsollpanelet for å være en god kandidat for raskt å eksperimentere med JavaScript for å finne ut hva utdataene av visse uttrykk er. Men når du begynner å skrive mer komplisert JavaScript, kan du enkelt støte på begrensninger:
Konsollpanelet har ikke til hensikt å være en kode redaktør erstatning eller til og med alternativ. Her er en liste over noen tilfeller der konsollpanelet kan være nyttig:
anrop() og søke om() metoder ved å utføre dem inline og observere resultateneHovedruten i Kilden Panel inneholder en kodeditor med grunnleggende redigeringsfunksjoner.
Redaktøren selv er drevet av CodeMirror, en kraftig tekstredigerer implementert ved hjelp av JavaScript. DevTools importerer CodeMirror-editoren i sin egen kodebase og selektivt aktiverer ulike funksjoner som i sin tur blir gjort tilgjengelige for alle Chrome-brukere.
Når du redigerer JavaScript (blant annet støttede språk), inneholder Kilderpanel-editoren en rekke verktøy, for eksempel:
dokument er ikke foreslått etter at du har skrevet inn doku med mindre det allerede er minst en forekomst av ordet dokument i samme fil.Funksjonen, bedre kjent som Live Edit, gir deg muligheten til å redigere en JavaScript-kode for en side via DevTools, og har endringene som gjelder umiddelbart for siden uten sidens oppdatering. Det er ingen bestemt brukergrensesnitt å bruke dette; du skriver bare om en del av JavaScript-koden og trykker på Kommando-S å lagre det.
Slik fungerer dette bak kulissene, forklares nedenfor, men først vurder følgende forutsetninger (disse er uavhengige for Live Edit):
script.js laster inn i Chrome via en nettside.script.js Analyseres, evalueres og kompileres i maskinkode via V8 JavaScript Engine.Her er hva som skjer bak kulissene i Live Edit-funksjonen, med tanke på de tidligere punktene:
script.js i DevTools-kodeditoren. Anta at det er en knapp på gjeldende nettside. Ved å klikke på knappen, utfører en klikkhendelselytter en anonym funksjon.console.log setning og lagre filen.script.js injiseres tilbake til V8-motoren for behandling.script.js og den gamle. Slettinger, tillegg og modifikasjoner lagres.script.js med de kompilerte endringene.Live Edit fungerer best med mindre endringer i stedet for å skrive hele JavaScript-filer til appen din. Feilsøkingsscenarier fungerer godt med Live Edit.
Arbeidsområder er ikke en kritisk del av JavaScript-feilsøking via DevTools. Men, avhengig av dine krav, kan det påskynde debugging arbeidsflyten. Arbeidsområder er en funksjon av DevTools som gjør at du kan endre innholdet i en mappe på filsystemet ved å lage kodeendringer i DevTools.
Hvis du surfer på et prosjekt som serveres lokalt, selv om det er en webserver, for eksempel på http: // localhost: 3000 / og prosjektet finnes på filsystemet ditt på ~ / Utvikling / prosjekt, for eksempel kan du lære DevTools om kartlegging mellom de to og bruke Live Edit-funksjonene med lagre-til-disk-evner. Arbeidsområder gjør følgende arbeidsflyt:
I trinn 3 overskriver lagringen den opprinnelige kildefilen.
Kildekart løser et vanlig problem når det gjelder kildekoden som behandles eller kompileres til noe annet. Eksempler er:
Problemet er som følger: Når du feilsøker en behandlet versjon av koden, kan det være vanskelig å forstå hvordan den opprinnelige kildekoden kodes til det du ser under feilsøking. Hvis du får en feil i DevTools-konsollen for et produksjonsnettsted, vil du typisk ende opp med å feilsøke en minifisert og sammenkoblet versjon av JavaScript-koden, noe som ikke ligner kildefiler som du forfatter.
En kildekart er en generert fil som er produsert som en del av en kompileringsprosess som er tilgjengelig for brukssaker som er oppført tidligere. DevTools kan lese en kilde kartfil for å forstå hvordan en kompilert filkart til den opprinnelige filen.
De to kodestykker (Kildefil-app.js og Transpiled file-compiled.js) viser kildekorts debugger-vennlig kode.
Eksempel 1. Kildefil-app.js
for (var element av [1, 2, 3]) console.log (element);
Legg merke til at app.js kildefilen bruker en Ecmascript 6-kompatibel funksjon kjent som Array-iteratoren.
Eksempel 2. Transpiled File-compiled.js
"bruk strenge"; for (var $ __ 0 = [1, 2, 3] [Symbol.iterator] (), $ __ 1;! ($ __ 1 = $ __ 0.neste ()). gjort;) var element = $ __ 1.value; console.log (element); // # sourceMappingURL = app.js.map
Noter det compiled.js refereres av en skriptetikett på en HTML-side, sammen med Traceur-kjøretiden, og til slutt åpnes i en nettleser.
Selv den kompilerte JavaScript har console.log setning på linje 6. DevTools kan vise nøyaktig hvorconsole.log erklæringen finnes i den opprinnelige kildefilen (kildekortsfeilsøking), som er på linje 2. Brytpunkter fungerer som forventet. Bak kulissene blir det kompilerte JavaScript evaluert og utført, men DevTools presenterer en annen ressurs i stedet for den evaluerte versjonen av nettleseren.
Utklippsfunksjonen i DevTools gir en rask måte å skrive diverse JavaScript-kode på og utføre. Alle JavaScript som utføres via Snippets, kjøres i sammenheng med gjeldende side. Å utføre en DevTools-utdrag ligner på å kjøre en bokmerke på en side. Det kan hende du foretrekker å skrive visse JavaScript i Snippets, i motsetning til Console Panel, av grunner knyttet til et bedre kodedigeringsmiljø. Dine utdrag lagres i Lokal lagring av DevTools.
Slik bruker du utklipp:
console.log ( 'Hei'); i kodeditoren.Du kan finne en rekke allerede skrevet utklipp i dette DevTools Snippets-depotet.
Det er det for del 1 av en moderne debugging-opplevelse. I del 2 tar vi en titt på noen feilsøkingsfunksjoner og også noen utvidelser som kan hjelpe med dette.
