В Firefox «Просмотр» -> «Стиль страницы» -> «Без стиля» позволяет просматривать не стилевую страницу. Полезно для некоторых сайтов, зависящих от JS / таблиц стилей (например, Lifehacker).
Есть ли подобная функциональность в Google Chrome, и / или где я могу получить к ней доступ?
Версия 19.0.1084.56 / Ubuntu.
Учитывая, что большинство современных страниц определяют все стили во внешних 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», щелкнув правой кнопкой мыши тег head и удалив его через контекстное меню:
ПРИМЕЧАНИЕ. Удаление тега 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);}}})()
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 , так как большинство изображений баннера обычно находятся внутри iframes, и этот букмарклет работает только с документом верхнего уровня.
Букмарклеты также можно использовать для сайтов, которые не будут отображать контент при использовании блокировщиков рекламы.
Вы можете использовать Bookmarklet Builder для объединения кода (кнопка « Формат» ), редактирования его в соответствии с вашими потребностями и минимизации его возврата (кнопка « Сжать» ), чтобы вы могли вставить его в качестве URL-адреса закладки.
Перечисленные выше букмарклеты также будут работать в большинстве мобильных веб-браузеров на iOS и Android. Мобильные браузеры не будут запускать javascript из адресной строки, но вы можете добавить закладку, вставить код js в качестве URL-адреса, установить метку, например,
clean, а затем запустить ее, коснувшись пункта в меню закладок (для IOS-сафари ) или введитеcleanв адресной строке, а затем коснитесь соответствующей закладки в раскрывающемся списке автозаполнения. Это может улучшить читаемость страниц, которые не имеют режима чтения.ПРИМЕЧАНИЕ. Если вы скопируете и вставите вышеуказанные закладки прямо в адресную строку, вы заметите, что браузеры удаляют префикс
javascript:это функция безопасности браузера, поэтому, если вы хотите протестировать закладки прямо из адресной строки, Вам нужно будет добавитьjavascript:вручную перед кодом js.
Если вы ищете расширение Chrome, то есть uMatrix, где вы можете щелкнуть столбец CSS, чтобы отключить все CSS и стили, и Web Developer, где на вкладке CSS у вас есть опция Отключить все стили.
Для этого вы можете использовать расширение Web Developer :
Нет версии Chrome No Style (пока?), Поэтому вам придется использовать другой метод, например, некоторые другие расширения, которые могут отключать стили.
Вы можете использовать расширение Disable Stylesheets, чтобы отключить таблицы стилей в целом, или расширение Web Developer, чтобы включить или выключить все стили. Pendule также является популярным расширением для этой цели.
Вы также можете отключить стили с помощью инструментов разработчика [1] [2]:
Значок шестеренки -> Вкладка CSS -> Отключить все стили
Если вы делаете это по соображениям скорости, могу ли я предложить альтернативу: Ссылки 2
Когда браузер откроется, нажмите g и введите URL-адрес, на который вы хотите перейти. Этот браузер прост в использовании поддерживаемых стандартов, но удивительно быстр даже на очень старых ПК.
В 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.
В настоящее время моим предпочтительным инструментом для этого является расширение браузера uMatrix, которое позволяет даже более мелкие элементы управления: отключать CSS, JS, изображения или другие функции, загружая домен по отношению к текущему веб-сайту. Изменения могут быть легко переключены, сделаны постоянными или приведены в качестве правил по умолчанию.
Это стильное решение для большинства моих потребностей в настройке читателя. Reader-Mode (Firefox) имеет тенденцию давать равномерно стилизованный контент достаточно надежно.
Расширение вопроса: на Chrome/Android у меня нет жизнеспособного варианта, и предложенные выше решения не работают.
JQuery код только одна строка ... использовать
jQuery("head").empty();
или в JavaScript вы можете использовать
document.getElementsByTagName("head")[0].innerText="";
перейдите на свою веб-страницу и затем нажмите ctrl+shift+i, вы увидите меню выбора консоли и вставьте этот document.getElementsByTagName("head")[0].innerText=""; код и затем нажмите ввод