테스트 목적으로 브라우저에서 CSS를 비활성화하는 방법

브라우저 (Firefox, Chrome ...)에서 모든 외부 CSS를 비활성화 할 수있는 방법이 있습니까?

느린 인터넷 연결을 사용하는 경우 CSS 정보없이 브라우저에서 베어 HTML 만로드하는 경우가 있습니다. 페이지가 화면에 그대로 놓인 것 같습니다. StackOverflow에서도 이것을 눈치 채 셨을 것입니다.

CSS 파일이로드되지 않은 경우에도 내 웹 페이지가 정상적으로 표시되는지 확인하고 싶습니다.

외부 CSS를 인라인으로 변환하고 싶다는 뜻은 아닙니다. 하지만 브라우저에서 모든 CSS를 명시 적으로 비활성화하여 더 좋고 읽기 쉬운 방식으로 요소의 위치를 ​​변경할 수있는 방법을 원합니다.

<link rel = 'stylesheet'> 항목을 삭제할 수 있다는 것을 알고 있지만 링크 된 페이지가 많은 경우 어떻게해야합니까?

Firefox 및 Chrome 용 웹 개발자 플러그인 은이 작업을 수행 할 수 있습니다.

플러그인을 설치하면 CSS 메뉴에서 옵션을 사용할 수 있습니다. 예를 들면CSS > Disable Styles > Disable All Styles

또는 개발자 도구 모음이 활성화 된 상태에서를 누를 수 있습니다 Alt+Shift+A.

Chrome / Chromium에서는 개발자 콘솔에서이 작업을 수행 할 수 있습니다.

1. ctrl-shift-j 또는 메뉴-> 도구-> 개발자 콘솔로 개발자 콘솔을 불러옵니다.
2. 개발자 콘솔에서 소스 탭으로 이동합니다.
3. 이 탭의 왼쪽 상단 모서리에는 펼침 삼각형이있는 아이콘이 있습니다. 그것을 클릭하십시오.
4. <도메인> → css → <제거 할 css 파일>을 찾습니다.
5. 모든 텍스트를 강조 표시하고 삭제를 누르십시오.
6. 비활성화하려는 각 스타일 시트에 대해 헹구고 반복합니다.

Firefox (Win 및 Mac)

• 메뉴 도구 모음을 통해 "보기"> "페이지 스타일"> "스타일 없음"을 선택합니다.
• 웹 개발자 도구 모음을 통해 "CSS"> "스타일 비활성화"> "모든 스타일"을 선택합니다.

웹 개발자 도구 모음이 설치되어있는 경우 다음 키보드 단축키를 사용할 수 있습니다. Command+ Shift+ S(Mac) 및 Control+ Shift+ S(Win)

• Safari (Mac) : 메뉴 도구 모음에서 "개발"> "스타일 비활성화"를 선택합니다.
• Opera (Win) : 메뉴에서 "페이지"> "스타일"> "사용자 모드"를 선택합니다.
• Chrome (Win) : 톱니 바퀴 아이콘을 통해 "CSS"탭> "모든 스타일 비활성화"를 선택합니다.
• Internet Explorer 8 : 메뉴 도구 모음을 통해 "보기"> "스타일"> "스타일 없음"을 선택합니다.
• Internet Explorer 7 : IE 개발자 도구 모음 메뉴를 통해 : 비활성화> 모든 CSS
• Internet Explorer 6 : 웹 접근성 도구 모음을 통해 "CSS"> "CSS 비활성화"를 선택합니다.

이 스크립트는 나를 위해 작동합니다 (모자 팁을 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]); };

인라인 스타일은 그대로 유지됩니다.

scrappedocola / renergy의 아이디어를 확장하면 JavaScript를javascript: uri 에 대해 실행 되는 북마크릿으로 전환 할 수 있으므로 개발 도구를 열거 나 클립 보드에 아무것도 보관하지 않고도 코드를 여러 페이지에서 쉽게 재사용 할 수 있습니다.

다음 스 니펫을 실행하고 링크를 북마크 / 즐겨 찾기 표시 줄로 드래그하세요.

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

• 페이지에있는 수천 개의 요소를 반복하는 것을 피하고 getElementsByTagName('*')각각을 개별적으로 확인하고 조치를 취해야합니다.
• $('style,link[rel="stylesheet"]').remove()여분의 자바 스크립트가 압도적으로 번거롭지 않을 때 페이지에 존재하는 jQuery에 의존하는 것을 피할 것 입니다.

Adblock Plus를 설치 한 다음 *.css필터 옵션 (사용자 정의 필터 탭)에서 규칙 을 추가 하십시오. 이 메서드는 외부 스타일 시트 에만 영향을줍니다 . 인라인 스타일을 끄지 않습니다.

모든 외부 CSS 비활성화

이 방법은 당신이 요청한 것을 정확하게 수행합니다.

@David Baucum의 솔루션 을 더 적은 단계 로 달성하는 또 다른 방법 :

1. 마우스 오른쪽 버튼 클릭-> 요소 검사
2. 요소에 영향을 미치는 스타일 시트의 이름을 클릭합니다 (선언의 오른쪽에 있음).
3. 모든 텍스트를 강조 표시하고 삭제를 누르십시오.

어떤 경우에는 더 편리 할 수 ​​있습니다.

대부분의 답변은 여기에서 꽤 오래된 것 같습니다. 인기있는 브라우저의 현재 버전에서 찾을 수없는 메뉴 항목을 참조하면 다음과 같이 Firefox Developer Edition의 현재 버전에서 수행하는 방법이 있습니다.

• 개발자 도구 열기 ( CTRL + SHIFT + I)
• 스타일 편집기 탭을 선택하십시오.
• 문서에서 CSS의 모든 소스를 볼 수 있습니다. 옆에있는 눈 아이콘을 클릭하여 각각을 비활성화 할 수 있습니다.

외부 CSS (요즘 대부분의 페이지)에 의존하는 페이지의 경우 간단하고 안정적인 솔루션은 head요소 를 죽이는 것입니다 .

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

이 페이지 (Chrome / Firefox)를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택한 다음 devtools 콘솔에 코드를 붙여넣고 Enter 키를 누릅니다 .

북마크 URL로 붙여 넣을 수있는 동일한 코드의 북마크릿 버전 :

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

이제 즐겨 찾기 모음에서 북마크를 클릭하면 CSS 스타일 시트가없는 페이지가 표시됩니다.

인라인 스타일을 사용하는 페이지에서는 헤드 제거가 작동하지 않습니다.

MacOS에서 Safari를 사용하는 경우 :

1. Safari 환경 설정 ( cmd+ ,)을 열고 고급 탭에서 "메뉴 막대에 개발 메뉴 표시"체크 상자를 활성화하십시오.
2. 이제 개발 메뉴에서 스타일 비활성화 옵션을 찾을 수 있습니다.

Chrome 개발자 도구에서 시도한 결과 CSS가 외부 파일로 포함되어 있고 인라인 스타일에서 작동하지 않는 경우에만 방법이 유효합니다.

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

또는

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

설명

1. document.querySelectorAll('link')모든 링크 노드를 가져옵니다. 이것은 DOM 요소의 배열을 반환합니다. 이것은 javascript의 Array 객체가 아닙니다.
2. Array.prototype.forEach.call(linkElements 링크 요소를 통해 루프
3. element.remove() DOM에서 요소를 제거합니다.

일반 HTML 페이지 결과

: 당신은 다음과 관리자에서 (심지어 하나의 CSS 파일에 대한) 모든 요청 차단할 수 있습니다
    오른쪽 클릭> 블록 요청 URL을
> 다른 CSS 파일을 해제하지 않고 https://umaar.com/dev-tips/68-block-requests/ 그것은이다 표준 인스펙터 기능, 플러그인이나 트릭 필요 없음

Firefox에서 가장 간단한 방법은보기> 페이지 스타일> 스타일 없음 메뉴 명령을 사용하는 것입니다. 그러나 이것은 또한 일부 표현 HTML 마크 업의 효과를 끕니다. 따라서 @JoelKuiper가 제안한대로 플러그인을 사용하는 것이 일반적으로 더 좋습니다. 더 많은 유연성을 제공합니다 (예 : 일부 스타일 시트 만 끄기).

사실 생각보다 쉽습니다. 모든 브라우저에서 F12를 눌러 디버그 콘솔을 불러옵니다. 이것은 IE, Firefox 및 Chrome에서 작동합니다. Opera에 대해 잘 모르겠습니다. 그런 다음 요소 창에서 CSS를 주석 처리합니다. 그게 다야.

선호하는 브라우저 개발 도구 (예 : Chrome Devtools)로 HTML을 검사하는 동안 <head>요소를 찾아 전혀 삭제합니다.

이것은 또한 js를 제거 하지만 나에게는 페이지를 알몸 으로 만드는 가장 빠른 방법 입니다.

제안 된 모든 답변은 해당 페이지로드에 대한 CSS 만 제거합니다. 사용 사례에 따라 CSS를 전혀로드하지 않는 것이 좋습니다.

Chrome 개발자 도구> 네트워크 탭> 해당 스타일 시트를 마우스 오른쪽 버튼으로 클릭> 요청 URL 차단

플러그인이나 다른 것들을 원하지 않는 사람들을 위해 document.styleSheets를 사용하여 CSS를 비활성화 / 활성화 할 수 있습니다.

// 모든 CSS를 비활성화하는 코드

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

크롬을 사용하는 경우 함수를 생성하고 스 니펫에 추가 할 수 있습니다. 따라서 콘솔을 사용하여 모든 사이트에 대한 CSS를 활성화 / 비활성화 할 수 있습니다.

// 스 니펫-> DisableCSS

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

// 콘솔

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