web-dev-qa-db-fra.com

Comment désactiver CSS dans le navigateur à des fins de test

Est-il possible de désactiver tous les CSS externes dans un navigateur (Firefox, Chrome ...)?

Lorsque vous utilisez une connexion Internet plus lente, parfois, seul le code HTML nu est chargé par le navigateur, sans les informations CSS. On dirait que la page a été posée brute à l'écran. Vous auriez aussi remarqué cela avec StackOverflow.

Je veux m'assurer que ma page Web s'affiche correctement, même si les fichiers CSS ne sont pas chargés.

Je ne voulais pas dire que je voulais convertir un CSS externe en inline. Mais je veux un moyen de désactiver explicitement tous les CSS du navigateur afin de pouvoir repositionner mes éléments de manière plus lisible.

Je sais que je peux supprimer les entrées <link rel = 'stylesheet'>, mais que se passe-t-il si j'ai beaucoup de pages liées?

96
ATOzTOA

Le plugin Web Developer pour Firefox et Chrome est capable de le faire.

Une fois le plugin installé, l’option est disponible dans le menu CSS. Par exemple, CSS > Disable Styles > Disable All Styles 

Sinon, avec la barre d'outils de développeur activée, vous pouvez appuyer sur Alt+Shift+A.

53
JoelKuiper

Dans Chrome/Chromium, vous pouvez le faire dans la console du développeur.

  1. Affichez la console du développeur en appuyant sur ctrl-shift-j ou sur Menu-> Outils-> Console du développeur.
  2. Dans la console du développeur, accédez à l'onglet Sources.
  3. Dans le coin supérieur gauche de cet onglet se trouve une icône avec un triangle d'affichage. Clique dessus.
  4. Accédez à <domaine> → css → <fichier css à éliminer>
  5. Mettez tout le texte en surbrillance et appuyez sur supprimer.
  6. Rincez et répétez pour chaque feuille de style que vous souhaitez désactiver.
60
David Baucum

Firefox (Win et Mac)

  • Dans la barre d’outils du menu, choisissez: "Affichage"> "Style de page"> "Pas de style".
  • Dans la barre d'outils de développeur Web, choisissez: "CSS"> "Désactiver les styles"> "Tous les styles".

Si la barre d'outils Web Dev est installée, vous pouvez utiliser les raccourcis clavier suivants: Command + Shift + S (Mac) et Control + Shift + S (Gagner)

  • Safari (Mac): via la barre d’outils du menu, choisissez "Développer"> "Désactiver les styles"
  • Opera (Win): via le menu, choisissez "Page"> "Style"> "Mode utilisateur"
  • Chrome (Win): via l'icône en forme d'engrenage, choisissez l'onglet "CSS"> "Désactiver tous les styles"
  • Internet Explorer 8: dans la barre d’outils du menu, choisissez "Vue"> "Style"> "Pas de style"
  • Internet Explorer 7: via le menu IE de la barre d'outils du développeur: Désactiver> Tout le CSS
  • Internet Explorer 6: dans la barre d’outils Web Accessibility, choisissez "CSS"> "Disable CSS"
19
Aravind NC

Ce script fonctionne pour moi (pointe du chapeau à 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]); };

le style en ligne reste intact, bien que

15
renergy

En développant l’idée de scrappedocola/renergy, vous pouvez transformer le JavaScript en bookmarklet qui s’exécute par rapport au javascript: uri afin que le code puisse être réutilisé facilement sur plusieurs pages sans avoir à ouvrir les outils de développement ou à ne rien conserver. presse-papier. 

Il suffit de lancer l'extrait de code suivant et de faire glisser le lien dans la barre de favoris/favoris:

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

  • J'éviterais de parcourir les milliers d'éléments d'une page avec getElementsByTagName('*') et je devrais vérifier et agir individuellement.
  • J'éviterais de compter sur jQuery existant sur la page avec $('style,link[rel="stylesheet"]').remove() lorsque le javascript supplémentaire n'est pas extrêmement encombrant.
9
KyleMit

Installez Adblock Plus, puis ajoutez la règle *.css dans les options de filtres (onglet filtres personnalisés). La méthode n'affecte que sur les feuilles de style externes . Cela ne désactive pas les styles en ligne.

Désactiver tous les CSS externes

Cette méthode fait exactement ce que vous avez demandé.

9
yakunins

Une autre façon de réaliser la solution de @David Baucum en moins d'étapes:

  1. Clic droit -> inspecter l'élément
  2. Cliquez sur le nom de la feuille de style qui affecte votre élément (juste à droite de la déclaration)
  3. Mettez tout le texte en surbrillance et appuyez sur supprimer.

Cela pourrait être plus pratique dans certains cas.

4

Comme la plupart des réponses semblent assez anciennes ici, en référant aux éléments de menu que je n'arrive pas à trouver dans les versions actuelles des navigateurs populaires, voici comment procéder dans la version actuelle de Firefox Developer Edition:

  • Ouvrir les outils de développement (CTRL + SHIFT + I)
  • Sélectionnez l'onglet Editeur de styles
  • Là, vous devriez voir toutes les sources de CSS dans votre document. Vous pouvez désactiver chacun d'eux en cliquant sur l'icône en forme d'œil à côté d'eux.

 White eye icon = enabled; Gray eye icon = disabled

2
Dániel Kis-Nagy

J'ai essayé dans les outils de développement Chrome et la méthode est valide uniquement si les CSS sont inclus en tant que fichiers externes et si cela ne fonctionne pas pour les styles en ligne.

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

Ou

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

Des explications

  1. document.querySelectorAll('link') récupère tous les nœuds de liaison. Cela retournera un tableau d'éléments DOM. Notez que ce n'est pas l'objet Array de javascript. 
  2. Array.prototype.forEach.call(linkElements parcourt les éléments de lien 
  3. element.remove() supprime l'élément du DOM

Résultat en page HTML simple

2
Vetrivel

Pour les pages qui utilisent des CSS externes (la plupart des pages de nos jours), une solution simple et fiable consiste à supprimer l'élément head:

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

Cliquez avec le bouton droit de la souris sur cette page (dans Chrome/Firefox), sélectionnez , inspectez , collez le code dans la console devtools et appuyez sur , puis entrez .

Une version de bookmarklet du même code que vous pouvez coller en tant qu'URL d'un signet:

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

Cliquez maintenant sur le signet dans la barre des favoris pour afficher la page sans aucune feuille de style CSS.

Le retrait de la tête ne fonctionnera pas pour les pages qui utilisent des styles en ligne.

Si vous utilisez Safari sur MacOS, procédez comme suit:

  1. Ouvrez les préférences Safari (cmd+,) et dans l'onglet Avancé, cochez la case "Afficher le menu de développement dans la barre de menus".
  2. Maintenant, dans le menu Développer, vous trouverez une option Désactiver les styles .
2
ccpizza

Sur Firefox, le moyen le plus simple consiste à utiliser la commande Affichage> Style de page> Aucun style. Mais cela désactive également les effets de certains balises HTML de présentation. Donc, utiliser des plugins comme suggéré par @JoelKuiper est généralement préférable; ils offrent plus de flexibilité (par exemple, en désactivant seulement certaines feuilles de style).

1
Jukka K. Korpela

vous pouvez bloquer toute demande (même pour un seul fichier css) émanant de l'inspecteur avec les éléments suivants:
Clic droit> bloquer l'URL de la demande
sans désactiver d'autres fichiers css> https://umaar.com/dev-tips/68-block-requests/ C'est une fonctionnalité standard de l'inspecteur, aucun plugin ni astuce nécessaire

1
Pdor

Lors de l'inspection de HTML avec l'outil de développement de navigateur que vous préférez (par exemple, Chrome Devtools), recherchez l'élément <head> et supprimez-le.

Notez que ceci supprimera aussi js mais pour moi c'est le moyen le plus rapide pour obtenir la page naked .

0
TheodorosPloumis

En fait, c'est plus facile que vous ne le pensez. Dans tous les navigateurs, appuyez sur F12 pour afficher la console de débogage. Cela fonctionne pour IE, Firefox et Chrome. Pas sûr de l'opéra. Puis commentez le CSS dans les fenêtres d'élément. C'est tout.

0
devXen

Toutes les réponses suggérées éliminent simplement le css pour le chargement de cette page. En fonction de votre cas d'utilisation, vous souhaiterez peut-être ne pas charger le fichier css du tout:

Outils de développement Chrome> Onglet Réseau> Faites un clic droit sur la feuille de style en question> Bloquer l'URL de la demande

0
phillyslick