Come utilizzare la mappa di origine per trovare l'errore di minimizzazione

Question

Lavoro con Angular e RequireJS. Ho provato a utilizzare l'ottimizzazione RequireJS e ora la mia applicazione non funziona. Sono sicuro che è dovuto alla minificazione.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=myapp&p1=Error%3…t%20(http%3A%2F%2Flocalhost%3A8080%2Fwebapp%2Fapp%2Fmain-built.js%3A4%3A10)

Il messaggio di errore non è molto utile per trovare il problema, quindi mi chiedevo come posso utilizzare la mappa fonte per individuare l'errore nel codice sorgente originale. Uso Chrome per eseguire il debug.

Edit: errore completa stacktrace

Failed to instantiate module myapp due to: 
Error: [$injector:unpr] http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=e 
    at Error (<anonymous>) 
    at http://localhost:8080/webapp/app/main-built.js:3:19581 
    at http://localhost:8080/webapp/app/main-built.js:3:31899 
    at n (http://localhost:8080/webapp/app/main-built.js:3:30540) 
    at Object.r [as invoke] (http://localhost:8080/webapp/app/main-built.js:3:30716) 
    at http://localhost:8080/webapp/app/main-built.js:3:30147 
    at Array.forEach (native) 
    at o (http://localhost:8080/webapp/app/main-built.js:3:19891) 
    at i (http://localhost:8080/webapp/app/main-built.js:3:29951) 
    at yt (http://localhost:8080/webapp/app/main-built.js:4:10 

Answer 1

Ecco i passi che dovrebbe rendere più lavoro per voi:

1. nei tool di sviluppo di Chrome Fare clic sull'icona Impostazioni (in basso a destra).
2. Nella finestra di dialogo delle impostazioni, selezionare "Abilita mappe sorgente".
3. Apre la pagina Web che si desidera eseguire il debug.
4. aprire gli strumenti per sviluppatori (in questa nuova scheda)
5. ricaricare la pagina
   • E 'importante, altrimenti Chrome non scaricare file di mappa.
6. Premete il link di errore che si desidera esaminare
   • E 'sulla destra del vostro errore, vale a dire main.js:12.
7. Questo è tutto. Ora dovresti essere reindirizzato alla versione leggibile e non minified del tuo script.

Se mappe source sono ancora non funziona:

1. Assicurarsi che il file JS minified contiene, in fondo, qualcosa di simile a:

   //# sourceMappingURL=main.js.map

2. Assicurarsi il file di mappatura è in fase di download. Dovrebbe essere elencato nella sezione "Rete" di Strumenti per sviluppatori come scaricato durante il caricamento della pagina. Esso dovrebbe essere simile a questo:

   

3. Forse strisce minimizzazione delle RequireJS la sourceMappingURL commento da l'output del file JS?

   Assicurati di utilizzare il metodo uglify2 e hai abilitato l'opzione generateSourceMaps.Qui è parte rilevante della mia requirejs bersaglio config da Grunt:

requirejs: { 
    compile: { 
    options: { 
     /* some other options here */ 
     optimize: 'uglify2', 
     logLevel: 0, 
     preserveLicenseComments: false, 
     generateSourceMaps: true 
    } 
    } 
}