Share
În calitate de dezvoltator de JavaScript, sunt sigur că ați căzut deja în acest scenariu: ceva nu merge bine în versiunea de producție a codului dvs. și depanarea acestuia direct de pe serverul de producție este un coșmar pur și simplu pentru că a fost minificat sau a fost compilate dintr-o altă limbă, cum ar fi TypeScript sau CoffeeScript.
Veștile bune? Cele mai recente versiuni de browsere vă pot ajuta să rezolvați această problemă utilizând hărțile sursă. În acest tutorial, vă vom arăta cum să găsiți hărți sursă în toate browserele și să profitați la maximum de acele câteva minute pe care trebuie să le depanați.
În conformitate cu marea introducere la articolul sursă hărți JavaScript, o hartă sursă este "o modalitate de a mapa un fișier combinat / minificat înapoi într-o stare necupărită. Când creați pentru producție, împreună cu minificarea și combinarea fișierelor JavaScript, generați o hartă sursă care conține informații despre fișierele originale“.
Nu ezitați să citiți mai întâi articolul lui Ryan Seddon, deoarece acesta se referă la detalii despre modul în care funcționează o hartă sursă. Veți afla apoi că o hartă sursă utilizează un fișier intermediar care face potrivirea între versiunea de producție a codului dvs. și starea inițială de dezvoltare. Formatul acestui fișier este descris aici: Propunerea de revizuire a hărții sursă 3.
Acum, pentru a ilustra, voi împărtăși modul în care lucrăm în prezent în cursul dezvoltării cadrului open source al WebGLBabylon.js. Este scris în manuscris dactilografiat. Dar principiile vor rămâne aceleași dacă utilizați limbaj simplu comprimat / minificat JavaScript sau alte limbi, cum ar fi CoffeeScript.
Să jucăm acum cu magia hărții sursă direct în browsere.
Recent, am implementat suportul API-ului Gamepad în motorul nostru de jocuri. Să-i folosim codul pentru acest tutorial.
În acest articol, folosesc următoarele browsere:
Navigați la această adresă URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html și veți obține această pagină:
Conectați un controler Xbox 360 sau Xbox One la portul USB al aparatului. apasă pe A pentru a activa jocul și a te juca cu el:
Dar nu-ți face griji, nu veți avea nevoie de un controler de joc pentru a urma acest tutorial.
Notă: Compilatorul TypeScript generează automat harta sursă pentru dvs. Dacă doriți să generați o hartă sursă în timp ce generați versiunea minificată a codului dvs., aș recomanda utilizarea lui UglifyJS2.
Pentru acest articol, chiar am amestecat ambele. Am miniat JS generat de TypeScript și am păstrat intacte maparea sursei folosind această linie de comandă:
uglifyjs testgamepad.js -o testgamepad.min.js - sursa-harta testgamepad.min.js.map --in-sursa-harta testgamepad.js.map
După încărcarea paginii de test GamePad, apăsați F12 în IE11.
Veți vedea că sursa HTML se referă la două fișiere JavaScript: babylon.gamepads.js la începutul paginii și testgamepad.min.js la sfârșit. Primul fișier vine din cadrul nostru pe GitHub, iar al doilea este un eșantion simplu care arată cum să îl consumăm.
Apăsați pe debugger buton (sau Control-3), apoi apăsați pe pictograma dosarului.
Veți vedea că IE11 oferă două fișiere pentru depanare: babylon.gamepads.ts și testgamepad.min.js.
Să începem prin revizuirea babylon.gamepads.ts caz. De ce arată IE în loc de versiunea .js care este executată de browser?
Acest lucru se datorează mecanismului hărții sursă. La sfârșitul babylon.gamepads.js fișier, puteți găsi această linie specifică:
// # sourceMappingURL = babylon.gamepads.js.map
Deschis babylon.gamepads.js.map pentru a înțelege cum funcționează:
"versiune": 3, "fișier": "babylon.gamepads.js", "sourceRoot": "", "surse": ["babylon.gamepads.ts" BABYLON.Gamepads ", ...]
Prin citirea acestui fișier JSON, IE11 știe că ar trebui să "babylon.gamepads.ts" la "babylon.gamepads.js“. De aceea oferă direct pentru depanarea sursei TypeScript în locul versiunii JS compilate.
Deschis babylon.gamepad.ts în consola IE11 F12 și veți vedea ceva pe care nu ați mai văzut-o niciodată înainte, unele limbaj TypeScript:
Puteți să-l depanați deoarece sunteți obișnuit să depanați codul JS, chiar dacă este versiunea JavaScript compilată în prezent executată de browser.
Setați un punct de întrerupere pe linia 17 și apăsați F5 în fereastra browserului. Veți putea depana versiunea TypeScript a constructorului:
Treceți până la linia 20, deplasați mouse-ul peste acest și extindeți-l pentru a verifica acest lucru gamepadEventSupported este setat sa Adevărat:
Încărcați aceeași pagină: http://david.blob.core.windows.net/babylonjs/gamepad/index.html și apăsați F12 în Chrome sau Control-Shift-I în Opera.
Faceți clic pe pictograma de configurare și asigurați-vă că Activați hărțile sursă JavaScript opțiunea este activată. Ar trebui să fie setat implicit:
Chrome și Opera vă permit să examinați execuția babylon.gamepads.js cod, dar dacă încercați să setați un breakpoint în versiunea JavaScript, acesta nu va afișa. Acesta va seta în schimb codul sursă mapat la această versiune: babylon.gamepads.ts.
De exemplu, încercați să setați un punct de întrerupere pe linia 18 din babylon.gamepads.js Fișier JavaScript și veți vedea că acesta va fi setat pe linia 17 din babylon.gamepads.ts Fișierul TypeScript în loc de:
Desigur, puteți seta și punctele de întrerupere direct în sursa de tip TypeScript așa cum se vede cu IE11 chiar înainte.
presa F5 în fereastra de browser care găzduiește pagina demo și veți putea acum să debugg codul TypeScript. Pasul până la linia 20 și mouse-ul peste this.gamepadEventSupported variabil. Ar trebui să afișeze Adevărat:
Încărcați aceeași pagină: http://david.blob.core.windows.net/babylonjs/gamepad/index.html și apăsați Control-Shift-S pentru a deschide aplicația de depanare nativă (nu utilizați F12 / Firebug, deoarece nu suportă hărțile sursă).
Verificați dacă Afișați sursele originale opțiunea este verificată:
Setați un punct de întrerupere ca de obicei pe linia 17 și reîncărcați pagina pentru a intra în cod. Firefox nu acceptă plasarea mouse-ului pe sursa originală. Treceți până la linia 20 și extindeți-l acest obiect în loc de panoul din dreapta pentru a verifica acest lucru gamepadEventSupported este setat la adevărat, de asemenea.
Până în prezent, am depanat numai babylon.gamepads.js cod folosind babylon.gamepads.ts sursă. Dar ce zici de asta? testgamepad.min.js Fișier JavaScript?
Prima solutie este de a imbunatati codul. Funcționează cu IE11, Chrome, Opera și Firefox.
În IE11, apasă pe Destul de imprimat sau apăsați Control-Shift-P:
În Chrome / Operă, apasă pe buton:
În Firefox, apăsați și pe buton:
Acest lucru este mult mai bun, dar încă nu la fel de bun ca și cu setul de hărți sursă. Pentru a putea merge mai departe, am adăugat o nouă funcție în actualizarea IE11 din august 2014. Puteți încărca o hartă sursă chiar dacă ați eliminat-o din fișierul .js.
Imaginați-vă că doriți să împiedicați oricine să depaneze cu ușurință codul de producție al aplicației dvs. web folosind harta sursă, dar doriți totuși să puteți face acest lucru? Doar scoateți sourceMappingURL linie din fișierul .js.
Folosind Internet Explorer 11, puteți utiliza în continuare harta sursă prin încărcarea localului .Hartă și codul sursă asociat. Pentru aceasta, faceți clic dreapta pe testgamepad.min.js și apăsați Alege harta sursă:
Descărcați-le aici: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Dezarhivați-l în directorul preferat și navigați la el pentru a alege dreptul .Hartă fişier:
Și acum codul sursă original poate fi depanat din nou:
Observați că fila a fost redenumită testgamepad.ts și că primele variabile sunt acum tipărite pe măsură ce afișăm un tip de tipScript.
Răcoros, nu-i așa??
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
Aflați JavaScript: Ghidul complet
Am creat un ghid complet care vă ajută să învățați JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.
Accentsconagua