twitter-bootstrap-3 - what are source maps




Quais são os arquivos.map usados no Bootstrap 3.x? (6)

Existem dois arquivos incluídos na pasta CSS com extensões de arquivo .map. Eles são:

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

Eles parecem ser arquivos minificados, mas eu não sei para que servem.


Você já se viu desejando poder manter seu código do lado do cliente legível e, mais importante, depurável mesmo depois de combinado e minimizado, sem afetar o desempenho? Bem, agora você pode através da magia dos mapas de origem.

Este artigo explica os mapas de origem usando uma abordagem prática.


De Trabalhando com pré-processadores CSS no Chrome DevTools :

Muitos desenvolvedores geram folhas de estilo CSS usando um pré-processador CSS, como Sass, Less ou Stylus. Como os arquivos CSS são gerados, editar os arquivos CSS diretamente não é tão útil.

Para os pré-processadores que suportam mapas de origem CSS, o DevTools permite editar ao vivo os arquivos de origem do pré-processador no painel Origens e exibir os resultados sem precisar sair do DevTools ou atualizar a página. Quando você inspeciona um elemento cujos estilos são fornecidos por um arquivo CSS gerado, o painel Elementos exibe um link para o arquivo de origem original, não o arquivo .css gerado.


O bootstrap css pode ser gerado por menos. O principal objetivo do arquivo de mapeamento é usado para vincular o código-fonte do css a menos código-fonte na ferramenta de desenvolvimento do chrome. Como costumávamos fazer. Se inspecionarmos o elemento na ferramenta de desenvolvimento do chrome. você pode ver o código-fonte do css. Mas se incluir o arquivo de mapa na página com o arquivo css bootstrap. você pode ver menos códigos que se aplicam ao estilo de elemento que você deseja inspecionar.



Se você quer apenas se livrar do erro, você também pode deletar esta linha em bootstrap.css :

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

O que é um arquivo de mapa CSS?

É um arquivo de formato JSON que vincula o arquivo CSS a seus arquivos de origem, normalmente, arquivos escritos em Preprosessors Less, Saas, Sylus… etc, isso é para fazer uma depuração ao vivo para os arquivos de origem do navegador da web.

O que é o pré-processador CSS? Exemplos: Saas, Less, Stylus

É uma ferramenta geradora de CSS que usa o poder de programação para gerar CSS de maneira robusta e rápida.







source-maps