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

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

Dla każdego, kto tu przyszedł i szuka tych plików (jak ja), zwykle możesz je znaleźć, dodając .mapna końcu adresu URL:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

Pamiętaj o zastąpieniu wersji inną wersją Bootstrap, której używasz.

— Travis Heeter
ź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