Chrome에서 스타일없이 웹 페이지를 볼 수있는 방법이 있습니까?
답변:
모든 CSS 스타일 시트 비활성화
대부분의 최신 페이지는에 포함 된 외부 CSS 파일의 모든 스타일을 정의 <head>하므로 head태그를 제거하면 모든 스타일이 효과적으로 제거됩니다 (명시적인 인라인 스타일 및 스크립트에서 설정 한 스타일 제외). 페이지를 마우스 오른쪽 버튼으로 클릭 하고 상황에 맞는 메뉴에서 검사 를 선택한 후 콘솔 탭에 붙여 넣습니다.
document.head.parentNode.removeChild(document.head);그리고 여기 책갈피의 URL로 붙여 넣을 수 있습니다 위의 코드의 북마크 버전입니다 (와 크롬의 북마크 바 토글 ⌘+ shift+ b맥 또는 ctrl+ shift+ b리눅스 / 윈도우에서) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()위의 코드를 주소 표시 줄에 직접 입력 할 수도 있지만 답을 찾기 전에 답변 끝 부분의 메모를 읽으십시오. .
헤드 태그를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴를 통해 삭제하여 <head>devtools 요소 탭 에서 제거 할 수도 있습니다 .
참고 : head 태그를 제거하면 모든 스타일, 자바 스크립트, 웹 글꼴 등이 종료되고 페이지 내용이 자바 스크립트로 렌더링되면 빈 페이지가 생길 수 있으므로 무차별 한 접근 방식입니다. 대부분의 사이트에서 예상되는 결과를 얻을 수 있습니다.
보다 빈번한 사용 사례는 페이지에서 색상, 여백, iframe 등과 같은 성가신 것들을 제거하는 것입니다. 이러한 경우 다음 책갈피 중 하나가보다 세밀한 제어를 제공합니다.
색상, 배경, 여백, 패딩, 너비 제거
책갈피를 작성하고 다음 스 니펫을 URL로 추가하십시오.
javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()이제 북마크 를 클릭하여 현재 페이지의 CSS 스타일을보다 읽기 쉬운 것으로 정리할 수 있습니다.
참고 : 실제로 페이지에 태그
<style>내부 에 블록 이있을<body>수 있습니다. HTML5 표준은이를 허용하며 대부분의 브라우저가이를 지원합니다. 지금까지 이것은 일반적인 관행은 아니지만 웹 프레임 워크가 발전함에 따라 향후 웹에서 더 많은 '로컬 스타일 시트'가 나타날 수 있습니다.
가독성을 높이려면 모든 CSS를 비활성화하면 최상의 경험을 제공하지 못할 수 있습니다. 이러한 경우 아래의 북마크가 더 나은 결과를 제공 할 수 있습니다.
스크롤하지 않는 머리글 / 바닥 글 제거 (읽기 영역 증가)
javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()iframe 제거 (대부분의 배너 등을 죽임)
javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29이것은 또한 임베디드 비디오, 댓글 위젯 등을 대부분 죽입니다.
모든 이미지 제거 (사무실 모드 탐색)
javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();참고 : 대부분의 배너 이미지는 일반적으로 iframe 안에 있으며이 책갈피는 최상위 문서에서만 작동하므로이 이미지는 위의 iframe 제거 와 함께 사용해야 합니다.
북마크는 광고 차단기를 사용할 때 콘텐츠를 표시하지 않는 사이트에도 사용할 수 있습니다.
당신이 사용할 수있는 북마크 빌더 코드합니다 (unminify하는 형식 , 버튼) 편집은 사용자의 요구에 맞게, 다시합니다 (그것을 작게를 압축 버튼) 북마크 URL로 붙여 넣을 수 있습니다 뭔가.
위에 나열된 북마크는 iOS 및 Android의 대부분의 모바일 웹 브라우저에서도 작동합니다. 모바일 브라우저는 주소 표시 줄에서 자바 스크립트를 실행하지 않지만 책갈피를 추가하고 js 코드를 URL로 붙여
clean넣은 다음 레이블을 설정 한 다음 책갈피 메뉴에서 항목을 눌러 실행할 수 있습니다 (IOS 사파리) 또는clean주소 표시 줄에 입력 한 다음 자동 제안 드롭 다운에서 해당 책갈피를 누릅니다. 이렇게하면 읽기 모드 가없는 페이지의 가독성이 향상 될 수 있습니다 .참고 : 위의 북마크를 복사하여 주소 표시 줄에 직접 붙여 넣으면 브라우저에서
javascript:접두사가 제거되는 것을 알 수 있습니다. 이는 브라우저 보안 기능이므로 주소 표시 줄에서 북마크를 직접 테스트하려면 다음을 수행하십시오.javascript:js 코드 앞에 수동으로 추가 해야합니다.
크롬 확장
크롬 확장 프로그램을 찾고 있다면 CSS 열을 클릭하여 모든 CSS 및 스타일을 비활성화 할 수있는 uMatrix 가 있으며 웹 개발자 는 CSS 탭 아래에서 모든 스타일 비활성화 옵션이 있습니다 .
이를 위해 웹 개발자 확장을 사용할 수 있습니다 .
Chrome 버전의 No Style (아직?)이 없으므로 스타일을 사용 중지 할 수 있는 다른 확장 프로그램 과 같은 다른 방법 을 사용해야 합니다.
스타일 시트 사용 안함 확장을 사용하여 일반적으로 스타일 시트를 사용 안함 으로 설정하거나 웹 개발자 확장을 사용하여 모든 스타일을 켜거나 끌 수 있습니다. 또한 Pendule 은 이러한 목적으로 널리 사용되는 확장 기능입니다.
개발자 도구 [1] [2]로 스타일을 비활성화 할 수도 있습니다 .
톱니 바퀴 아이콘-> CSS 탭-> 모든 스타일 비활성화
속도 이유로이 작업을 수행하는 경우 대안을 제안 할 수 있습니까? 링크 2
브라우저가 열리면 g가고 싶은 URL을 누르고 입력하십시오. 이 브라우저는 지원하는 표준에 비추어 있지만 아주 오래된 PC에서도 놀라 울 정도로 빠릅니다.
Firefox에서보기-> 페이지 스타일-> 스타일 없음을 사용하면 스타일이없는 페이지를 볼 수 있습니다. 과도하게 JS / 스타일 시트 종속 사이트 (예 : Lifehacker)에 도움이됩니다. Google의 Chrome에 유사한 기능이 있습니까? 또는 어디에서 액세스 할 수 있습니까? 버전 19.0.1084.56 / 우분투. -에드워드 모르 비우스 박사
...
예. 현재 세션에서 스타일 시트를 끄면 충분합니다. 모든 사이트에서 CSS, JS, 쿠키 등을 전환하는 것은 당연합니다. 불행히도 그것은 일어나고있는 것처럼 보입니다. 나는 그 경험을 "약간 성가신"것으로 묘사했다. -에드워드 모르 비우스 박사
console(Chromium / Chrome, Firefox, Opera) 에서 jQuery 라이브러리를 사용하면 HTML 문서에서 제작자 스타일을 지워야합니다.
(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()
https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js
HTML 문서에서 스타일을 켜거나 끄려면 다음이 도움이 될 수 있습니다.
https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js
로컬 파일 또는 jQuery의 CDN에서 jQuery를 문서에로드하고 성공을 기록하고 스타일 상태를 기록하며 스페이스 바 키 다운 또는 콘솔에서 작성자 스타일을 설정 또는 해제합니다.
로컬 및 온라인 HTML 문서 모두에 대해 Chromium / Chrome, Firefox 및 Opera에서 테스트되었습니다.
현재 내가 선호하는 도구는 uMatrix browser extension 이며, 현재 웹 사이트를 기준으로 도메인을로드하여 CSS, JS, 이미지 또는 기타 기능을 비활성화 할 수 있습니다. 변경 사항을 쉽게 토글하거나 영구적으로 만들거나 기본 규칙으로 캐스트 할 수 있습니다.
이것과 스타일리쉬 한 대부분의 독자적인 사용자 정의 요구를 해결합니다. Reader-Mode (Firefox)는 균일 한 스타일의 컨텐츠를 상당히 안정적으로 제공하는 경향이 있습니다.
질문 확장 : Chrome / Android에서 실행 가능한 옵션이 없으며 위에서 제안한 솔루션이 작동하지 않습니다.
한 줄의 jquery 코드 만 사용하십시오.
jQuery("head").empty();
또는 자바 스크립트에서 사용할 수 있습니다
document.getElementsByTagName("head")[0].innerText="";
웹 페이지로 이동 한 다음 ctrl + shift + i를 누르면 메뉴 선택 콘솔이 표시 document.getElementsByTagName("head")[0].innerText="";되고이 코드를 붙여 넣은 다음 Enter 키를 누릅니다
document.getElementsByTagName("head")[0].innerText="";