Есть ли способ просмотреть веб-страницу без стилей в Chrome?

25

В Firefox «Просмотр» -> «Стиль страницы» -> «Без стиля» позволяет просматривать не стилевую страницу. Полезно для некоторых сайтов, зависящих от JS / таблиц стилей (например, Lifehacker).

Есть ли подобная функциональность в Google Chrome, и / или где я могу получить к ней доступ?

Версия 19.0.1084.56 / Ubuntu.

google-chrome css dredmorbius
источник
Лучший обходной путь для этого в Chrome - использовать Firefox.
wha7ever - Восстановить Монику

Ответы:

25

Отключить все таблицы стилей CSS

Учитывая, что большинство современных страниц определяют все стили во внешних CSS-файлах, которые включены в <head>, удаление headтега эффективно удалит все стили (кроме явных встроенных стилей и стилей, установленных скриптами). Щелкните правой кнопкой мыши страницу, выберите « Проверка» в контекстном меню и вставьте ее на вкладку «Консоль»:

document.head.parentNode.removeChild(document.head);

А вот версия вышеприведенного кода в виде букмарклета, которую можно вставить в качестве URL-адреса закладки (переключить панель закладок в Chrome с помощью ⌘+ shift+ bна Mac или ctrl+ shift+ bв Linux / Windows) :

javascript:(function(){document.head.parentNode.removeChild(document.head);})()

Вы также можете ввести указанный выше код непосредственно в адресную строку, но перед тем, как это сделать, прочитайте примечание в конце ответа. ,

Удаление <head>также можно выполнить на вкладке Элементы devtools , щелкнув правой кнопкой мыши тег заголовка и удалив его через контекстное меню:

удалить тег головы в Chrome

ПРИМЕЧАНИЕ. Удаление тега head - это всего лишь грубый метод, поскольку он убивает все стили, javascript, веб-шрифты и т. Д., И если содержимое страницы отображается с помощью javascript, то, скорее всего, вы получите пустую страницу. На большинстве сайтов это, вероятно, даст вам ожидаемые результаты.

Более частый вариант использования - удаление определенных раздражающих вещей на странице, таких как цвета, поля, фреймы и т. Д. В этом случае один из следующих букмарклетов обеспечит более детальный контроль.

Удалить цвета, фоны, поля, отступы, ширину

Создайте закладку и добавьте следующий фрагмент в качестве 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);}}})()

Удалить iframes (убивает большинство баннеров и т. Д.)

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';}})();

Примечание: это нужно использовать в сочетании с вышеупомянутым удалением iframes , так как большинство изображений баннера обычно находятся внутри iframes, и этот букмарклет работает только с документом верхнего уровня.

Букмарклеты также можно использовать для сайтов, которые не будут отображать контент при использовании блокировщиков рекламы.

Вы можете использовать Bookmarklet Builder для объединения кода ( кнопка « Формат» ), редактирования его в соответствии с вашими потребностями и минимизации его возврата ( кнопка « Сжать» ), чтобы вы могли вставить его в качестве URL-адреса закладки.

Перечисленные выше букмарклеты также будут работать в большинстве мобильных веб-браузеров на iOS и Android. Мобильные браузеры не будут запускать javascript из адресной строки, но вы можете добавить закладку, вставить код js в качестве URL-адреса, установить метку, например clean, а затем запустить ее, коснувшись пункта в меню закладок (для сафари IOS) или набрав cleanв адресной строке, а затем коснувшись соответствующей закладки в выпадающем списке. Это может улучшить читаемость страниц, которые не имеют режима чтения .

ПРИМЕЧАНИЕ. Если вы скопируете и вставите вышеуказанные букмарклеты непосредственно в адресную строку, вы заметите, что браузеры удаляютjavascript: префикс - это функция безопасности браузера, поэтому, если вы хотите протестировать букмарклеты непосредственно из адресной строки, нужно предварительно подготовить javascript:вручную перед кодом JS.

Расширения Chrome

Если вы ищете расширение Chrome, то есть uMatrix, где вы можете щелкнуть столбец CSS, чтобы отключить все CSS и стили, и Web Developer, где на вкладке CSS у вас есть опция Отключить все стили .

ccpizza
источник
uMatrix (который я независимо обнаружил за прошедшие годы) на самом деле делает свое дело, в зависимости от сайта (или страницы, или домена). Веб-разработчик (упомянутый ниже) слишком усердствует.
dredmorbius
7

Вы можете использовать расширение Web Developer для этого:

введите описание изображения здесь

Der Hochstapler
источник
2
Спасибо. Это, кажется, делает трюк. Хотя Lifehacker до сих пор не читается. Работает в w3m, хотя. Старая школа, как мы катимся здесь.
dredmorbius
Хмм. Проблема в том, что это глобальная настройка для всех сайтов / страниц. Я только что прошел через несколько моментов "WTF !!!" внезапно я начал видеть, как элементы стиля появляются / исчезают с разных страниц, когда я переключаю различные настройки веб-разработчика. Так что это несколько, но не совсем, полезно.
dredmorbius
@ Dr.EdwardMorbius: странно. Для меня это только временно. Даже обновление страницы возвращается к стандартному виду сайта. Но я полагаю, это не то, что вы хотите, не так ли?
Der Hochstapler
Да. Отключение таблицы стилей для текущего сеанса будет достаточно. Переключение CSS, JS, куки и т. Д. Для всех сайтов - прямо сейчас. К сожалению, похоже, что это происходит. Я бы описал этот опыт как «слегка раздражающий».
dredmorbius
2

Нет версии Chrome No Style (пока?), Поэтому вам придется использовать другой метод , например, некоторые другие расширения, которые могут отключать стили.

Вы можете использовать расширение Disable Stylesheets, чтобы отключить таблицы стилей в целом, или расширение Web Developer, чтобы включить или выключить все стили. Pendule также является популярным расширением для этой цели.

Вы также можете отключить стили с помощью инструментов разработчика [1] [2] :

Значок шестеренки -> Вкладка CSS -> Отключить все стили

Synetech
источник
Это похоже на отключение всех таблиц стилей для всех страниц, без возможности включить / отключить их на данной странице. Не то, что я ищу.
dredmorbius
Который из? Там четыре варианта.
Synetech
Я не вижу значок расширения. Удалил это.
dredmorbius
А?
Synetech
В области уведомлений справа от окна URL не было значка для расширения «Отключить таблицы стилей». Единственный способ, которым я мог управлять настройками, - это перемещаться по Wrench -> Tools -> Extensions -> Disable Stylesheets -> Options. Не ... очень эргодинамично.
dredmorbius
1

Если вы делаете это по соображениям скорости, могу ли я предложить альтернативу: Ссылки 2

Когда браузер откроется, нажмите gи введите URL-адрес, на который вы хотите перейти. Этот браузер прост в использовании поддерживаемых стандартов, но удивительно быстр даже на очень старых ПК.

Gerry
источник
1
Это скорее конфиденциальность / минимальное использование JS. Я предпочитаю предпочитать w3m семейству консольных браузеров links / elinks - лучшая эргономика, и я к этому довольно привык. Да, я действительно хорошо знаю, насколько быстрыми и легкими могут быть консольные браузеры. Хотя некоторые сайты просто сломаны.
dredmorbius
1
Попался. Я на самом деле не использую консольную версию, но графический интерфейс так же быстро. Но да, вы правы, иногда страницы очень разбиты. Было бы здорово, если бы все страницы изящно деградировали.
Джерри
2
Мне известно, что в крайних случаях я прибегал к lynx, некоторому sed и fmt. Это заставляет младенца Иисуса плакать.
dredmorbius
1

В Firefox «Просмотр» -> «Стиль страницы» -> «Без стиля» позволяет просматривать не стилевую страницу. Полезно для некоторых сайтов, зависящих от JS / таблиц стилей (например, Lifehacker). Есть ли подобная функциональность в Google Chrome, и / или где я могу получить к ней доступ? Версия 19.0.1084.56 / Ubuntu. - Доктор Эдвард Морбиус

...

Да. Отключение таблицы стилей для текущего сеанса будет достаточно. Переключение CSS, JS, куки и т. Д. Для всех сайтов - прямо сейчас. К сожалению, похоже, что это происходит. Я бы описал этот опыт как «слегка раздражающий». - Доктор Эдвард Морбиус

Используя библиотеку jQuery, в console(Chromium / Chrome, Firefox, Opera) следует удалить авторские стили из документа 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, регистрирует успех, регистрирует статус стиля, включает или выключает авторские стили с помощью клавиши пробела или на консоли.

Протестировано в Chromium / Chrome, Firefox и Opera для локальных и онлайн-документов HTML.

guest271314
источник
1

В настоящее время моим предпочтительным инструментом для этого является расширение браузера uMatrix , которое позволяет даже более мелкие элементы управления: отключать CSS, JS, изображения или другие функции, загружая домен по сравнению с существующим веб-сайтом. Изменения могут быть легко переключены, сделаны постоянными или приведены в качестве правил по умолчанию.

Это стильное решение для большинства моих потребностей в настройке читателя. Reader-Mode (Firefox) имеет тенденцию давать равномерно стилизованный контент достаточно надежно.

Расширение вопроса: на Chrome / Android у меня нет жизнеспособного варианта, и предложенные выше решения не работают.

dredmorbius
источник
0

JQuery код только одна строка ... использовать 

jQuery("head").empty();

или в javascripts вы можете использовать 

document.getElementsByTagName("head")[0].innerText="";

перейдите на свою веб-страницу и затем нажмите Ctrl + Shift + I, вы увидите меню выбора консоли и вставьте этот document.getElementsByTagName("head")[0].innerText="";код, а затем нажмите Enter

Вишал Чоудхары
источник
2
Где эта информация будет введена?
music2myear
перейдите на свою веб-страницу и затем нажмите Ctrl + Shift + I, вы увидите меню выбора консоли и вставьте этот document.getElementsByTagName("head")[0].innerText="";код, а затем нажмите Enter
Vishal Choudhary
Не нужно читать комментарии, чтобы понять ответ. Пожалуйста, используйте кнопку ПРАВКА, чтобы добавить эту информацию к самому ответу.
music2myear