Share
Som en JavaScript-utvikler er jeg sikker på at du allerede har fallet inn i dette scenariet: noe går galt med produksjonsversjonen av koden din, og feilsøking direkte fra produksjonsserveren er et mareritt, bare fordi det er blitt minifisert eller har vært kompilert fra et annet språk som TypeScript eller CoffeeScript.
De gode nyhetene? De nyeste versjonene av nettlesere kan hjelpe deg med å løse dette problemet ved hjelp av kildekart. I denne opplæringen viser jeg deg hvordan du finner kildekart i alle nettleserne og får mest mulig ut av de få minuttene du må feilsøke.
Ifølge den store introduksjonen til JavaScript Source Maps-artikkelen er et kildekart "en måte å kartlegge en kombinert / minifisert fil tilbake til i ubebygget tilstand. Når du bygger for produksjon, sammen med å minifisere og kombinere JavaScript-filene dine, genererer du et kildekart som inneholder informasjon om dine opprinnelige filer”.
Ikke nøl med å lese Ryan Seddons artikkel først, da det går i gode detaljer om hvordan et kildeskart fungerer. Deretter lærer du at et kildeskart bruker en mellomliggende fil som samsvarer mellom produksjonsversjonen av koden og den opprinnelige utviklingsstaten. Formatet til denne filen er beskrevet her: Kildekart Revisjon 3 Forslag.
Nå for å illustrere, skal jeg dele måten vi jobber for øyeblikket, mens vi utvikler vårt WebGLBabylon.js open source-rammeverk. Det er skrevet inn Loggfila. Men prinsippene vil forbli det samme hvis du bruker vanlig JavaScript komprimert / minifisert eller andre språk som CoffeeScript.
La oss nå spille med kildekartet magi direkte i nettleserne.
Nylig har jeg implementert støtten til Gamepad API i vår spillmotor. La oss bruke sin kode for denne opplæringen.
I denne artikkelen bruker jeg følgende nettlesere:
Naviger til denne nettadressen: http://david.blob.core.windows.net/babylonjs/gamepad/index.html og du får denne siden:
Plugg en Xbox 360 eller Xbox One-kontroller i USB-porten på maskinen din. trykk EN knappen for å aktivere gamepad og spille med den:
Men ikke bekymre deg, Du trenger ikke en gamepad-kontroller for å følge denne opplæringen.
Merk: TypScript-kompilatoren genererer automatisk kildekartet for deg. Hvis du ønsker å generere et kildeskart mens du genererer den minifiserte versjonen av koden, anbefaler jeg at du bruker UglifyJS2.
For denne artikkelen ble jeg selv blandet begge deler. Jeg har minifisert JS generert av TypeScript og holdt kildekartingen intakt ved hjelp av denne kommandolinjen:
uglifyjs testgamepad.js -o testgamepad.min.js - kilder-kart testgamepad.min.js.map - i kilde-kartet testgamepad.js.map
Når TestPads-siden er lastet, trykker du på F12 i IE11.
Du ser at HTML-kilden refererer til to JavaScript-filer: babylon.gamepads.js på begynnelsen av siden og testgamepad.min.js på slutten. Den første filen kommer fra våre rammer på GitHub, og den andre er en enkel prøve som viser hvordan du bruker den.
Trykk på debugger knapp (eller Kontroll-3), og trykk deretter på mappeikonet.
Du får se at IE11 tilbyr to filer å feilsøke: babylon.gamepads.ts og testgamepad.min.js.
La oss begynne med å se gjennom babylon.gamepads.ts sak. Hvorfor viser IE det i stedet for .js-versjonen som utføres av nettleseren?
Dette er takket være kildekartsmekanismen. På slutten av babylon.gamepads.js fil, kan du finne denne spesifikke linjen:
// # sourceMappingURL = babylon.gamepads.js.map
Åpen babylon.gamepads.js.map å forstå hvordan det fungerer:
"versjon": 3, "fil": "babylon.gamepads.js", "sourceRoot": "", "kilder": ["babylon.gamepads.ts"], "navn": ["BABYLON" BABYLON.Gamepads ", ...]
Ved å lese denne JSON-filen, vet IE11 at den skal kartlegge "babylon.gamepads.ts" til "babylon.gamepads.js”. Derfor tilbyr det direkte å feilsøke TypeScript-kilden i stedet for den kompilerte JS-versjonen.
Åpen babylon.gamepad.ts i IE11 F12-konsollen, og du får se noe du aldri har sett før, noen TypeScript-språk:
Du kan feilsøke det som du pleier å feilsøke JS-koden din, selv om det er den kompilerte JavaScript-versjonen som for øyeblikket blir utført av nettleseren.
Still et brytepunkt på linje 17 og trykk F5 i nettleservinduet. Du vil kunne feilsøke TypeScript-versjonen av konstruktøren:
Gå opp til linje 20, musen over dette og utvide den for å sjekke det gamepadEventSupported er satt til ekte:
Legg inn samme side: http://david.blob.core.windows.net/babylonjs/gamepad/index.html og trykk på F12 i Chrome eller Kontroll-Skift-I i Opera.
Klikk på konfigurasjonsikonet og kontroller at Aktiver JavaScript kildekart alternativet er aktivert. Det bør settes som standard:
Chrome og Opera lar deg se gjennom den utførte babylon.gamepads.js kode, men hvis du prøver å angi et brytepunkt i JavaScript-versjonen, vil det ikke vise det. Den vil sette den i stedet i kildekoden som er kartlagt til denne versjonen: babylon.gamepads.ts.
For eksempel, prøv å sette et bruddpunkt på linje 18 i babylon.gamepads.js JavaScript-filen, og du vil se at den vil bli satt på linje 17 av babylon.gamepads.ts TypeScript-fil i stedet:
Selvfølgelig kan du også angi passende brytpunkter direkte i TypeScript-kilden som sett med IE11 like før.
trykk F5 i nettleservinduet som er vert for vår demoside, og du vil nå kunne feilsøke min TypeScript-kode. Gå opp til linje 20 og mus over this.gamepadEventSupported variabel. Det skal vise ekte:
Legg inn samme side: http://david.blob.core.windows.net/babylonjs/gamepad/index.html og trykk på Kontroll-Shift-S å åpne den opprinnelige debuggeren (ikke bruk F12 / Firebug, fordi den ikke støtter kildekart).
Sjekk at Vis originale kilder alternativet er merket:
Angi et brytepunkt som vanlig på linje 17, og last siden om å bryte inn i koden. Firefox støtter ikke musens hovering på den opprinnelige kilden. Gå opp til linje 20 og utvide dette objekt isteden i det høyre panelet for å sjekke det gamepadEventSupported er satt til sant også.
Hittil har vi bare feilsøking babylon.gamepads.js kode ved hjelp av babylon.gamepads.ts kilde. Men hva med dette minifisert testgamepad.min.js JavaScript-fil?
Den første løsningen er å prettify koden. Den fungerer med IE11, Chrome, Opera og Firefox.
I IE11, trykk Pretty print knappen eller trykk Kontroll-Shift-P:
I Chrome / Opera, trykk knapp:
I Firefox, trykk også på knapp:
Dette er mye bedre, men likevel ikke så bra som det var med kildekartsettet. For å kunne gå et skritt videre, la vi til en ny funksjon i august 2014-oppdateringen av IE11. Du kan laste inn et kildekart, selv om du har fjernet det fra .js-filen.
Tenk deg at du vil forhindre at noen enkelt feilsøker produksjonskoden til din webapp ved hjelp av kildekart, men du vil fortsatt kunne gjøre det? Bare fjern sourceMappingURL linje fra .js-filen din.
Ved hjelp av Internet Explorer 11 kan du fremdeles bruke kildekartet ved å laste inn det lokale .kart og tilhørende kildekode. For det, høyreklikk på testgamepad.min.js og trykk på Velg kildekart:
Last ned dem her: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Unzip det i din foretrukne katalog og naviger til den for å velge riktig .kart fil:
Og nå kan den opprinnelige kildekoden bli feilsøkt igjen:
Legg merke til at kategorien har blitt omdøpt til testgamepad.ts og at de første variablene nå er skrevet som vi viser noen TypeScript.
Kult, er det ikke?
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
Lær JavaScript: Den komplette veiledningen
Vi har bygget en komplett guide for å hjelpe deg med å lære JavaScript, enten du er bare i gang som webutvikler eller du vil utforske mer avanserte emner.
Accentsconagua