¿Para qué se usan los archivos .map en Bootstrap 3.x?

443

Hay dos archivos incluidos en la CSScarpeta con extensiones de archivo .map. Son:

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

Parecen archivos minificados, pero no sé para qué sirven.

twitter-bootstrap-3 source-maps wetjosh
fuente

Respuestas:

448

De Trabajar con preprocesadores CSS en Chrome DevTools :

Muchos desarrolladores generan hojas de estilo CSS utilizando un preprocesador CSS, como Sass, Less o Stylus. Debido a que los archivos CSS se generan, editar los archivos CSS directamente no es tan útil.

Para los preprocesadores que admiten mapas fuente CSS, DevTools le permite editar en vivo los archivos fuente del preprocesador en el panel Fuentes y ver los resultados sin tener que abandonar DevTools o actualizar la página. Cuando inspecciona un elemento cuyos estilos son proporcionados por un archivo CSS generado, el panel Elementos muestra un enlace al archivo fuente original, no al archivo .css generado.

Steve Jansen
fuente
11
Esta respuesta explica que se usan junto con preprocesadores CSS, algo que aún no he explorado mucho. Gracias
wetjosh
21
Parece que estos son estos símbolos análogos para depurar en un lenguaje de programación, ¿no?
Chris Simmons
1
estaba recibiendo un error js, así que hice un archivo falso en ese directorio, para evitar que se muestre el error.
3
@IssaFarax Puede deshabilitar la carga de mapas de origen a través de la configuración de herramientas de ChromeDev. Abra DevTools> Haga clic en el engranaje de configuración> Desmarque Habilitar mapas de origen (JavaScript | CSS)
Giles Wells
también puede consultar: stackoverflow.com/questions/21766880/…
Vivek Panday
173

Si solo quiere deshacerse del error, también puede eliminar esta línea en bootstrap.css:

/*# sourceMappingURL=bootstrap.css.map */
LeonardChallis
fuente
52
O simplemente el hash #y se convertirá en un simple comentario, en caso de que lo quieras recuperar más tarde.
givanse
1
Si eliminamos eso bootstrap.css, ¿causa algún error o algún tipo de cosas?
Harry Suren el
44
No lo hace Simplemente hace que sea más difícil de depurar.
Gfra54
1
No desea esto para el entorno de producción, así gulp --productionque compílelo en consecuencia ( si usa gulp, esto no incluirá esa línea de mapeo de origen) y excluya los archivos * .map de sus cargas al servidor de producción.
Curvian Vynes
2
Que error La pregunta no menciona un error.
bluenote10
70

Estos son mapas fuente. Proporcione estos junto con los archivos fuente comprimidos; las herramientas de desarrollador como las de Firefox y Chrome las usarán para permitir la depuración como si el código no estuviera comprimido.

davidismo
fuente
9

El css de arranque puede ser generado por Less. El propósito principal del archivo de mapa se utiliza para vincular el código fuente css con menos código fuente en la herramienta de desarrollo de Chrome. Como solíamos hacer. Si inspeccionamos el elemento en la herramienta de desarrollo de Chrome. puedes ver el código fuente de css. Pero si incluye el archivo de mapa en la página con el archivo css bootstrap. puede ver menos código que se aplica al estilo de elemento que desea inspeccionar.

Joe.wang
fuente
8

¿Alguna vez ha deseado poder mantener su código del lado del cliente legible y, lo que es más importante, depurarlo incluso después de haberlo combinado y minimizado, sin afectar el rendimiento? Bueno, ahora puedes atravesar la magia de los mapas fuente.

Este artículo explica los mapas de origen utilizando un enfoque práctico.

Marcio Mazzucato
fuente
5

¿Qué es un archivo de mapa CSS?

Es un archivo de formato JSON que vincula el archivo CSS a sus archivos fuente, normalmente, archivos escritos en preprocesadores (es decir, Less, Sass, Stylus, etc.), esto es para hacer una depuración en vivo de los archivos fuente desde la web navegador.

¿Qué es el preprocesador CSS? Ejemplos: Sass, Less, Stylus

Es una herramienta generadora de CSS que utiliza la potencia de programación para generar CSS de manera robusta y rápida.

Shadi Namrouti
fuente
1
¿Deben tratarse como archivos de texto o secuencias de bytes? ¿Deberían terminar adentro \n?
Aaron Franke
@AaronFranke Son archivos de texto. Le sugiero que copie el contenido de un archivo .map y lo pegue en jsonblob.com para ver los pares clave / valor JSON
Shadi Namrouti
-1

Si se pregunta por qué falta los archivos de mapa con Bootstrap 3.x; asegúrese de tener instalada la versión correcta. Tuve que cargar 3.3.7 para obtener el efecto deseado que estaba buscando.

TheJoe
fuente