Sto dinamicamente l'aggiunta di tag CSS a una pagina con jQuery:Esiste qualcosa come le mappe di origine per i CSS?
$('<style type="text/css"/>').text(css).appendTo(document.head);
quando viene visualizzato in Developer Tools Chrome, tutto il CSS appare come "localhost", che non è sempre utile:
C'è qualcosa come Source Maps per CSS che mi consente di identificare la fonte del CSS per il debugger?
Aggiungi un sourceURL al tag di stile in linea mentre lo aggiungi.
/*@ sourceURL=mystyles.css */
Ciò darà a quel tag di stile in linea un nome temporaneo che verrà utilizzato all'interno del DevTools per la navigazione.
È necessario farlo funzionare con le mappe sorgente in linea? Per esempio. ' ' –
Sta identificando la fonte del CSS. Si presenta solo come localhost perché la fonte dello stile proviene dal javascript interno sulla home page di localhost. se fai clic sul link alla posizione della regola, dovrebbe comunque portarti al javascript in linea che imposta dinamicamente il tuo stile.
Come per una mappa di origine, si è tentato di espandere la sezione "Stile calcolato" e quindi espandere lo stile specifico con cui si desidera visualizzare la gerarchia di ereditarietà?
Semplicemente curioso e non significativo per farti spiegare l'intero progetto, ma perché esattamente stai aggiungendo in fogli di stile in questo modo? Aggiungendo i fogli di stile in modo condizionale prima che i modelli siano serviti risolverà sicuramente questo problema, oltre a causare molto meno lavoro di re-rerendering richiesto dal browser quando viene iniettato un CSS dinamico come questo ... – joeellis
Chrome fa un buon lavoro di identificazione del remoto, pagina e il livello degli elementi CSS. localhost è solo la tua pagina predefinita e probabilmente la fonte corretta del tuo CSS aggiunto dinamicamente. Sono con @joeellis tuttavia, non mi piace l'idea di creare CSS al volo. Dovrebbe essere aggiunto al flusso di risposta il prima possibile in modo che il browser possa utilizzarlo per eseguire il rendering in un secondo momento piuttosto che dover reimportare costantemente gli elementi in base a modifiche aggiunte dinamicamente. – iGanja
@joeellis È un sistema di plugin per una struttura più ampia. I plugin possono fare cose come aggiungere CSS e JavaScript alla pagina che viene valutata dopo l'inizializzazione dell'app principale, ma prima che inizi il suo ciclo principale. Il codice strano della colla richiede strane soluzioni colla-ey :) –