Wofür werden die .map-Dateien in Bootstrap 3.x verwendet?

443

Der CSSOrdner enthält zwei Dateien mit den Dateierweiterungen .map. Sie sind:

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

Es scheinen minimierte Dateien zu sein, aber ich weiß nicht, wofür sie sind.

twitter-bootstrap-3 source-maps Wetjosh
quelle

Antworten:

448

Aus der Arbeit mit CSS-Präprozessoren in Chrome DevTools :

Viele Entwickler generieren CSS-Stylesheets mit einem CSS-Präprozessor wie Sass, Less oder Stylus. Da die CSS-Dateien generiert werden, ist das direkte Bearbeiten der CSS-Dateien nicht so hilfreich.

Bei Präprozessoren, die CSS-Quellzuordnungen unterstützen, können Sie mit DevTools Ihre Präprozessor-Quelldateien im Bedienfeld Quellen live bearbeiten und die Ergebnisse anzeigen, ohne DevTools verlassen oder die Seite aktualisieren zu müssen. Wenn Sie ein Element untersuchen, dessen Stile von einer generierten CSS-Datei bereitgestellt werden, zeigt das Elementbedienfeld einen Link zur ursprünglichen Quelldatei an, nicht zur generierten CSS-Datei.

Steve Jansen
quelle
11
Diese Antwort erklärt, dass sie in Verbindung mit CSS-Präprozessoren verwendet werden - etwas, das ich noch nicht viel erforscht habe. Danke
Wetjosh
21
Es hört sich so an, als wären diese analogen Symbole zum Debuggen in einer Programmiersprache, oder?
Chris Simmons
1
Ich habe js Fehler bekommen, also habe ich eine gefälschte Datei in diesem Verzeichnis erstellt, um zu verhindern, dass der Fehler angezeigt wird.
3
@IssaFarax Sie können das Laden von Quellkarten über die Einstellungen der ChromeDev-Tools deaktivieren. Öffnen Sie DevTools> Klicken Sie auf das Einstellungszahnrad> Deaktivieren Sie Aktivieren (JavaScript | CSS) Quellkarten
Giles Wells
Sie können auch ref: stackoverflow.com/questions/21766880/…
Vivek Panday
173

Wenn Sie den Fehler nur beseitigen möchten, können Sie diese Zeile auch löschen in bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */
LeonardChallis
quelle
52
Oder nur der Hash #und es wird ein einfacher Kommentar, falls Sie ihn später wieder haben möchten.
Givanse
1
Wenn wir das entfernen, bootstrap.cssverursacht es irgendwelche Fehler oder Dinge?
Harry Suren
4
Nein, das tut es nicht. Das Debuggen wird dadurch nur schwieriger.
Gfra54
1
Sie möchten dies nicht für die Produktionsumgebung. Kompilieren Sie es daher entsprechend ( gulp --productionwenn Sie gulp verwenden, wird diese sourceMapping-Zeile nicht berücksichtigt) und schließen Sie * .map-Dateien von Ihren Uploads auf den Produktionsserver aus.
Curvian Vynes
2
Welcher Fehler? Die Frage erwähnt keinen Fehler.
bluenote10
70

Dies sind Quellkarten. Stellen Sie diese zusammen mit komprimierten Quelldateien bereit. Entwicklertools wie die in Firefox und Chrome verwenden sie, um das Debuggen zu ermöglichen, als ob der Code nicht komprimiert wäre.

Davidismus
quelle
9

Das Bootstrap-CSS kann von Less generiert werden. Der Hauptzweck der Map-Datei wird verwendet, um den CSS-Quellcode mit weniger Quellcode im Chrome Dev Tool zu verknüpfen. Wie früher. Wenn wir das Element im Chrome Dev Tool untersuchen. Sie können den Quellcode von CSS sehen. Wenn Sie jedoch die Map-Datei in die Seite mit der Bootstrap-CSS-Datei aufnehmen. Sie können weniger Code sehen, der für den Elementstil gilt, den Sie untersuchen möchten.

Joe.wang
quelle
8

Haben Sie sich jemals gewünscht, Sie könnten Ihren clientseitigen Code auch nach dem Kombinieren und Minimieren lesbar und vor allem debuggbar halten, ohne die Leistung zu beeinträchtigen? Nun können Sie durch die Magie der Quellkarten.

In diesem Artikel werden Quellkarten anhand eines praktischen Ansatzes erläutert.

Marcio Mazzucato
quelle
5

Für alle, die hierher gekommen sind, um nach diesen Dateien zu suchen (wie ich), können Sie sie normalerweise finden, indem Sie .mapam Ende der URL Folgendes hinzufügen :

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

Stellen Sie sicher, dass Sie die Version durch die von Ihnen verwendete Bootstrap-Version ersetzen.

Travis Heeter
quelle
5

Was ist eine CSS-Kartendatei?

Es handelt sich um eine Datei im JSON-Format, die die CSS-Datei mit ihren Quelldateien verknüpft, normalerweise Dateien, die in Präprozessoren (z. B. Less, Sass, Stylus usw.) geschrieben wurden. Dies dient dazu, ein Live-Debugging mit den Quelldateien aus dem Web durchzuführen Browser.

Was ist ein CSS-Präprozessor? Beispiele: Sass, Less, Stylus

Es ist ein CSS-Generator-Tool, das Programmierleistung verwendet, um CSS robust und schnell zu generieren.

Shadi Namrouti
quelle
1
Sollten sie als Textdateien oder Bytestreams behandelt werden? Sollten sie enden \n?
Aaron Franke
@ AaronFranke Sie sind Textdateien. Ich schlage vor, Sie kopieren den Inhalt einer .map-Datei und fügen ihn auf jsonblob.com ein , um die JSON-Schlüssel / Wert-Paare zu sehen
Shadi Namrouti
-1

Wenn Sie sich fragen, warum Ihnen die Kartendateien mit Bootstrap 3.x fehlen; Stellen Sie sicher, dass Sie die richtige Version installiert haben. Ich musste 3.3.7 laden, um den gewünschten Effekt zu erzielen.

TheJoe
quelle