à quoi servent les fichiers .map dans Bootstrap 3.x?

443

Le CSSdossier contient deux extensions de fichier .map. Elles sont:

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

Ils semblent être des fichiers minifiés mais je ne sais pas à quoi ils servent.

twitter-bootstrap-3 source-maps

— wetjosh
source

448

À partir de l'utilisation des préprocesseurs CSS dans Chrome DevTools :

De nombreux développeurs génèrent des feuilles de style CSS à l'aide d'un préprocesseur CSS, tel que Sass, Less ou Stylus. Étant donné que les fichiers CSS sont générés, la modification directe des fichiers CSS n'est pas aussi utile.

Pour les préprocesseurs qui prennent en charge les mappages source CSS, DevTools vous permet de modifier en direct vos fichiers source de préprocesseur dans le panneau Sources et d'afficher les résultats sans avoir à quitter DevTools ni à actualiser la page. Lorsque vous inspectez un élément dont les styles sont fournis par un fichier CSS généré, le panneau Éléments affiche un lien vers le fichier source d'origine, pas le fichier .css généré.

— Steve Jansen
source

11

Cette réponse explique qu'ils sont utilisés en conjonction avec des préprocesseurs CSS - quelque chose que je n'ai pas encore beaucoup exploré. Merci

— wetjosh

21

On dirait que ce sont ces analogiques pour déboguer des symboles dans un langage de programmation, non?

— Chris Simmons

1

J'obtenais une erreur js, j'ai donc créé un faux fichier dans ce répertoire, pour empêcher l'erreur de s'afficher.

3

@IssaFarax Vous pouvez désactiver le chargement des cartes sources via les paramètres des outils ChromeDev. Ouvrez DevTools> Cliquez sur l'engrenage des paramètres> Décochez Activer les cartes source (JavaScript | CSS)

— Giles Wells

vous pouvez également ref: stackoverflow.com/questions/21766880/…

— Vivek Panday

173

Si vous souhaitez simplement vous débarrasser de l'erreur, vous pouvez également supprimer cette ligne dans bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */

— LeonardChallis
source

52

Ou tout simplement le hachage #et il se transformera en un simple commentaire, au cas où vous voudriez le récupérer plus tard.

— givanse

1

Si nous supprimons cela de bootstrap.css, cela provoque-t-il des erreurs ou des types de choses?

— Harry Suren

4

Non, non. Cela rend juste plus difficile le débogage.

— Gfra54

1

Vous ne voulez pas cela pour l'environnement de production, alors compilez-le en conséquence ( gulp --productionsi vous utilisez gulp, cela n'inclura pas cette ligne sourceMapping) et excluez les fichiers * .map de vos téléchargements sur le serveur de production.

— Curvian Vynes

2

Quelle erreur? La question ne mentionne pas d'erreur.

— bluenote10

70

Ce sont des cartes sources. Fournissez-les avec les fichiers source compressés; des outils de développement tels que ceux de Firefox et Chrome les utiliseront pour permettre le débogage comme si le code n'était pas compressé.

— davidisme
source

9

Le CSS bootstrap peut être généré par Less. Le but principal du fichier de mappage est utilisé pour lier le code source CSS à moins de code source dans l'outil de développement Chrome. Comme nous le faisions auparavant. Si nous inspectons l'élément dans l'outil de développement Chrome. vous pouvez voir le code source de css. Mais si incluez le fichier map dans la page avec le fichier css bootstrap. vous pouvez voir le moins de code qui s'applique au style d'élément que vous souhaitez inspecter.

— Joe.wang
source

8

Vous êtes-vous déjà retrouvé à souhaiter pouvoir garder votre code côté client lisible et, plus important encore, déboguer même après l'avoir combiné et minimisé, sans impact sur les performances? Eh bien maintenant, vous pouvez à travers la magie des cartes sources.

Cet article explique les cartes source à l'aide d'une approche pratique.

— Marcio Mazzucato
source

5

Pour ceux qui sont venus ici à la recherche de ces fichiers (comme moi), vous pouvez généralement les trouver en ajoutant .mapà la fin de l'URL:

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

Assurez-vous de remplacer la version par la version de Bootstrap que vous utilisez.

— Travis Heeter
source

5

Qu'est-ce qu'un fichier de carte CSS?

Il s'agit d'un fichier au format JSON qui relie le fichier CSS à ses fichiers source, normalement, des fichiers écrits dans des préprocesseurs (c'est-à-dire Less, Sass, Stylus, etc.), afin de faire un débogage en direct des fichiers source à partir du Web. navigateur.

Qu'est-ce que le préprocesseur CSS? Exemples: Sass, Less, Stylus

Il s'agit d'un outil générateur de CSS qui utilise la puissance de programmation pour générer des CSS de manière robuste et rapide.

— Shadi Namrouti
source

1

Doivent-ils être traités comme des fichiers texte ou des flux d'octets? Devraient-ils finir \n?

— Aaron Franke

@AaronFranke Ce sont des fichiers texte. Je vous suggère de copier le contenu d'un fichier .map et de le coller sur jsonblob.com pour voir les paires clé / valeur JSON

— Shadi Namrouti

-1

Si vous vous demandez pourquoi vous manquez les fichiers de carte avec Bootstrap 3.x; assurez-vous que la bonne version est installée. J'ai dû charger 3.3.7 pour obtenir l'effet souhaité que je cherchais.

— TheJoe
source