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

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:

  Remove Styles  

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.

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/