Existe-t-il un moyen d'afficher une page Web sans styles dans Chrome?

25

Sous Firefox, Affichage -> Style de page -> Aucun style permet d'afficher une page sans style. Utile pour certains sites trop dépendants de JS / feuilles de style (par exemple: Lifehacker).

Existe-t-il des fonctionnalités similaires sous Google Chrome, et / ou où y accéder?

Version 19.0.1084.56 / Ubuntu.

google-chrome css dredmorbius
la source
La meilleure solution pour cela dans Chrome est d'utiliser Firefox.
wha7ever

Réponses:

25

Désactivez toutes les feuilles de style CSS

Étant donné que la plupart des pages modernes définissent tous les styles dans les fichiers CSS externes qui sont inclus dans le <head>, la suppression de la headbalise supprimera effectivement tous les styles (sauf les styles en ligne explicites et ceux définis par les scripts). Faites un clic droit sur une page, choisissez Inspecter dans le menu contextuel et collez-le dans l'onglet Console:

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

Et voici la version bookmarklet du code ci-dessus qui peut être collée comme URL d'un signet (basculez la barre de signets dans Chrome avec ⌘+ shift+ bsur Mac ou ctrl+ shift+ bsur Linux / Windows) :

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

Vous pouvez également taper le code ci-dessus directement dans la barre d'adresse mais lisez la note à la fin de la réponse avant de le faire. .

La suppression du <head>peut également être effectuée à partir de l' onglet Éléments devtools , en cliquant avec le bouton droit sur la balise head et en la supprimant via le menu contextuel:

supprimer la balise head dans Chrome

REMARQUE: La suppression de la balise head est un peu une approche de force brute car elle tuera tous les styles, javascript, polices web, etc., et si le contenu de la page est rendu par javascript, vous obtiendrez très probablement une page vide. Sur la majorité des sites, il vous donnera probablement les résultats attendus.

Un cas d'utilisation plus fréquent consiste à supprimer des éléments gênants spécifiques sur une page, tels que les couleurs, les marges, les cadres iFrame, etc. Dans un tel cas, l'un des bookmarklets suivants fournira un contrôle plus granulaire.

Supprimer les couleurs, les arrière-plans, les marges, les rembourrages, les largeurs

Créez un signet et ajoutez l'extrait de code suivant comme 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';}})()

Maintenant, vous pouvez cliquer sur votre bookmarklet pour nettoyer le style CSS de la page actuelle en quelque chose de plus lisible.

Remarque: Il est en fait possible qu'une page ait un <style>bloc à l'intérieur de la <body>balise - la norme HTML5 le permet et la plupart des navigateurs le prennent en charge. Jusqu'à présent, ce n'est pas une pratique courante, mais à mesure que les cadres Web évoluent, nous pourrions voir davantage de «feuilles de style locales» dans le futur Web.

Si vous souhaitez simplement améliorer la lisibilité, la désactivation de tous les CSS peut ne pas offrir la meilleure expérience. Dans de tels cas, les bookmarklets ci-dessous peuvent donner de meilleurs résultats:

Supprimer les en-têtes / pieds de page sans défilement (augmente la zone de lecture)

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);}}})()

Supprimer les iframes (tue la plupart des bannières, 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

Cela tuera également la plupart des vidéos intégrées, des widgets de commentaires, etc.

Supprimer toutes les images (navigation en mode bureau)

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';}})();

Remarque: celui-ci doit être utilisé en combinaison avec Supprimer les iframes ci-dessus, car la plupart des images de bannière sont généralement à l'intérieur des iframes et ce bookmarklet ne fonctionne qu'avec le document de niveau supérieur.

Les bookmarklets peuvent également être utilisés pour les sites qui n'afficheront pas de contenu lorsque des bloqueurs de publicité sont utilisés.

Vous pouvez utiliser le Générateur de Bookmarklet pour minimiser le code (le bouton Format ), le modifier en fonction de vos besoins et le réduire (le bouton Compresser ) en quelque chose que vous pouvez coller comme URL de signet.

Les bookmarklets répertoriés ci-dessus fonctionneront également sur la plupart des navigateurs Web mobiles sur iOS et Android. Les navigateurs mobiles n'exécuteront pas javascript depuis la barre d'adresse, mais vous pouvez ajouter un signet, coller le code js comme URL, définir une étiquette, par exemple clean, puis l'exécuter en appuyant sur l'élément dans le menu des signets (pour IOS safari) ou en tapant cleandans la barre d'adresse, puis en appuyant sur le signet correspondant dans la liste déroulante de suggestion automatique. Cela peut améliorer la lisibilité des pages qui n'ont pas de mode de lecture .

REMARQUE: Si vous copiez et collez les bookmarklets ci-dessus directement dans la barre d'adresse, vous remarquerez que les navigateurs suppriment lejavascript: préfixe - il s'agit d'une fonction de sécurité du navigateur, donc si vous souhaitez tester les bookmarklets directement à partir de la barre d'adresse, alors vous besoin de préfixer javascript:manuellement avant le code js.

Extensions Chrome

Si vous recherchez une extension chrome, il y a uMatrix où vous pouvez cliquer sur la colonne CSS pour désactiver tous les CSS et styles, et Web Developer où sous l'onglet CSS vous avez une option Désactiver tous les styles .

ccpizza
la source
uMatrix (que j'ai découvert de façon indépendante dans les années intermédiaires) fait en fait l'affaire, site par site (ou page ou domaine). Le développeur Web (mentionné ci-dessous) est trop zélé.
dredmorbius
7

Vous pouvez utiliser l' extension Web Developer pour cela:

entrez la description de l'image ici

Der Hochstapler
la source
2
Merci. Cela semble faire l'affaire. Bien que Lifehacker soit toujours illisible. Fonctionne cependant en w3m. La vieille école est la façon dont nous roulons ici.
dredmorbius
Hrm. Le problème est qu'il s'agit d'un paramètre global pour tous les sites / pages. Je viens de passer quelques instants de "WTF !!!" alors que je commençais soudain à voir des éléments de style apparaître / disparaître de différentes pages alors que je basculais différents paramètres de développeur Web. C'est donc quelque peu, mais pas entièrement, utile.
dredmorbius
@ Dr.EdwardMorbius: Bizarre. Pour moi, ce n'est que temporaire. Même l'actualisation de la page revient à la vue par défaut du site. Mais je suppose que ce n'est pas ce que vous voulez non plus, n'est-ce pas?
Der Hochstapler
Oui. Désactiver la feuille de style pour la session en cours serait suffisant. Le basculement de CSS, JS, cookies, etc., pour tous les sites est maintenant terminé . Malheureusement, cela semble être le cas. Je décrirais l'expérience comme "légèrement ennuyeuse".
dredmorbius
2

Il n'y a pas de version Chrome de No Style (encore?), Vous devez donc utiliser une autre méthode , comme certaines des autres extensions qui peuvent désactiver les styles.

Vous pouvez utiliser le désactiver Stylesheets extension à désactiver les feuilles de style en général ou du Web Developer extension à activer tous les styles ou désactiver. Pendule est également une extension populaire à cet effet.

Vous pouvez également désactiver les styles avec les outils de développement [1] [2] :

Icône d'engrenage -> Onglet CSS -> Désactiver tous les styles

Synetech
la source
Cela semble désactiver toutes les feuilles de style pour toutes les pages, sans possibilité de les activer / désactiver sur une page donnée. Pas ce que je cherche.
dredmorbius
Laquelle? Il y a quatre options.
Synetech
Je ne vois pas d'icône d'extension. Supprimé.
dredmorbius
Huh?
Synetech
Il n'y avait pas d'icône pour l'extension "Désactiver les feuilles de style" dans la zone de notification à droite de la fenêtre URL. La seule façon de gérer les paramètres était de naviguer dans Wrench -> Tools -> Extensions -> Disable Stylesheets -> Options. Pas ... très ergodynamique.
dredmorbius
1

Si vous faites cela pour des raisons de vitesse, puis-je suggérer une alternative: Liens 2

Lorsque le navigateur s'ouvre, appuyez sur get saisissez l'URL à laquelle vous souhaitez accéder. Ce navigateur est léger sur les normes qu'il prend en charge, mais incroyablement rapide même sur un très vieux PC.

Gerry
la source
1
C'est plus une confidentialité / garder l'utilisation JS au minimum. J'ai tendance à préférer w3m à la famille des navigateurs de console links / elinks - une meilleure ergonomie et je suis assez habitué. Oui, cependant, je connais vraiment la vitesse et la légèreté des navigateurs de console. Certains sites sont tout simplement cassés.
dredmorbius
1
Je t'ai eu. En fait, je n'utilise pas la version console, mais l'interface graphique, car elle est tout aussi rapide. Mais oui, vous avez raison, parfois les pages sont très cassées. Ce serait formidable si toutes les pages se dégradaient gracieusement.
Gerry
2
J'ai été connu pour avoir recours au lynx, certains sed et «fmt» dans les cas extrêmes. Cela fait pleurer l'enfant Jésus.
dredmorbius
1

Sous Firefox, Affichage -> Style de page -> Aucun style permet d'afficher une page sans style. Utile pour certains sites trop dépendants de JS / feuilles de style (par exemple: Lifehacker). Existe-t-il des fonctionnalités similaires sous Google Chrome, et / ou où y accéder? Version 19.0.1084.56 / Ubuntu. - Dr Edward Morbius

...

Oui. Désactiver la feuille de style pour la session en cours serait suffisant. Le basculement de CSS, JS, cookies, etc., pour tous les sites est maintenant terminé. Malheureusement, cela semble être le cas. Je décrirais l'expérience comme "légèrement ennuyeuse". - Dr Edward Morbius

En utilisant la bibliothèque jQuery, à console(Chromium / Chrome, Firefox, Opera) devrait effacer les styles d'auteur d'un document 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

Pour activer ou désactiver les styles dans un document HTML, cela peut être utile:

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

Charge jQuery dans le document, à partir du fichier local ou du CDN de jQuery, enregistre le succès, l'état du style de journaux, active ou désactive les styles d'auteur par la touche de la barre d'espace ou sur la console.

Testé dans Chromium / Chrome, Firefox et Opera pour les documents HTML locaux et en ligne.

guest271314
la source
1

Mon outil actuellement préféré pour cela est l' extension de navigateur uMatrix , qui permet des contrôles encore plus fins: désactivez CSS, JS, les images ou d'autres fonctionnalités, en chargeant le domaine, par rapport au site Web actuel. Les modifications peuvent être facilement basculées, rendues permanentes ou converties en règles par défaut.

Ceci et élégant répondent à la plupart de mes besoins de personnalisation en tant que lecteur. Reader-Mode (Firefox) a tendance à fournir un contenu de style uniforme de manière assez fiable.

Étendre la question: sur Chrome / Android, je n'ai pas d'option viable et les solutions suggérées ci-dessus ne fonctionnent pas.

dredmorbius
la source
0

code jquery sur une seule ligne ... utiliser 

jQuery("head").empty();

ou en javascripts, vous pouvez utiliser 

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

allez sur votre page Web, puis appuyez sur ctrl + shift + i, vous verrez un menu sélectionner une console et collez ce document.getElementsByTagName("head")[0].innerText="";code, puis appuyez sur entrée

Vishal choudhary
la source
2
Où ces informations devraient-elles être saisies?
music2myear
allez sur votre page Web, puis appuyez sur ctrl + shift + i, vous verrez un menu sélectionner une console et collez ce document.getElementsByTagName("head")[0].innerText="";code, puis appuyez sur entrée
Vishal choudhary
Il ne devrait pas être nécessaire de lire les commentaires pour comprendre une réponse. Veuillez utiliser le bouton MODIFIER pour ajouter ces informations à la réponse elle-même.
music2myear