a cosa servono i file .map utilizzati in Bootstrap 3.x?

443

Ci sono due file inclusi nella CSScartella con estensioni di file .map. Loro sono:

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

Sembrano file minimizzati ma non so a cosa servano.

twitter-bootstrap-3 source-maps

— wetjosh
fonte

448

Da Lavorare con i preprocessori CSS in Chrome DevTools :

Molti sviluppatori generano fogli di stile CSS utilizzando un preprocessore CSS, come Sass, Less o Stylus. Poiché i file CSS vengono generati, la modifica diretta dei file CSS non è altrettanto utile.

Per i preprocessori che supportano le mappe sorgente CSS, DevTools consente di modificare dal vivo i file sorgente del preprocessore nel pannello Sorgenti e visualizzare i risultati senza dover lasciare DevTools o aggiornare la pagina. Quando ispezionate un elemento i cui stili sono forniti da un file CSS generato, il pannello Elementi visualizza un collegamento al file sorgente originale, non al file .css generato.

— Steve Jansen
fonte

11

Questa risposta spiega che sono usati insieme ai preprocessori CSS - qualcosa che non ho ancora esplorato molto. Grazie

— wetjosh,

21

Sembra che questi siano analoghi per eseguire il debug dei simboli in un linguaggio di programmazione, no?

— Chris Simmons,

1

stavo ricevendo l'errore js, quindi ho creato un file falso in quella directory, per interrompere la visualizzazione dell'errore.

3

@IssaFarax Puoi disabilitare il caricamento delle mappe di origine tramite le impostazioni degli strumenti di ChromeDev. Apri DevTools> Fai clic sull'ingranaggio delle impostazioni> Deseleziona Abilita (JavaScript | CSS) mappe sorgente

— Giles Wells

puoi anche fare riferimento a: stackoverflow.com/questions/21766880/…

— Vivek Panday

173

Se vuoi semplicemente eliminare l'errore, puoi anche eliminare questa riga in bootstrap.css:

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

— LeonardChallis
fonte

52

O solo l'hash #e si trasformerà in un semplice commento, nel caso in cui lo desideri più tardi.

— givanse

1

Se lo rimuoviamo da bootstrap.css, causa errori o tipi di cose?

— Harry Suren,

4

No, non lo fa. Rende solo più difficile il debug.

— Gfra54,

1

Non lo vuoi per l'ambiente di produzione, quindi compilarlo di conseguenza ( gulp --productionse usi gulp, questo non includerà quella linea sourceMapping) ed escludi i file * .map dai tuoi caricamenti sul server di produzione.

— Curvian Vynes,

2

Quale errore? La domanda non menziona un errore.

— bluenote10

70

Queste sono mappe sorgente. Fornire questi insieme ai file di origine compressi; strumenti di sviluppo come quelli di Firefox e Chrome li useranno per consentire il debug come se il codice non fosse compresso.

— davidism
fonte

9

Il css bootstrap può essere generato da Less. Lo scopo principale del file della mappa viene utilizzato per collegare il codice sorgente CSS a un codice sorgente inferiore nello strumento Chrome dev. Come sempre. Se ispezioniamo l'elemento nello strumento di sviluppo di Chrome. puoi vedere il codice sorgente di css. Ma se includi il file della mappa nella pagina con il file css bootstrap. puoi vedere meno codice che si applica allo stile dell'elemento che vuoi ispezionare.

— Joe.wang
fonte

8

Ti sei mai trovato a desiderare di poter mantenere il tuo codice lato client leggibile e, soprattutto, il debug anche dopo averlo combinato e minimizzato, senza influire sulle prestazioni? Bene, ora puoi attraverso la magia delle mappe sorgente.

Questo articolo spiega le mappe di origine usando un approccio pratico.

— Marcio Mazzucato
fonte

5

Per chiunque sia venuto qui alla ricerca di questi file (come me), di solito puoi trovarli aggiungendo .mapalla fine dell'URL:

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

Assicurati di sostituire la versione con qualsiasi versione di Bootstrap che stai utilizzando.

— Travis Heeter
fonte

5

Che cos'è un file di mappa CSS?

È un file in formato JSON che collega il file CSS ai suoi file di origine, normalmente file scritti in preprocessori (ad esempio, Less, Sass, Stilo, ecc.), Per eseguire un debug live sui file di origine dal Web browser.

Che cos'è il preprocessore CSS? Esempi: Sass, Less, Stilo

È uno strumento di generazione CSS che utilizza il potere di programmazione per generare CSS in modo robusto e rapido.

— Shadi Namrouti
fonte

1

Dovrebbero essere trattati come file di testo o flussi di byte? Dovrebbero finire \n?

— Aaron Franke

@AaronFranke Sono file di testo. Ti suggerisco di copiare il contenuto di un file .map e incollarlo su jsonblob.com per vedere le coppie chiave / valore JSON

— Shadi Namrouti

-1

Se ti stai chiedendo perché ti mancano i file della mappa con Bootstrap 3.x; assicurati di aver installato la versione corretta. Ho dovuto caricare 3.3.7 per ottenere l'effetto desiderato che stavo cercando.

— TheJoe
fonte