Source Map: Skillnad mellan sidversioner

Nuvarande version från 29 december 2015 kl. 09.13

Ibland kan man vara tvungen att debugga kod som körs i produktion. Om du då har minifierat koden, kan det vara svårt att läsa och förstå koden. Det kan även vara väldigt svårt att veta vilka partier i den minifierade koden som motsvarar samma funktionalitet i utvecklingskoden. I värsta fall kan det vara som så att problemet enbart dyker upp i produktionskoden och det fungerar bra med din utvecklingskod (inte så vanligt iofs). För att underlätta i dylika situationer kan många verktyg skapa en så kallade Source Map. Dessa skapar en "karta" som beskriver hur den minifierad kod avbildas på utvecklingskod. Det gör att dina utvecklingsverktyg lätt kan koppla samman de sektioner i den minifierad kod med motsvarande sektioner i utvecklingskoden. Vilket gör att när du debuggar, så visas motsvarande utvecklingskod medan du tittar på den minifierade koden.

De flesta stora JavaScript-bibliotek tillhandahåller source maps för sin kod, t.ex. så finns det source maps för jQuery-biblioteket. Du kan då följa med funktionsanrop in i den bibliotekskod som du inte skrivit själv och se hur, den förhoppningsvis, lättlästa och lättförsteliga koden ser ut.

Du kan läsa mer som source maps här; Source Maps.

@@ Rad 1: / Rad 1: @@
-Ibland kan man vara tvungen att debugga kod som körs i produktion. Om du då har [[minifiera]]t koden, kan det vara svårt att läsa och förstå koden. Det kan även vara väldigt svårt att veta vilka partier i den [[minifiera]]de koden som motsvarar samma funktionalitet i utvecklingskoden. I värsta fall kan det vara som så att problemet enbart dyker upp i produktionskoden och det fungerar bra med din utvecklingskod (inte så vanligt iofs). För att underlätta i dylika situationer kan många verktyg skapa så kallade Source Maps eller Code Maps. Dessa mappar [[minifiera]]d kod till utvecklingskod. Det gör att dina utvecklingsverktyg lätt kan koppla samman de sektioner i den [[minifiera]]d kod med motsvarande sektioner i utvecklingskoden.
+Ibland kan man vara tvungen att debugga kod som körs i produktion. Om du då har [[minifiera]]t koden, kan det vara svårt att läsa och förstå koden. Det kan även vara väldigt svårt att veta vilka partier i den [[minifiera]]de koden som motsvarar samma funktionalitet i utvecklingskoden. I värsta fall kan det vara som så att problemet enbart dyker upp i produktionskoden och det fungerar bra med din utvecklingskod (inte så vanligt iofs). För att underlätta i dylika situationer kan många verktyg skapa en så kallade Source Map. Dessa skapar en "karta" som beskriver hur den [[minifiera]]d kod avbildas på utvecklingskod. Det gör att dina utvecklingsverktyg lätt kan koppla samman de sektioner i den [[minifiera]]d kod med motsvarande sektioner i utvecklingskoden. Vilket gör att när du debuggar, så visas motsvarande utvecklingskod medan du tittar på den [[minifiera]]de koden.
 De flesta stora JavaScript-bibliotek tillhandahåller source maps för sin kod, t.ex. så finns det source maps för [[jQuery]]-biblioteket. Du kan då följa med funktionsanrop in i den bibliotekskod som du inte skrivit själv och se hur, den förhoppningsvis, lättlästa och lättförsteliga koden ser ut.
 Du kan läsa mer som source maps här; [http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ Source Maps].