attribute - title tag html

Cómo deshabilitar CSS en el navegador para fines de prueba (14)

¿Hay alguna manera de que pueda deshabilitar todas las CSS externas en un navegador (Firefox, Chrome ...)?

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

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

No quise decir que quiero convertir CSS externo a en línea. Pero quiero una manera de deshabilitar explícitamente todo el CSS del navegador para que pueda reposicionar mis elementos de una manera mejor y legible.

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

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

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

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

Simplemente ejecute el siguiente fragmento y arrastre el enlace a su barra de favoritos / 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 con getElementsByTagName(''*'') y tengo que verificar y actuar en cada uno de manera individual.
Evitaría confiar en jQuery existente en la página con $(''style,link[rel="stylesheet"]'').remove() cuando el javascript adicional no es abrumadoramente engorroso.

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

Abra Herramientas de desarrollo ( CTRL + SHIFT + I )
Seleccione la pestaña Editor de Estilo
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 al lado de ellos.

El complemento de Web Developer para Firefox y Chrome es capaz de hacer esto

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

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

En Chrome / Chromium puedes hacer esto en la consola de desarrollador.

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

En Firefox, la forma más simple es a través del comando de menú Ver> Estilo de página> Sin estilo. Pero esto también apaga los efectos de algunas marcas HTML de presentación. Por lo tanto, usar complementos como lo sugiere @JoelKuiper suele ser mejor; dan más flexibilidad (por ejemplo, apagan solo algunas hojas de estilo).

En realidad, 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 acerca de Opera. Luego comenta el CSS en las ventanas de los elementos. Eso es.

Este script funciona para mí (hat tip to 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 se mantiene intacto, aunque

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 del desarrollador web, elija: "CSS"> "Desactivar estilos"> "Todos los estilos"

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

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

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

Deshabilitar todo el CSS externo

Este método hace exactamente lo que pediste.

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

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

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

Explicaciones

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

Resultando en una página HTML simple

Otra forma de lograr la solution @David Baucum en menos pasos:

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

Podría ser más útil en algunos casos.

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 elemento principal:

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

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

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

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

Ahora, al hacer clic en el marcador en su barra de Favoritos, se mostrará la página sin ninguna hoja de estilo css.

La eliminación de la cabeza no funcionará para las páginas que usan estilos en línea.

Si usa Safari en MacOS, entonces:

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

Todas las respuestas sugeridas simplemente eliminan el CSS para esa carga de página. Dependiendo de su caso de uso, puede desear no cargar el CSS en absoluto:

Herramientas de Chrome Dev> Ficha Red> Haz clic con el botón derecho en la hoja de estilo en cuestión> URL de solicitud de bloque