Risposte:
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.
Se vuoi semplicemente eliminare l'errore, puoi anche eliminare questa riga in bootstrap.css
:
/*# sourceMappingURL=bootstrap.css.map */
#
e si trasformerà in un semplice commento, nel caso in cui lo desideri più tardi.
bootstrap.css
, causa errori o tipi di cose?
gulp --production
se usi gulp, questo non includerà quella linea sourceMapping) ed escludi i file * .map dai tuoi caricamenti sul server di produzione.
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.
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.
Per chiunque sia venuto qui alla ricerca di questi file (come me), di solito puoi trovarli aggiungendo .map
alla 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.
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.
\n
?