Share
Come sviluppatore JavaScript, sono sicuro che ti sei già imbattuto in questo scenario: qualcosa va storto con la versione di produzione del tuo codice, e il debugging direttamente dal server di produzione è un incubo semplicemente perché è stato minimizzato o è stato compilato da un altro linguaggio come TypeScript o CoffeeScript.
Le buone notizie? Le ultime versioni dei browser possono aiutarti a risolvere questo problema utilizzando le mappe di origine. In questo tutorial, ti mostrerò come trovare le mappe di origine in tutti i browser e ottenere il massimo da quei pochi minuti che devi eseguire il debug.
Secondo il grande articolo Introduzione alle mappe di sorgenti JavaScript, una mappa sorgente è "un modo per mappare un file combinato / minificato fino a uno stato non integrato. Quando costruisci per la produzione, insieme alla minimizzazione e alla combinazione dei tuoi file JavaScript, generi una mappa sorgente che contiene informazioni sui tuoi file originali”.
Per favore, non esitare a leggere prima l'articolo di Ryan Seddon, dato che descrive i dettagli di come funziona una mappa sorgente. Scoprirai quindi che una mappa sorgente utilizza un file intermedio che esegue l'abbinamento tra la versione di produzione del tuo codice e il suo stato di sviluppo originale. Il formato di questo file è descritto qui: Proposta di revisione della mappa di origine 3.
Ora, per illustrare, condividerò il modo in cui stiamo attualmente lavorando mentre sviluppiamo il nostro framework open-source WebGLBabylon.js. È scritto in Dattiloscritto. Ma i principi rimarranno gli stessi se utilizzi un semplice JavaScript compresso / minificato o altri linguaggi come CoffeeScript.
Giochiamo ora con la magia della mappa sorgente direttamente nei browser.
Recentemente, ho implementato il supporto dell'API Gamepad nel nostro motore di gioco. Usiamo il suo codice per questo tutorial.
In questo articolo, sto usando i seguenti browser:
Vai a questo URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html e otterrai questa pagina:
Collegare un controller Xbox 360 o Xbox One nella porta USB del dispositivo. premi il UN pulsante per attivare il gamepad e giocare con esso:
Ma non preoccuparti, non avrai bisogno di un controller gamepad per seguire questo tutorial.
Nota: Il compilatore TypeScript genera automaticamente la mappa sorgente per te. Se desideri generare una mappa sorgente durante la generazione della versione minificata del tuo codice, ti consiglio di utilizzare UglifyJS2.
Per questo articolo, ho persino mixato entrambi. Ho minimizzato il JS generato da TypeScript e mantenuto intatto il mapping sorgente usando questa riga di comando:
uglifyjs testgamepad.js -o testgamepad.min.js --source-map testgamepad.min.js.map --in-source-map testgamepad.js.map
Una volta caricata la pagina di prova di GamePad, premere F12 in IE11.
Vedrai che la sorgente HTML fa riferimento a due file JavaScript: babylon.gamepads.js all'inizio della pagina e testgamepad.min.js alla fine. Il primo file proviene dal nostro framework su GitHub e il secondo è un semplice esempio che mostra come consumarlo.
Premere sul Debugger pulsante (o Control-3), quindi premere sull'icona della cartella.
Vedrai che IE11 offre due file per il debug: babylon.gamepads.ts e testgamepad.min.js.
Iniziamo esaminando il babylon.gamepads.ts Astuccio. Perché IE lo mostra invece della versione .js eseguita dal browser?
Questo grazie al meccanismo della mappa di origine. Alla fine di babylon.gamepads.js file, puoi trovare questa linea specifica:
// # sourceMappingURL = babylon.gamepads.js.map
Aperto babylon.gamepads.js.map per capire come funziona:
"versione": 3, "file": "babylon.gamepads.js", "sourceRoot": "", "fonti": ["babylon.gamepads.ts"], "nomi": ["BABYLON", " BABYLON.Gamepads ", ...]
Leggendo questo file JSON, IE11 sa che dovrebbe mappare "babylon.gamepads.ts" a "babylon.gamepads.js”. Ecco perché offre direttamente il debug del sorgente TypeScript invece della versione JS compilata.
Aperto babylon.gamepad.ts nella console IE11 F12 e vedrai qualcosa che forse non hai mai visto prima, un po 'di linguaggio TypeScript:
Puoi eseguire il debug come sei abituato a eseguire il debug del tuo codice JS, anche se è la versione JavaScript compilata attualmente eseguita dal browser.
Impostare un punto di interruzione sulla linea 17 e premere F5 nella finestra del browser. Sarai in grado di eseguire il debug della versione di TypeScript del costruttore:
Passare alla riga 20, passaggio del mouse Questo ed espanderlo per verificarlo gamepadEventSupported è impostato per vero:
Carica la stessa pagina: http://david.blob.core.windows.net/babylonjs/gamepad/index.html e premi F12 in Chrome o Control-Shift-I in Opera.
Fare clic sull'icona di configurazione e assicurarsi che il Abilita le mappe di origine JavaScript l'opzione è abilitata. Dovrebbe essere impostato di default:
Chrome e Opera ti consentono di esaminare l'esecuzione babylon.gamepads.js codice, ma se si tenta di impostare un punto di interruzione nella versione JavaScript, non verrà visualizzato. Lo imposterà invece nel codice sorgente mappato a questa versione: babylon.gamepads.ts.
Ad esempio, prova ad impostare un punto di interruzione sulla linea 18 del babylon.gamepads.js File JavaScript e vedrai che sarà impostato sulla riga 17 del babylon.gamepads.ts File TypeScript invece:
Naturalmente, puoi anche impostare i punti di interruzione appropriati direttamente nel sorgente TypeScript come si è visto con IE11 poco prima.
stampa F5 nella finestra del browser che ospita la nostra pagina demo e ora potrai eseguire il debug del mio codice TypeScript. Passa alla riga 20 e passa il mouse sopra this.gamepadEventSupported variabile. Dovrebbe essere visualizzato vero:
Carica la stessa pagina: http://david.blob.core.windows.net/babylonjs/gamepad/index.html e premi Control-Shift-S per aprire il debugger nativo (non utilizzare F12 / Firebug, perché non supporta le mappe di origine).
Controlla che il Mostra origini originali l'opzione è selezionata:
Impostare un punto di interruzione come al solito sulla riga 17 e ricaricare la pagina per entrare nel codice. Firefox non supporta il passaggio del mouse sulla fonte originale. Passare alla riga 20 ed espandere il Questo oggetto invece nel pannello di destra per verificarlo gamepadEventSupported è impostato su true anche.
Fino ad ora, abbiamo eseguito il debug solo del babylon.gamepads.js codice usando il babylon.gamepads.ts fonte. Ma per quanto riguarda questo minisito testgamepad.min.js File JavaScript?
La prima soluzione è quella di pretrattare il codice. Funziona con IE11, Chrome, Opera e Firefox.
Nel IE11, premi il Bella stampa pulsante o premere Control-Shift-P:
Nel Chrome / Opera, premi il pulsante:
Nel Firefox, premere anche il pulsante:
Questo è molto meglio, ma non è ancora buono come con il set di mappe sorgente. Per poter fare un ulteriore passo avanti, abbiamo aggiunto una nuova funzionalità nell'aggiornamento di IE11 di agosto 2014. Puoi caricare una mappa di origine anche se l'hai rimossa dal file .js.
Immagina di voler impedire a chiunque di eseguire facilmente il debugging del codice di produzione della tua app Web utilizzando la mappa sorgente, ma vuoi comunque essere in grado di farlo? Basta rimuovere il sourceMappingURL linea dal tuo file .js.
Utilizzando Internet Explorer 11, puoi ancora utilizzare la mappa sorgente caricando il tuo locale .carta geografica e codice sorgente associato. Per questo, fai clic con il tasto destro del mouse su testgamepad.min.js scheda e premere Scegli la mappa di origine:
Scaricalo qui: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Scollegalo nella tua cartella preferita e naviga verso di esso per scegliere il giusto .carta geografica file:
E ora il codice sorgente originale può essere nuovamente eseguito il debug:
Si noti che la scheda è stata rinominata testgamepad.ts e che le prime variabili sono state digitate mentre stiamo visualizzando alcuni TypeScript.
Cool, non è vero??
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
Scopri JavaScript: la guida completa
Abbiamo creato una guida completa per aiutarti a imparare JavaScript, sia che tu stia appena iniziando come sviluppatore web o che desideri esplorare argomenti più avanzati.
Accentsconagua