Come disabilitare CSS nel browser a scopo di test

C'è un modo per disabilitare tutti i CSS esterni in un browser (Firefox, Chrome ...)?

Quando si utilizza una connessione Internet più lenta, a volte solo il semplice HTML viene caricato dal browser senza le informazioni CSS. Sembra che la pagina sia stata visualizzata grezza sullo schermo. Lo avresti notato anche con StackOverflow.

Voglio assicurarmi che la mia pagina web sia visualizzata correttamente anche se i file CSS non vengono caricati.

Non intendevo convertire CSS esterni in inline. Ma voglio un modo per disabilitare esplicitamente tutti i CSS dal browser in modo da poter riposizionare i miei elementi in un modo migliore e leggibile.

So di poter rimuovere le voci <link rel = 'stylesheet'>, ma cosa succede se ho molte pagine collegate?

Il plugin Web Developer per Firefox e Chrome è in grado di farlo

Dopo aver installato il plugin, l'opzione è disponibile nel menu CSS. Per esempio,CSS > Disable Styles > Disable All Styles

In alternativa con la barra degli strumenti per sviluppatori abilitata è possibile premere Alt+Shift+A.

In Chrome / Chromium puoi farlo nella console per sviluppatori.

1. Apri la console per sviluppatori premendo ctrl-shift-j o Menu-> Strumenti-> Console per sviluppatori.
2. All'interno della console per sviluppatori vai alla scheda Sorgenti.
3. Nell'angolo in alto a sinistra di questa scheda c'è un'icona con un triangolo di apertura. Cliccaci sopra.
4. Vai a <dominio> → css → <file css che desideri eliminare>
5. Evidenzia tutto il testo e premi Elimina.
6. Sciacquare e ripetere per ogni foglio di stile che si desidera disabilitare.

Firefox (Win e Mac)

• Nella barra degli strumenti del menu, scegli: "Visualizza"> "Stile pagina"> "Nessuno stile"
• Tramite la barra degli strumenti per sviluppatori web, scegli: "CSS"> "Disabilita stili"> "Tutti gli stili"

Se la Web Dev Toolbar è installata, le persone possono utilizzare queste scorciatoie da tastiera: Command+ Shift+ S(Mac) e Control+ Shift+ S(Win)

• Safari (Mac): dalla barra degli strumenti del menu, scegli "Sviluppo"> "Disabilita stili"
• Opera (Win): tramite il menu, scegli "Pagina"> "Stile"> "Modalità utente"
• Chrome (Windows): tramite l'icona a forma di ingranaggio, scegli la scheda "CSS"> "Disattiva tutti gli stili"
• Internet Explorer 8: dalla barra degli strumenti del menu, scegli "Visualizza"> "Stile"> "Nessuno stile"
• Internet Explorer 7: tramite il menu della barra degli strumenti per sviluppatori di IE: Disabilita> Tutti i CSS
• Internet Explorer 6: tramite la barra degli strumenti di accessibilità web, scegli "CSS"> "Disabilita CSS"

Questo script funziona per me (punta di cappello a scrappedcola)

var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };

lo stile inline rimane intatto, però

Espandendo l'idea di scrappedocola / renergy, puoi trasformare JavaScript in un bookmarklet che viene eseguito controjavascript: uri in modo che il codice possa essere riutilizzato facilmente su più pagine senza dover aprire gli strumenti di sviluppo o tenere qualcosa negli appunti.

Basta eseguire il seguente frammento e trascinare il collegamento nella barra dei segnalibri / preferiti:

<a href="javascript: var el = document.querySelectorAll('style,link');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

• Eviterei di scorrere le migliaia di elementi su una pagina con getElementsByTagName('*') e controllare e agire su ciascuno individualmente.
• Eviterei di fare affidamento su jQuery esistente sulla pagina con $('style,link[rel="stylesheet"]').remove()quando il javascript extra non è eccessivamente ingombrante.

Installa Adblock Plus, quindi aggiungi la *.cssregola nelle opzioni dei filtri (scheda filtri personalizzati). Il metodo ha effetto solo sui fogli di stile esterni . Non disattiva gli stili in linea.

Disabilita tutti i CSS esterni

Questo metodo fa esattamente quello che hai chiesto.

Un altro modo per ottenere la soluzione di @David Baucum in meno passaggi:

1. Fare clic con il tasto destro -> ispeziona elemento
2. Fai clic sul nome del foglio di stile che influisce sul tuo elemento (appena sul lato destro della dichiarazione)
3. Evidenzia tutto il testo e premi Elimina.

Potrebbe essere più pratico in alcuni casi.

Poiché la maggior parte delle risposte sembra essere piuttosto vecchia qui, facendo riferimento a voci di menu che non riesco a trovare nelle versioni correnti dei browser più diffusi, ecco come farlo nella versione corrente in Firefox Developer Edition:

• Apri strumenti per sviluppatori (CTRL + SHIFT + I )
• Seleziona la scheda Editor di stile
• Lì dovresti vedere tutte le fonti di CSS nel tuo documento. Puoi disabilitare ciascuno di essi facendo clic sull'icona a forma di occhio accanto ad essi.

Per le pagine che si basano su CSS esterni (la maggior parte delle pagine al giorno d'oggi) una soluzione semplice e affidabile è uccidere l' headelemento:

document.querySelector("head").remove();

Fare clic con il tasto destro su questa pagina (in Chrome / Firefox), selezionare Inspect , incollare il codice nella console devtools e premere Invio .

Una versione bookmarklet dello stesso codice che puoi incollare come URL di un segnalibro:

javascript:(function(){document.querySelector("head").remove();})()

Ora facendo clic sul segnalibro nella barra dei Preferiti verrà visualizzata la pagina senza fogli di stile CSS.

La rimozione della testina non funzionerà per le pagine che utilizzano stili incorporati.

Se ti capita di utilizzare Safari su MacOS, allora:

1. Apri le Preferenze Safari ( cmd+ ,) e in Avanzate scheda abilita la casella di controllo "Mostra menu Sviluppo nella barra dei menu".
2. Ora nel menu Sviluppo troverai l' opzione Disabilita stili .

Ho provato negli strumenti per sviluppatori di Chrome e il metodo è valido solo se i CSS sono inclusi come file esterni e non funzionerà per gli stili in linea.

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

O

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

spiegazioni

1. document.querySelectorAll('link')ottiene tutti i nodi di collegamento. Questo restituirà un array di elementi DOM. Nota che questo non è un oggetto Array di javascript.
2. Array.prototype.forEach.call(linkElements scorre gli elementi di collegamento
3. element.remove() rimuove l'elemento dal DOM

Il risultato è una semplice pagina HTML

puoi bloccare qualsiasi richiesta (anche per un singolo file css) dall'ispettore con quanto segue:
    Fare clic con il tasto destro> bloccare l'URL della richiesta
senza disabilitare altri file css> https://umaar.com/dev-tips/68-block-requests/ È una funzione di ispezione standard, non sono necessari plug-in o trucchi

Su Firefox, il modo più semplice è tramite il comando di menu Visualizza> Stile pagina> Nessuno stile. Ma questo disattiva anche gli effetti di alcuni markup HTML di presentazione. Quindi usare i plugin come suggerito da @JoelKuiper di solito è meglio; danno maggiore flessibilità (ad esempio, disattivando solo alcuni fogli di stile).

In realtà, è più facile di quanto pensi. In qualsiasi browser, premere F12 per visualizzare la console di debug. Funziona per IE, Firefox e Chrome. Non sono sicuro di Opera. Quindi commenta il CSS nelle finestre degli elementi. Questo è tutto.

Durante l'ispezione dell'HTML con lo strumento di sviluppo del browser che preferisci (ad esempio Chrome Devtools) trova il file <head> elemento ed eliminalo del tutto.

Si noti che questo rimuoverà anche js, ma per me è il modo più veloce per rendere nuda la pagina .

Tutte le risposte suggerite eliminano semplicemente il CSS per quel caricamento della pagina. A seconda del tuo caso d'uso, potresti non voler caricare affatto il css:

Chrome Dev Tools> scheda Rete> fai clic con il pulsante destro del mouse sul foglio di stile in questione> blocca l'URL della richiesta

Per coloro che non vogliono alcun plugin o altro, possiamo usare document.styleSheets per disabilitare / abilitare il css.

// codice per disabilitare tutti i css

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

Se utilizzi chrome, puoi creare una funzione e aggiungerla ai tuoi snippet. In modo da poter utilizzare la console per abilitare / disabilitare il CSS per qualsiasi sito.

// Snippets -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// nella console

disableCss() // by default is disable
disableCss(false) // to enable