Comment désactiver le 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, le navigateur ne charge parfois que le code HTML sans les informations CSS. Il semble que la page ait été affichée à l’écran. Vous l’avez déjà remarqué 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 veux convertir des CSS externes en ligne. Mais je veux un moyen de désactiver explicitement tous les CSS du navigateur pour que je puisse repositionner mes éléments de manière plus lisible.

Je sais que je peux supprimer les entrées , mais que se passe-t-il si j’ai beaucoup de pages liées?

Le plugin Web Developer pour Firefox et Chrome peut le faire

Une fois que vous avez installé le plug-in, l’option est disponible dans le menu CSS. Par exemple, CSS > Disable Styles > Disable All Styles

Sinon, avec la barre d’outils du développeur activée, vous pouvez appuyer sur Alt+Shift+A

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

  1. Affichez la console du développeur par ctrl-shift-j ou Menu-> Tools-> Developer Console.
  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 sortingangle de divulgation. Clique dessus.
  4. Accédez à → css →
  5. Mettez en surbrillance tout le texte et appuyez sur supprimer.
  6. Rincez et répétez pour chaque feuille de style que vous souhaitez désactiver.

Firefox (Win et Mac)

  • Dans la barre d’outils du menu, choisissez: “Afficher”> “Style de page”> “Aucun style”
  • Via la barre d’outils Web Developer, choisissez: “CSS”> “Désactiver les styles”> “Tous les styles”

Si la barre d’outils Web Dev est installée, les utilisateurs peuvent utiliser les raccourcis clavier suivants: Commande + Maj + S (Mac) et Ctrl + Maj + S (Win)

  • Safari (Mac): Via la barre d’outils du menu, choisissez “Développer”> “Désactiver les styles”
  • Opera (Win): Dans le menu, choisissez “Page”> “Style”> “Mode utilisateur”
  • Chrome (Win): via l’icône d’engrenage, choisissez l’onglet “CSS”> “Désactiver tous les styles”
  • Internet Explorer 8: Dans la barre de menus, choisissez “Affichage”> “Style”> “Aucun style”
  • Internet Explorer 7: via le menu de la barre d’outils IE Developer: Désactiver> Tous les CSS
  • Internet Explorer 6: Via la barre d’outils Web Accessibility, choisissez “CSS”> “Désactiver CSS”

Ce script fonctionne pour moi (chapeau à scrappedcola)

 var el=document.getElementsByTagName('*');for(var i=0;i 

le style en ligne rest intact, bien que

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

Désactiver tous les CSS externes

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

En développant l’idée de scrappedocola / renergy, vous pouvez transformer le JavaScript en un bookmarklet qui s’exécute sur le javascript: uri pour que le code puisse être réutilisé facilement sur plusieurs pages sans avoir à ouvrir les outils de développement ou à conserver quoi que ce soit dans votre presse-papiers.

Il suffit de lancer l’extrait suivant et de faire glisser le lien vers votre barre de favoris / favoris:

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 en surbrillance tout le texte et appuyez sur supprimer.

Cela pourrait être plus facile dans certains cas.

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

J’ai essayé les outils Chrome Developer et la méthode n’est valide que si les CSS sont inclus en tant que fichiers externes et que cela ne fonctionnera 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') obtient tous les nœuds de liaison. Cela retournera un tableau des éléments DOM. Notez que ce n’est pas l’object Array du javascript.
  2. Array.prototype.forEach.call(linkElements parcourt les éléments de lien
  3. element.remove() supprime l’élément du DOM

Résultat dans une page HTML simple

Comme la plupart des réponses semblent assez anciennes, faisant référence à des éléments de menu que je n’arrive pas à trouver dans les versions actuelles des navigateurs les plus courants, 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 Éditeur de style
  • 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 située à côté d’eux.

Icône œil blanc = activé Icône d'oeil gris = désactivé

Pour les pages qui s’appuient sur des CSS externes (la plupart des pages de nos jours), une solution simple et fiable consiste à tuer l’élément principal:

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

Faites un clic droit sur cette page (dans Chrome / Firefox), sélectionnez Inspecter , collez le code dans la console devtools et appuyez sur Entrée .

Une version de bookmarklet du même code que vous pouvez coller comme URL d’un signet:

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

Maintenant, en cliquant sur le signet dans la barre de favoris, vous afficherez la page sans feuilles de style css.

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

Si vous utilisez Safari sur MacOS:

  1. Ouvrez Préférences Safari ( cmd + , ) et dans l’onglet Avancé, cochez la case “Afficher le menu Développement dans la barre de menus”.
  2. Maintenant, sous le menu Développer , vous trouverez une option Désactiver les styles .

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.

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 et supprimez-le du tout.

Notez que cela supprimera également js mais pour moi c’est le moyen le plus rapide pour obtenir la page nue .

Toutes les réponses suggérées éliminent simplement le css pour le chargement de cette page. Selon votre cas d’utilisation, vous pouvez souhaiter ne pas charger le css du tout:

Outils de développement Chrome> Onglet Réseau> Cliquez avec le bouton droit de la souris sur la feuille de style en question> Bloquer l’URL de la requête

vous pouvez bloquer toute demande de l’inspecteur avec un clic droit, même pour les fichiers css> https://umaar.com/dev-tips/68-block-requests/