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

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

---

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

느린 인터넷 연결을 사용하는 경우 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"> "스타일 비활성화"> "모든 스타일"을 선택하십시오.

Web Dev Toolbar가 설치되어 있으면 사람들은 다음 단축키를 사용할 수 있습니다. Command+ Shift+ S(Mac) 및 Control+ Shift+ S(Win)

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

---

이 스크립트는 저에게 효과적입니다 (스크랩 된 콜라 팁)

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 에 대해 실행 되는 책갈피로 변환 하여 dev 도구를 열거 나 클립 보드에 아무것도 보관하지 않고도 여러 페이지에서 코드를 쉽게 재사용 할 수 있습니다.

다음 스 니펫을 실행하고 링크를 북마크 / 즐겨 찾기 모음으로 드래그하십시오.

<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)
• Select the Style Editor tab
• There you should see all sources of CSS in your document. You can disable each of them by clicking the eye icon next to them.

---

For pages that rely on external CSS (most pages nowadays) a simple and reliable solution is to kill the head element:

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

Right-click this page (in Chrome/Firefox), select Inspect, paste the code in the devtools console and press Enter.

A bookmarklet version of the same code that you can paste as the URL of a bookmark:

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

Now clicking the bookmark on in your Favorites bar will show the page without any css stylesheets.

Removing the head will not work for pages that use inline styles.

If you happen to use Safari on MacOS then:

1. Open Safari Preferences (cmd+,) and in the Advanced tab enable the checkbox "Show Develop menu in menu bar".
2. Now under the Develop menu you will find a Disable Styles option.

---

I tried in Chrome Developer tools and the method is valid only if the CSS are included as external files and it won't work for inline styles.

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

Or

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

Explanations

1. document.querySelectorAll('link') gets all the link nodes. This will return array of DOM elements. Note that this is not Array object of javascript.
2. Array.prototype.forEach.call(linkElements loops through the link elements
3. element.remove() removes the element from the DOM

Resulting in plain HTML page

---

On Firefox, the simplest way is via the menu command View > Page Style > No Style. But this also switches off the effects of some presentational HTML markup. So using plugins as suggested by @JoelKuiper is usually better; they give more flexibility (e.g., switching off just some style sheets).

---

you can block any request (even for a single css file) from inspector with the following:
    Right click > block request URL
without disabling other css files > https://umaar.com/dev-tips/68-block-requests/ It's a standard inspector feature, no plugins or tricks needed

---

Actually, it's easier than you think. In any browsers press F12 to bring up the debug console. This works for IE, Firefox, and Chrome. Not sure about Opera. Then comment out the CSS in the element windows. That's it.

---

While inspecting HTML with the Browser Development tool you prefer (eg Chrome Devtools) find the <head> element and delete it at all.

Notice that this will also remove js but for me it is the fastest way to get the page naked.

---

All the suggested answers merely eliminate the css for that page load. Depending on your use-case, you may wish to not load the css at all:

Chrome Dev Tools > Network Tab > Right click on stylesheet in question > block request url

참고URL : https://stackoverflow.com/questions/14046738/how-to-disable-css-in-browser-for-testing-purposes