do czego służą pliki .map w Bootstrap 3.x?

443

W CSSfolderze znajdują się dwa pliki z rozszerzeniami plików .map. Oni są:

bootstrap-theme.css.map
bootstrap.css.map

Wyglądają na zminimalizowane pliki, ale nie wiem po co są.

twitter-bootstrap-3 source-maps wetjosh
źródło

Odpowiedzi:

448

Z pracy z preprocesorami CSS w Chrome DevTools :

Wielu programistów generuje arkusze stylów CSS przy użyciu preprocesora CSS, takiego jak Sass, Less lub Stylus. Ponieważ pliki CSS są generowane, bezpośrednia edycja plików CSS nie jest tak pomocna.

W przypadku preprocesorów, które obsługują mapy źródeł CSS, DevTools pozwala na edycję na żywo plików źródłowych preprocesora w panelu Źródła i przeglądanie wyników bez konieczności opuszczania DevTools lub odświeżania strony. Podczas sprawdzania elementu, którego style są dostarczane przez wygenerowany plik CSS, panel Elementy wyświetla łącze do oryginalnego pliku źródłowego, a nie wygenerowanego pliku .css.

Steve Jansen
źródło
11
Ta odpowiedź wyjaśnia, że ​​są one używane w połączeniu z preprocesorami CSS - czegoś, czego jeszcze nie zgłębiałem. Dzięki
wetjosh
21
Wygląda na to, że są one podobne do debugowania symboli w języku programowania, prawda?
Chris Simmons,
1
dostaję błąd js, więc zrobiłem fałszywy plik w tym katalogu, aby zatrzymać wyświetlanie błędu.
3
@ IssaFarax Możesz wyłączyć ładowanie map źródłowych za pomocą ustawień narzędzi ChromeDev. Otwórz DevTools> Kliknij koło zębate ustawień> Odznacz Włącz mapy źródłowe (JavaScript | CSS)
Giles Wells
możesz również sprawdzić: stackoverflow.com/questions/21766880/...
Vivek Panday
173

Jeśli chcesz pozbyć się błędu, możesz również usunąć ten wiersz w bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */
LeonardChallis
źródło
52
Lub po prostu skrót #, który zmieni się w prosty komentarz, na wypadek, gdybyś chciał go później.
givanse
1
Jeśli to usuniemy bootstrap.css, spowoduje to jakieś błędy lub coś w tym rodzaju?
Harry Suren,
4
Nie, nie ma. To po prostu utrudnia debugowanie.
Gfra54
1
Nie chcesz tego dla środowiska produkcyjnego, więc odpowiednio go skompiluj ( gulp --productionjeśli używasz gulp, nie będzie zawierał linii sourceMapping) i wyklucz pliki * .map ze swoich przesyłanych plików na serwer produkcyjny.
Curvian Vynes,
2
Jaki błąd? Pytanie nie wspomina o błędzie.
bluenote10
70

To są mapy źródłowe. Podaj je wraz ze skompresowanymi plikami źródłowymi; narzędzia dla programistów, takie jak Firefox i Chrome, wykorzystają je do umożliwienia debugowania, tak jakby kod nie był skompresowany.

dawidyzm
źródło
9

Bootstrap css może być generowany przez Less. Głównym celem pliku mapy jest połączenie kodu źródłowego css z mniejszym kodem źródłowym w narzędziu chrome dev. Tak jak kiedyś. Jeśli sprawdzimy element w narzędziu chrome dev. możesz zobaczyć kod źródłowy css. Ale jeśli umieścisz plik mapy na stronie z plikiem css bootstrap. widać mniej kodu, który dotyczy stylu elementu, który chcesz sprawdzić.

Joe.wang
źródło
8

Czy kiedykolwiek chciałeś, aby Twój kod po stronie klienta był czytelny i, co ważniejsze, można go debugować nawet po połączeniu go i zminimalizowaniu, bez wpływu na wydajność? Teraz możesz przejść przez magię map źródłowych.

W tym artykule wyjaśniono mapy źródłowe, stosując praktyczne podejście.

Marcio Mazzucato
źródło
5

Co to jest plik mapy CSS?

Jest to plik w formacie JSON, który łączy plik CSS z plikami źródłowymi, zwykle plikami zapisanymi w procesorach wstępnych (tj. Less, Sass, Stylus itp.). Ma to na celu przeprowadzenie debugowania na żywo z plikami źródłowymi z Internetu przeglądarka.

Co to jest preprocesor CSS? Przykłady: Sass, Less, Stylus

Jest to narzędzie do generowania CSS, które wykorzystuje moc programowania do szybkiego i niezawodnego generowania CSS.

Shadi Namrouti
źródło
1
Czy powinny być traktowane jako pliki tekstowe czy strumienie bajtów? Czy powinny się kończyć \n?
Aaron Franke
@AaronFranke Są to pliki tekstowe. Sugeruję, aby skopiować zawartość pliku .map i wkleić go na jsonblob.com, aby zobaczyć pary klucz / wartość JSON
Shadi Namrouti
-1

Jeśli zastanawiasz się, dlaczego brakuje plików map w Bootstrap 3.x; upewnij się, że masz zainstalowaną poprawną wersję. Musiałem załadować 3.3.7, aby uzyskać pożądany efekt, którego szukałem.

TheJoe
źródło