Jak korzystać z mapy źródłowej, aby znaleźć błąd zminimalizowania

Question

Pracuję z Angular i RequireJS. Próbowałem użyć optymalizacji RequireJS, a teraz moja aplikacja nie działa. Jestem pewien, że jest to spowodowane zminimalizowaniem.

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)

Komunikat o błędzie nie jest bardzo pomocne, aby znaleźć problem, więc zastanawiałem się, w jaki sposób mogę korzystać z mapy źródłowej aby zlokalizować błąd w oryginalnym kodzie źródłowym. Używam Chrome do debugowania.

Edit: Pełne błąd 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

Oto kroki, które powinny sprawiają, że pracuje dla Ciebie:

1. W Chrome Developer Tools kliknij ikonę ustawień (prawy dolny róg).
2. W oknie dialogowym ustawień zaznacz "Włącz mapy źródłowe".
3. Otwórz stronę internetową, którą chcesz debugować.
4. Otwórz Narzędzia dla deweloperów (w tym nowej karcie)
5. odświeżyć stronę
   • To ważne, inaczej Chrome nie będzie pobrać plik mapy.
6. Naciśnij link błędu chcesz sprawdzić
   • to jest na prawo od błędu, to znaczy main.js:12.
7. To wszystko. Powinieneś teraz zostać przekierowany do czytelnej, nieminurowanej wersji twojego skryptu.

Jeśli mapy źródłowe są nadal nie działa:

1. Upewnij minified plik JS zawiera, na samym dole, coś jak:

   //# sourceMappingURL=main.js.map

2. Upewnij plik mapowania jest pobierany. Powinien być wymieniony w sekcji "Sieć" Narzędzi dla programistów jako pobrany podczas przeładowania strony. Powinno to wyglądać tak:

   

3. Może minifikacji paski RequireJS OUT w sourceMappingURL komentarz z wyjściowego pliku JS?

   Upewnij się, że używasz metody uglify2 i włączyłeś opcję generateSourceMaps.Tutaj jest odpowiednia część mojego requirejs docelowej config od Grunt:

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