Jak wyłączyć CSS w przeglądarce do celów testowych

Czy jest jakiś sposób, aby wyłączyć wszystkie zewnętrzne CSS w przeglądarce (Firefox, Chrome ...)?

Podczas korzystania z wolniejszego połączenia internetowego przeglądarka ładuje czasami tylko sam HTML bez informacji CSS. Wygląda na to, że strona została rozłożona na ekranie. Można to zauważyć również w przypadku StackOverflow.

Chcę się upewnić, że moja strona internetowa jest wyświetlana poprawnie, nawet jeśli pliki CSS nie są załadowane.

Nie chodziło mi o to, że chcę przekonwertować zewnętrzny CSS na inline. Ale chcę mieć sposób na jawne wyłączenie wszystkich CSS w przeglądarce, aby móc zmienić położenie moich elementów w lepszy, czytelny sposób.

Wiem, że mogę usunąć wpisy <link rel = 'stylesheet'>, ale co, jeśli mam wiele połączonych stron?

Wtyczka Web Developer dla przeglądarek Firefox i Chrome jest w stanie to zrobić

Po zainstalowaniu wtyczki opcja jest dostępna w menu CSS. Na przykład,CSS > Disable Styles > Disable All Styles

Alternatywnie, gdy włączony jest pasek narzędzi programisty, możesz nacisnąć Alt+Shift+A.

W Chrome / Chromium możesz to zrobić w konsoli programisty.

1. Wywołaj konsolę programisty, naciskając ctrl-shift-j lub Menu-> Tools-> Developer Console.
2. W konsoli programisty przejdź do karty Źródła.
3. W lewym górnym rogu tej zakładki znajduje się ikona z trójkątem rozwijania. Kliknij na to.
4. Przejdź do <domena> → css → <plik css, który chcesz usunąć>
5. Podświetl cały tekst i naciśnij Usuń.
6. Wypłucz i powtórz dla każdego arkusza stylów, który chcesz wyłączyć.

Firefox (Win i Mac)

• Z paska narzędzi menu wybierz: „Widok”> „Styl strony”> „Bez stylu”
• Z paska narzędzi Web Developer wybierz: „CSS”> „Wyłącz style”> „Wszystkie style”

Jeśli jest zainstalowany pasek narzędzi Web Dev, ludzie mogą używać tych skrótów klawiaturowych: Command+ Shift+ S(Mac) i Control+ Shift+ S(Win)

• Safari (Mac): na pasku narzędzi menu wybierz „Opracuj”> „Wyłącz style”
• Opera (Win): z menu wybierz „Strona”> „Styl”> „Tryb użytkownika”
• Chrome (Win): za pomocą ikony koła zębatego wybierz kartę „CSS”> „Wyłącz wszystkie style”
• Internet Explorer 8: na pasku narzędzi menu wybierz „Widok”> „Styl”> „Bez stylu”
• Internet Explorer 7: poprzez menu paska narzędzi programisty IE: Wyłącz> Wszystkie CSS
• Internet Explorer 6: na pasku narzędzi Web Accessibility wybierz „CSS”> „Wyłącz CSS”

Ten skrypt działa dla mnie (końcówka kapelusza do złomowanej coli)

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

styl inline pozostaje jednak nienaruszony

Rozwijając pomysł scrappedocola / renergy, możesz przekształcić JavaScript w bookmarklet, który jest wykonywany w oparciu o javascript:URI, dzięki czemu kod można łatwo ponownie wykorzystać na wielu stronach bez konieczności otwierania narzędzi programistycznych lub przechowywania czegokolwiek w schowku.

Po prostu uruchom następujący fragment i przeciągnij link do paska zakładek / ulubionych:

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

• Unikałbym przeglądania tysięcy elementów na stronie getElementsByTagName('*')i musiałbym sprawdzać i działać na każdym z nich z osobna.
• Unikałbym polegania na jQuery istniejącym na stronie, $('style,link[rel="stylesheet"]').remove()gdy dodatkowy javascript nie jest przytłaczający.

Zainstaluj Adblock Plus, a następnie dodaj *.cssregułę w opcjach filtrów (zakładka filtrów niestandardowych). Metoda ma wpływ tylko na zewnętrzne arkusze stylów . Nie wyłącza stylów wbudowanych.

Wyłącz wszystkie zewnętrzne CSS

Ta metoda robi dokładnie to, o co prosiłeś.

Kolejny sposób na osiągnięcie rozwiązania @David Baucum w mniejszej liczbie kroków:

1. Kliknij prawym przyciskiem myszy -> sprawdź element
2. Kliknij nazwę arkusza stylów, który ma wpływ na twój element (po prawej stronie deklaracji)
3. Podświetl cały tekst i naciśnij Usuń.

W niektórych przypadkach może być wygodniejszy.

Ponieważ większość odpowiedzi wydaje się być tutaj dość stara, odwołując się do elementów menu, których nie mogę znaleźć w aktualnych wersjach popularnych przeglądarek, oto jak to zrobić w aktualnej wersji w Firefox Developer Edition:

• Otwórz narzędzia programistyczne ( CTRL + SHIFT + I)
• Wybierz kartę Edytor stylów
• Tam powinieneś zobaczyć wszystkie źródła CSS w swoim dokumencie. Możesz wyłączyć każdy z nich, klikając ikonę oka obok nich.

W przypadku stron, które opierają się na zewnętrznym CSS (obecnie większość stron) prostym i niezawodnym rozwiązaniem jest zabicie headelementu:

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

Kliknij tę stronę prawym przyciskiem myszy (w przeglądarce Chrome / Firefox), wybierz opcję Sprawdź , wklej kod w konsoli devtools i naciśnij klawisz Enter .

Wersja bookmarkletu tego samego kodu, który możesz wkleić jako adres URL zakładki:

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

Teraz kliknięcie zakładki na pasku ulubionych spowoduje wyświetlenie strony bez arkuszy stylów CSS.

Usunięcie nagłówka nie zadziała w przypadku stron, które używają stylów wbudowanych.

Jeśli używasz Safari na MacOS, to:

1. Otwórz Preferencje Safari ( cmd+ ,) i na karcie Zaawansowane zaznacz pole wyboru „Pokaż menu rozwijania na pasku menu”.
2. Teraz w menu Develop znajdziesz opcję Disable Styles .

Wypróbowałem w narzędziach programistycznych Chrome i metoda jest poprawna tylko wtedy, gdy CSS są dołączone jako pliki zewnętrzne i nie będzie działać dla stylów wbudowanych.

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

Lub

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

Wyjaśnienia

1. document.querySelectorAll('link')pobiera wszystkie węzły łącza. To zwróci tablicę elementów DOM. Zauważ, że to nie jest obiekt Array w javascript.
2. Array.prototype.forEach.call(linkElements pętle przez elementy łącza
3. element.remove() usuwa element z DOM

Wynik w postaci zwykłej strony HTML

możesz zablokować dowolne żądanie (nawet dla pojedynczego pliku css) od inspektora w następujący sposób:
    Kliknij prawym przyciskiem myszy> zablokuj adres URL żądania
bez wyłączania innych plików css> https://umaar.com/dev-tips/68-block-requests/ To standardowa funkcja inspektora, bez wtyczek ani sztuczek

W przeglądarce Firefox najprostszym sposobem jest użycie polecenia menu Widok> Styl strony> Brak stylu. Ale to również wyłącza efekty niektórych prezentacyjnych znaczników HTML. Dlatego używanie wtyczek, jak sugeruje @JoelKuiper, jest zwykle lepsze; dają większą elastyczność (np. wyłączając tylko niektóre arkusze stylów).

Właściwie to łatwiejsze niż myślisz. W dowolnej przeglądarce naciśnij klawisz F12, aby wywołać konsolę debugowania. Działa to w przeglądarkach IE, Firefox i Chrome. Nie jestem pewien co do Opery. Następnie zakomentuj CSS w oknach elementów. Otóż ​​to.

Podczas przeglądania HTML za pomocą preferowanego narzędzia Browser Development (np. Chrome Devtools) znajdź <head>element i usuń go w ogóle.

Zauważ, że spowoduje to również usunięcie pliku js, ale dla mnie jest to najszybszy sposób na rozebranie strony .

Wszystkie sugerowane odpowiedzi po prostu eliminują css dla tego ładowania strony. W zależności od przypadku użycia możesz w ogóle nie ładować css:

Narzędzia Chrome Dev Tools> karta Sieć> kliknij prawym przyciskiem myszy arkusz stylów, którego dotyczy problem,> zablokuj adres URL żądania

Dla tych, którzy nie chcą żadnej wtyczki ani innych rzeczy, możemy użyć document.styleSheets, aby wyłączyć / włączyć css.

// kod wyłączający wszystkie css

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

Jeśli używasz Chrome, możesz utworzyć funkcję i dodać do swoich fragmentów. Abyś mógł używać konsoli do włączania / wyłączania CSS dla dowolnych witryn.

// Snippets -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// w konsoli

disableCss() // by default is disable
disableCss(false) // to enable