Cómo deshabilitar CSS en el navegador con fines de prueba

¿Hay alguna forma de deshabilitar todos los CSS externos en un navegador (Firefox, Chrome ...)?

Cuando se usa una conexión a Internet más lenta, a veces el navegador solo carga el HTML sin la información de CSS. Parece que la página se ha puesto sin formato en la pantalla. También habrías notado esto con StackOverflow.

Quiero asegurarme de que mi página web se muestre bien incluso si los archivos CSS no están cargados.

No quise decir que quisiera convertir CSS externo a inline. Pero quiero una forma de deshabilitar explícitamente todos los CSS del navegador para poder reposicionar mis elementos de una manera mejor y legible.

Sé que puedo eliminar las entradas de <link rel = 'stylesheet'>, pero ¿qué sucede si tengo muchas páginas vinculadas?

El complemento de desarrollador web para Firefox y Chrome puede hacer esto

Una vez que haya instalado el complemento, la opción está disponible en el menú CSS. Por ejemplo,CSS > Disable Styles > Disable All Styles

Alternativamente, con la barra de herramientas del desarrollador habilitada, puede presionar Alt+Shift+A.

En Chrome / Chromium, puede hacer esto en la consola del desarrollador.

1. Abra la consola de desarrollador mediante ctrl-shift-j o Menú-> Herramientas-> Consola de desarrollador.
2. Dentro de la consola del desarrollador, vaya a la pestaña Fuentes.
3. En la esquina superior izquierda de esta pestaña hay un icono con un triángulo desplegable. Haz click en eso.
4. Vaya a <dominio> → css → <archivo css que desea eliminar>
5. Resalta todo el texto y presiona eliminar.
6. Enjuague y repita para cada hoja de estilo que desee desactivar.

Firefox (Win y Mac)

• A través de la barra de herramientas del menú, elija: "Ver"> "Estilo de página"> "Sin estilo"
• A través de la barra de herramientas para desarrolladores web, elija: "CSS"> "Deshabilitar estilos"> "Todos los estilos"

Si la barra de herramientas Web Dev está instalada, las personas pueden usar estos atajos de teclado: Command+ Shift+ S(Mac) y Control+ Shift+ S(Win)

• Safari (Mac): a través de la barra de herramientas del menú, seleccione "Desarrollar"> "Deshabilitar estilos"
• Opera (Win): a través del menú, elija "Página"> "Estilo"> "Modo de usuario"
• Chrome (Win): a través del ícono de ajustes, elija la pestaña "CSS"> "Deshabilitar todos los estilos"
• Internet Explorer 8: a través de la barra de herramientas del menú, seleccione "Ver"> "Estilo"> "Sin estilo"
• Internet Explorer 7: a través del menú de la barra de herramientas para desarrolladores de IE: Desactivar> Todo CSS
• Internet Explorer 6: a través de la barra de herramientas de accesibilidad web, seleccione "CSS"> "Deshabilitar CSS".

Este guión funciona para mí (punta de sombrero 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]); };

el estilo en línea permanece intacto, aunque

Ampliando la idea de scrappedocola / renergy, puede convertir JavaScript en un bookmarklet que se ejecuta contra el javascript:uri para que el código se pueda reutilizar fácilmente en varias páginas sin tener que abrir las herramientas de desarrollo o guardar nada en su portapapeles.

Simplemente ejecute el siguiente fragmento y arrastre el enlace a su barra de marcadores / favoritos:

<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>

• Evitaría recorrer los miles de elementos en una página getElementsByTagName('*')y tendría que verificar y actuar en cada uno de ellos individualmente.
• Evitaría confiar en jQuery existente en la página $('style,link[rel="stylesheet"]').remove()cuando el javascript adicional no es abrumadoramente engorroso.

Instale Adblock Plus, luego agregue la *.cssregla en las opciones de Filtros (pestaña de filtros personalizados). El método afecta solo a las hojas de estilo externas . No desactiva los estilos en línea.

Deshabilitar todo CSS externo

Este método hace exactamente lo que pidió.

Otra forma de lograr la de @David Baucum solución de en menos pasos:

1. Clic derecho -> inspeccionar elemento
2. Haga clic en el nombre de la hoja de estilo que afecta su elemento (justo en el lado derecho de la declaración)
3. Resalta todo el texto y presiona eliminar.

Podría ser más práctico en algunos casos.

Como la mayoría de las respuestas parecen ser bastante antiguas aquí, haciendo referencia a elementos del menú que parece que no puedo encontrar en las versiones actuales de los navegadores populares, aquí se explica cómo hacerlo en la versión actual en Firefox Developer Edition:

• Abrir herramientas de desarrollo ( CTRL + SHIFT + I)
• Seleccione la pestaña Editor de estilos
• Allí debería ver todas las fuentes de CSS en su documento. Puede desactivar cada uno de ellos haciendo clic en el icono de ojo junto a ellos.

Para las páginas que dependen de CSS externo (la mayoría de las páginas hoy en día), una solución simple y confiable es eliminar el headelemento:

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

Haga clic con el botón derecho en esta página (en Chrome / Firefox), seleccione Inspeccionar , pegue el código en la consola devtools y presione Entrar .

Una versión de bookmarklet del mismo código que puede pegar como URL de un marcador:

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

Ahora, al hacer clic en el marcador en la barra de favoritos, se mostrará la página sin hojas de estilo CSS.

Quitar el encabezado no funcionará para las páginas que usan estilos en línea.

Si usas Safari en MacOS, entonces:

1. Abra Preferencias de Safari ( cmd+ ,) y en Avanzado pestaña active la casilla de verificación "Mostrar el menú Desarrollar en la barra de menú".
2. Ahora, en el menú Desarrollar , encontrará una opción Deshabilitar estilos .

Probé en las herramientas de desarrollador de Chrome y el método es válido solo si el CSS se incluye como archivos externos y no funcionará para estilos en línea.

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

O

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

Explicaciones

1. document.querySelectorAll('link')obtiene todos los nodos de enlace. Esto devolverá una matriz de elementos DOM. Tenga en cuenta que este no es un objeto Array de javascript.
2. Array.prototype.forEach.call(linkElements recorre los elementos del enlace
3. element.remove() elimina el elemento del DOM

Resultando en una página HTML simple

puede bloquear cualquier solicitud (incluso para un solo archivo css) del inspector con lo siguiente:
    Haga clic derecho> bloquear la URL de solicitud
sin deshabilitar otros archivos css> https://umaar.com/dev-tips/68-block-requests/ Es una función de inspector estándar, no se necesitan complementos ni trucos

En Firefox, la forma más sencilla es mediante el comando de menú Ver> Estilo de página> Sin estilo. Pero esto también desactiva los efectos de algunas marcas HTML de presentación. Entonces, usar complementos como lo sugiere @JoelKuiper suele ser mejor; dan más flexibilidad (por ejemplo, apagando solo algunas hojas de estilo).

De hecho, es más fácil de lo que piensas. En cualquier navegador, presione F12 para abrir la consola de depuración. Esto funciona para IE, Firefox y Chrome. No estoy seguro de Opera. Luego comente el CSS en las ventanas de elementos. Eso es.

Mientras inspecciona HTML con la herramienta de desarrollo del navegador que prefiera (por ejemplo, Chrome Devtools), busque el <head>elemento y elimínelo.

Tenga en cuenta que esto también eliminará js, pero para mí es la forma más rápida de desnudar la página .

Todas las respuestas sugeridas simplemente eliminan el CSS para la carga de esa página. Dependiendo de su caso de uso, es posible que desee no cargar el CSS en absoluto:

Herramientas de desarrollo de Chrome> pestaña Red> Haga clic con el botón derecho en la hoja de estilo en cuestión> bloquear URL de solicitud

Para aquellos que no quieren ningún complemento u otras cosas, podemos usar document.styleSheets para deshabilitar / habilitar css.

// código para deshabilitar todo el CSS

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

Si usa Chrome, puede crear una función y agregarla a sus fragmentos. Para que pueda usar la consola para habilitar / deshabilitar el CSS para cualquier sitio.

// Fragmentos -> DisableCSS

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

// en consola

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