¿Hay alguna forma de ver una página web sin estilos en Chrome?

25

En Firefox, Ver -> Estilo de página -> Sin estilo permite ver una página sin estilo. Útil para algunos sitios que dependen demasiado de JS / hojas de estilo (por ejemplo: Lifehacker).

¿Existe alguna funcionalidad similar en Chrome de Google y / o dónde accedería a esto?

Versión 19.0.1084.56 / Ubuntu.

google-chrome css dredmorbius
fuente
La mejor solución para esto en Chrome es usar Firefox.
wha7ever - Restablece a Monica el

Respuestas:

25

Deshabilitar todas las hojas de estilo CSS

Dado que la mayoría de las páginas modernas definen todos los estilos en los archivos CSS externos que se incluyen en el <head>, la eliminación de la headetiqueta eliminará efectivamente todos los estilos (excepto los estilos en línea explícitos y los establecidos por scripts). Haga clic derecho en una página, seleccione Inspeccionar en el menú contextual y péguelo en la pestaña Consola:

document.head.parentNode.removeChild(document.head);

Y aquí está la versión bookmarklet del código anterior que se puede pegar como la URL de un marcador (alternar la barra de marcadores en Chrome con ⌘+ shift+ ben Mac o ctrl+ shift+ ben Linux / Windows) :

javascript:(function(){document.head.parentNode.removeChild(document.head);})()

También puede escribir el código anterior directamente en la barra de direcciones, pero lea la nota al final de la respuesta antes de hacerlo. .

La eliminación <head>también se puede hacer desde la pestaña Elementos de devtools , haciendo clic derecho en la etiqueta del encabezado y eliminándola a través del menú contextual:

eliminar la etiqueta de la cabeza en Chrome

NOTA: Quitar la etiqueta de la cabeza es un enfoque de fuerza bruta, ya que eliminará todos los estilos, javascript, fuentes web, etc. En la mayoría de los sitios, probablemente le dará los resultados esperados.

Un caso de uso más frecuente es eliminar cosas molestas específicas en una página, como colores, márgenes, marcos flotantes, etc. En tal caso, uno de los siguientes marcadores proporcionará un control más granular.

Eliminar colores, fondos, márgenes, rellenos, anchos

Cree un marcador y agregue el siguiente fragmento como URL:

javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()

Ahora puede hacer clic en su bookmarklet para limpiar el estilo CSS en la página actual para hacer algo más legible.

Nota: De hecho, es posible que una página tenga un <style>bloque dentro de la <body>etiqueta; el estándar HTML5 permite esto y la mayoría de los navegadores lo admiten. Hasta ahora, esto no es una práctica común, pero a medida que evolucionan los marcos web, podríamos ver más 'hojas de estilo locales' en la web futura.

Si simplemente desea mejorar la legibilidad, deshabilitar todo CSS podría no proporcionar la mejor experiencia. Para tales casos, los bookmarklets a continuación pueden dar mejores resultados:

Eliminar encabezados / pies de página que no se desplazan (aumenta el área de lectura)

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

Eliminar iframes (mata la mayoría de los banners, etc.)

javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29

Esto también eliminará la mayoría de los videos incrustados, widgets de comentarios, etc.

Eliminar todas las imágenes (navegación en modo oficina)

javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();

Nota: este debe usarse en combinación con Eliminar marcos flotantes anteriores, ya que la mayoría de las imágenes de pancartas suelen estar dentro de marcos flotantes y este marcador solo funciona con el documento de nivel superior.

Los marcadores también se pueden usar para sitios que no mostrarán contenido cuando se usan bloqueadores de anuncios.

Puede usar Bookmarklet Builder para desminificar el código (el botón Formatear ), editarlo para adaptarlo a sus necesidades y minimizarlo (el botón Comprimir ) a algo que pueda pegar como URL del marcador.

Los marcadores enumerados anteriormente también funcionarán en la mayoría de los navegadores web móviles tanto en iOS como en Android. Los navegadores móviles no ejecutarán javascript desde la barra de direcciones, pero puede agregar un marcador, pegar el código js como URL, establecer una etiqueta, por ejemplo clean, y luego ejecutarlo tocando el elemento en el menú de marcadores (para IOS safari) o escribiendo cleanen la barra de direcciones y luego tocando el marcador correspondiente en el menú desplegable de sugerencia automática. Esto puede mejorar la legibilidad para páginas que no tienen modo de lectura .

NOTA: Si copia y pega los marcadores anteriores directamente en la barra de direcciones, notará que los navegadores eliminan eljavascript: prefijo; esta es una función de seguridad del navegador, por lo que si desea probar los marcadores directamente desde la barra de direcciones, entonces necesita anteponer javascript:manualmente antes del código js.

Extensiones de Chrome

Si está buscando una extensión de Chrome, existe uMatrix, donde puede hacer clic en la columna CSS para deshabilitar todos los estilos y CSS, y Web Developer, donde en la pestaña CSS tiene la opción Deshabilitar todos los estilos .

ccpizza
fuente
uMatrix (que he descubierto independientemente en los años intermedios) de hecho hace el truco, sitio por sitio (o página, o dominio). El desarrollador web (mencionado a continuación) es demasiado entusiasta.
dredmorbius
7

Puede usar la extensión Web Developer para eso:

ingrese la descripción de la imagen aquí

Der Hochstapler
fuente
2
Gracias. Eso parece hacer el truco. Aunque Lifehacker sigue siendo ilegible. Funciona en w3m sin embargo. La vieja escuela es como rodamos aquí.
dredmorbius
Hrm. El problema es que esta es una configuración global para todos los sitios / páginas. Acabo de pasar por unos momentos de "WTF !!!" cuando de repente comencé a ver aparecer / desaparecer elementos de estilo en varias páginas mientras alternaba varias configuraciones de Desarrollador web. Entonces es algo, pero no del todo, útil.
dredmorbius
@ Dr.EdwardMorbius: Extraño. Para mí, esto es solo temporal. Incluso la actualización de la página vuelve a la vista predeterminada del sitio. Pero supongo que eso tampoco es lo que quieres, ¿verdad?
Der Hochstapler
Sí. Desactivar la hoja de estilo para la sesión actual sería suficiente. Alternar CSS, JS, cookies, etc., para todos los sitios está listo. Desafortunadamente, eso parece ser lo que estaba sucediendo. Describiría la experiencia como "ligeramente molesta".
dredmorbius
2

No hay una versión de Chrome de Sin estilo (¿todavía?), Por lo que debe usar otro método , como algunas de las otras extensiones que pueden deshabilitar los estilos.

Puede utilizar la desactivación de Estilo en extensión a las hojas de estilo en general o desactivar el desarrollador Web extensión para cambiar todos los estilos dentro o fuera. Pendule es también una extensión popular para este propósito.

También puede deshabilitar estilos con las Herramientas para desarrolladores [1] [2] :

Icono de engranaje -> Pestaña CSS -> Desactivar todos los estilos

Synetech
fuente
Eso parece deshabilitar todas las hojas de estilo para todas las páginas, sin la capacidad de habilitarlas / deshabilitarlas en una página determinada. No es lo que estoy buscando.
dredmorbius
¿Cúal? Hay cuatro opciones.
Synetech
No veo un ícono de extensión. Lo eliminó
dredmorbius
Eh?
Synetech
No había ningún icono para la extensión "Desactivar hojas de estilo" en el área de notificación a la derecha de la ventana URL. La única forma en que podía administrar la configuración era navegar a través de Wrench -> Tools -> Extensions -> Disable Stylesheets -> Options. No ... muy ergodinámico.
dredmorbius
1

Si está haciendo esto por razones de velocidad, entonces puedo sugerir una alternativa: Enlaces 2

Cuando se abra el navegador, presione gy escriba la url a la que desea ir. Este navegador es liviano en los estándares que admite, pero sorprendentemente rápido incluso en una PC muy antigua.

Gerry
fuente
1
Es más una privacidad / mantener el uso de JS al mínimo. Tiendo a preferir w3m sobre la familia de enlaces / enlaces de navegadores de consola, mejor ergonomía y estoy bastante acostumbrado. Sí, sin embargo, estoy muy familiarizado con lo rápido y ligero que pueden ser los navegadores de consola. Sin embargo, algunos sitios simplemente están rotos.
dredmorbius
1
Gotcha En realidad, no uso la versión de consola, pero la interfaz gráfica de usuario es igual de rápida. Pero sí, tienes razón, a veces las páginas están muy rotas. Sería genial si todas las páginas se degradaran con gracia.
Gerry
2
Se sabe que recurro al lince, algunos sed y 'fmt' en casos extremos. Esto hace llorar al bebé Jesús.
dredmorbius
1

En Firefox, Ver -> Estilo de página -> Sin estilo permite ver una página sin estilo. Útil para algunos sitios que dependen demasiado de JS / hojas de estilo (por ejemplo: Lifehacker). ¿Existe alguna funcionalidad similar en Chrome de Google y / o dónde accedería a esto? Versión 19.0.1084.56 / Ubuntu. - Dr. Edward Morbius

...

Sí. Desactivar la hoja de estilo para la sesión actual sería suficiente. Alternar CSS, JS, cookies, etc., para todos los sitios está listo. Desafortunadamente, eso parece ser lo que estaba sucediendo. Describiría la experiencia como "ligeramente molesta". - Dr. Edward Morbius

Al usar la biblioteca jQuery, en console(Chromium / Chrome, Firefox, Opera) debería borrar los estilos de autor de un documento HTML:

(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()

https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js

Para activar o desactivar estilos en un documento HTML, esto puede ser útil:

https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js

Carga jQuery en el documento, ya sea desde un archivo local o desde el CDN de jQuery, registra el éxito, registra el estado del estilo, activa o desactiva los estilos de autor con la tecla de barra espaciadora o en la consola.

Probado en Chromium / Chrome, Firefox y Opera para documentos HTML locales y en línea.

invitado271314
fuente
1

Mi herramienta actualmente preferida para esto es la extensión del navegador uMatrix , que permite controles aún más precisos : deshabilitar CSS, JS, imágenes u otras características, al cargar el dominio, en relación con el sitio web actual. Los cambios pueden alternarse fácilmente, hacerse permanentes o emitirse como reglas predeterminadas.

Esto y con estilo abordan la mayoría de mis necesidades de personalización como lector. Reader-Mode (Firefox) tiende a proporcionar contenido de estilo uniforme de manera bastante confiable.

Extender la pregunta: en Chrome / Android, no tengo una opción viable, y las soluciones sugeridas anteriormente no funcionan.

dredmorbius
fuente
0

solo un código jquery de línea ... use 

jQuery("head").empty();

o en javascripts puedes usar 

document.getElementsByTagName("head")[0].innerText="";

vaya a su página web y luego presione ctrl + shift + i verá un menú seleccione consola y pegue este document.getElementsByTagName("head")[0].innerText="";código y luego presione enter

Vishal choudhary
fuente
2
¿Dónde se ingresaría esta información?
music2myear
vaya a su página web y luego presione ctrl + shift + i verá un menú seleccione consola y pegue este document.getElementsByTagName("head")[0].innerText="";código y luego presione enter
Vishal choudhary
No debería ser necesario leer comentarios para entender una respuesta. Utilice el botón EDITAR para agregar esta información a la respuesta misma.
music2myear