Как отключить CSS в браузере для тестирования
есть ли способ отключить все внешние CSS в браузере (Firefox, Chrome. )?
при использовании медленного подключения к интернету, иногда только голый HTML загружается браузером без информации CSS. Похоже, что страница была выложена на экран сырой. Вы бы заметили это и в StackOverflow.
Я хочу убедиться, что моя веб-страница отображается нормально, даже если CSS-файлы не загружаются.
Я не имел в виду, что хочу конвертировать внешний CSS для инлайн. Но я хочу способ явно отключить все CSS из браузера, чтобы я мог перемещать свои элементы лучше, читаемым способом.
Я знаю, что могу удалить записи , но что, если у меня много связанных страниц?
15 ответов
плагин веб-разработчика для в Firefox и Chrome в состоянии сделать это
после установки плагина опция доступна в меню CSS. Например, CSS > Disable Styles > Disable All Styles
в качестве альтернативы с помощью панели инструментов разработчика вы можете нажать Alt+Shift+A .
в Chrome / Chromium вы можете сделать это в консоли разработчика.
- Откройте консоль разработчика с помощью ctrl-shift-j или Menu->Tools — >консоль разработчика.
- в консоли разработчика перейдите на вкладку источники.
- в левом верхнем углу этой вкладки находится значок с треугольником раскрытия. Щелкнуть по нему.
- перейдите к →css→
- выделите весь текст и нажмите удалить.
- промойте и повторите для каждой таблицы стилей, которую вы хотите отключить.
Firefox (Win и Mac)
- на панели инструментов меню выберите: «вид» > «стиль страницы» > «нет стиля»
- на панели инструментов веб-разработчика выберите: «CSS» > «отключить стили» > «все стили»
Если панель инструментов Web Dev установлена, люди могут использовать следующие сочетания клавиш: команда + Shift + S (Mac) и управления + Shift + S (Win)
- Safari (Mac): на панели инструментов меню выберите «разработка» > » отключить Стили»
- Opera (Win): в меню выберите «страница» > «Стиль» > «пользовательский режим»
- Chrome( Win): через значок шестеренки выберите вкладку» CSS » > » отключить все Стили»
- Internet Explorer 8: на панели инструментов меню выберите » вид » > «стиль» > «No Style»
- Internet Explorer 7: через меню Панели инструментов IE Developer: отключить > все В CSS
- интернет Explorer 6: на панели инструментов веб-специальных возможностей выберите » CSS » > «отключить CSS»
этот скрипт работает для меня (Hat tip to scrappedcola)
встроенный стиль остается неизменным, хотя
установите Adblock Plus, затем добавьте *.css правило в параметрах фильтров (вкладка пользовательские фильтры). Метод влияет только на внешние таблицы стилей. Он не отключает встроенные стили.
этот метод делает именно то, что вы просили.
расширяя идею scrappedocola/renergy, вы можете включить JavaScript в букмарклет это выполняется против javascript: uri, поэтому код можно легко повторно использовать на нескольких страницах без необходимости открывать инструменты разработки или хранить что-либо в буфере обмена.
просто запустите следующий фрагмент и перетащите ссылку на панель закладок / избранное:
- Я бы избегал петли через тысячи элементов на странице с помощью getElementsByTagName(‘*’) и должны проверять и действовать по каждому индивидуально.
- Я бы избегал полагаться на jQuery, существующий на странице с $(‘style,link[rel=»stylesheet»]’).remove() когда дополнительный javascript не является чрезмерно громоздким.
другой путь к достижению @Дэвид Baucum это решение в меньшем количестве шагов:
- щелкните правой кнопкой мыши — > проверить элемент
- нажмите на имя таблицы стилей, которые влияют на ваш элемент (только в правой части объявления)
- выделите весь текст и нажмите Удалить.
в некоторых случаях это может быть удобнее.
в Firefox самый простой способ — через команду меню Вид > стиль страницы > нет стиля. Но это также отключает эффекты некоторой презентационной HTML-разметки. Поэтому использование плагинов, как предложено @JoelKuiper, обычно лучше; они дают больше гибкости (например, отключение только некоторых таблиц стилей).
Я пробовал в инструментах разработчика Chrome, и метод действителен, только если CSS включены в качестве внешних файлов, и он не будет работать для встроенных стилей.
- document.querySelectorAll(‘link’) получает все узлы ссылке. Это вернет массив элементов DOM. Обратите внимание, что это не объект массива javascript.
- Array.prototype.forEach.call(linkElements петли через элементы связи
- element.remove() удаляет элемент из Дом!—13—>
в результате простой HTML-страницы
поскольку большинство ответов кажутся довольно старыми здесь, ссылаясь на пункты меню, которые я не могу найти в текущих версиях популярных браузеров, вот как это сделать в текущей версии в Firefox Developer Edition:
- Открыть Инструменты Разработчика ( CTRL + SHIFT + I )
- выберите вкладку редактор стилей
- там вы должны увидеть все источники CSS в вашем документе. Вы можете отключить каждый из них, щелкнув значок глаза рядом с их.
для страниц, которые полагаются на внешний CSS (большинство страниц в настоящее время) простое и надежное решение-убить head элемент:
щелкните правой кнопкой мыши эту страницу (в Chrome / Firefox), выберите проверить, вставьте код в консоль devtools и нажмите Enter.
версия букмарклета того же кода, который можно вставить в качестве URL закладки:
Теперь при нажатии на закладку в панели избранного будет отображаться страница без каких-либо таблиц стилей css.
удаление головки не будет работать для страниц, которые используют встроенные стили.
Если вы используете Safari на MacOS, то:
- Открыть Настройки Safari ( cmd + , ) и в дополнительно tab установите флажок «Показать меню разработки в строке меню».
- под разработки меню вы найдете Отключить Стили выбор.
на самом деле, это проще, чем вы думаете. В любых браузерах нажмите F12, чтобы открыть консоль отладки. Это работает для IE, Firefox и Chrome. Не уверен насчет оперы. Затем прокомментируйте CSS в элементе windows. Вот и все.
при проверке HTML с помощью инструмента разработки браузера вы предпочитаете (например, Chrome Devtools) найти <head> элемент и удалить его вообще.
обратите внимание, что этот также удалит js но для меня это самый быстрый способ получить страница голая.
все предлагаемые ответы просто устраняют css для этой загрузки страницы. В зависимости от вашего варианта использования вы можете вообще не загружать css:
Chrome Dev Tools > вкладка сеть > щелкните правой кнопкой мыши на таблице стилей в вопросе > url запроса блока
Как отключить css в яндекс браузере
Отключаем Flash player и HTML5 в браузере: пошаговое руководство
Многим людям, использующим высокоскоростной интернет, со временем надоедает автовоспроизведение содержащегося на некоторых сайтах видеоконтента. Это причиняет неудобства, особенно, если после открытия нескольких вкладок начинается воспроизведение видео, и потребляет немалый траффик, что важно для пользователей медленным беспроводным интернетом. Многие старенькие компьютеры также не выдерживают подобной нагрузки на процессор и начинают подвисать – воспроизведение осуществляется рывками и с перерывами.
Запрещаем автовоспроизведение мультимедиа
Хорошо, если используете браузер Chrome, последняя версия которого не только отмечает вкладки, где играет ролик, но и позволяет отключить автоматический запуск его воспроизведения.
Эта программа распространяется с интегрированным ядром флеш-плеера, и объяснять, почему adobe flash player запускается автоматически при запуске интернет-обозревателя, не нужно.
Отключение автоматического проигрывания мультимедиаконтента в браузере осуществляется парой кликов.
- Заходим в главное меню, что запускается кликом по кнопке с тремя горизонтальными полосами.
- Далее вызываем окно настроек программы.
- Переходим в раздел параметров под названием «Личные данные».
- Для этого жмем «Показать дополнительные настройки» в самом низу окна или вводим часть фразы в поисковую строку.
Нажмите на кнопку «Настройки контента»
- Кликаем по кнопке «Настройки контента»
- Опускаемся к разделу «Плагины» и переносим радиокнопку в положение как на скриншоте, чтобы отключить воспроизведение flash-роликов.
- Жмем кнопку «Готово», расположенную внизу страницы.
После применения изменений браузер начнет запрашивать вашего разрешения на запуск проигрывания видеоконтента.
Firefox
Автовоспроизведение flash-видео в Firefox запрещается аналогичным образом – настраиваем запуск плагина для визуализации флеш-роликов с разрешения пользователя.
- Заходим в настройки mozilla firefox: кликаем по иконке настроек, выполненной в виде шестеренки.
- Перемещаемся в «Дополнения», где переходим в раздел плагины для Firefox.
- Отыскиваем Shockwave Flash и выбираем «Включать по запросу» в выпадающем меню.
Настройка frigate в firefox, кстати, осуществляется в этом же разделе. Просто кликаем по соответствующей кнопке расширения для входа в меню его параметров.
Если флеш-содержимое ни одного сайта вас не интересует, рекомендуется выключить плагин в мозиле, отвечающий за его воспроизведение. В таком случае в выпадающем списке кликаем по «Никогда не включать».
Отключить в firefox html5 немного сложнее.
- Пишем «about:config» в его адресной строке.
- Соглашаемся быть осторожным.
- Изменяем значение всех строчек типа: «media.*.enabled», где * — это форматы файлов, на «false».
Opera
Аналогичной является процедура отключение автоматического воспроизведения flash содержимого и в норвежской Опере.
- Заходим в настройки интернет-обозревателя.
- Перемещаемся в раздел «Сайты».
- Значение вкладки «Плагины» изменяем на «По запросу».
Яндекс браузер
Далеко не каждый пользователь способен самостоятельно отключить флеш плеер в яндекс браузере.
Да и информации по этой теме на просторах рунета совсем немного. Следуйте пунктам предложенной инструкции и за несколько секунд избавитесь от назойливого автоматического проигрывания видеоконтента, созданного с использованием технологии flash на всех без исключения сайтах. Полностью блокировать его не рекомендуется, а вот проигрывание из разрешения пользователя включить стоит.
Выключить flash player в яндекс браузере можно следующим образом:
- Посещаем меню конфигурации программы, нажав на соответствующую пиктограмму в правом верхнем углу.
- Переходим в раздел настройки воспроизведения через меню «Защита личных данных».
- Жмем «Настройка содержимого» в интернет-обозревателе.
- Перемещаемся в раздел «Плагины».
- Перемещаем триггерный переключатель в положение «Запрашивать разрешение…», дабы отключить плагины в яндекс браузере.
Выключаем автозапуск html5
Отключить html5 сложнее, чем flash-содержимое сайтов. Этот новый движок используется для воспроизведения всего видеоконтента на популярном сервисе Youtube. В настройках браузеров отключить youtube html5 невозможно, потому придется прибегнуть к специальным расширениям, разработанным для решения этой задачи. Рассмотрим на примере Magic Actions, так как оно существует в двух редакциях: для Гугл Хром и для ФайрФокс.
Добавление плагина происходит через магазин расширений вашего браузера, на этом останавливаться не станем.
Yandex browser не корректное копирование CSS из консоли. Как и с этим жить?
Кто сталкивался?
Это какое то обновление?
Можно ли это выключить ?
PS:
Фишка общая от хрома идет. Только в хроме нормально, а яндекс тупит, поправьте эту жесть господа разработчики.
Опера тоже нормально.
Написал в ТП
yandex browser версия: Version
22.1.0.2500 (64-bit)
Как отключить CSS в браузере для целей тестирования
Есть ли способ отключить все внешние CSS в браузере (Firefox, Chrome. )?
При использовании более медленного интернет-соединения иногда браузер загружает только чистый HTML без информации CSS. Похоже, что страница лежит на экране в сыром виде. Вы бы заметили это и со StackOverflow.
Я хочу убедиться, что моя веб-страница отображается нормально, даже если файлы CSS не загружены.
Я не имел в виду, что хочу преобразовать внешний CSS во встроенный. Но мне нужен способ явного отключения всего CSS в браузере, чтобы я мог изменить расположение своих элементов в более удобном для чтения виде.
Я знаю, что могу удалить записи, но что, если у меня много связанных страниц?
Это очень хороший вопрос. Как оказалось, например, Chrome не позволяет «отключать» авторские таблицы стилей способом, приемлемым для обычного пользователя. Это делает Chrome несовместимым с CSS 2.1, как видно из главы 3.2.6 спецификации, где сказано, что «UA должен позволять пользователю отключать влияние таблиц стилей автора». То же самое может быть верно для других браузеров, которые изначально не позволяют это делать. — NicBright
щелкните правой кнопкой мыши страницу, выберите Инспектировать в контекстном меню найдите <head> пометить, щелкнуть правой кнопкой мыши и выбрать Удалить элемент. — ccpizza
18 ответы
В Chrome/Chromium вы можете сделать это в консоли разработчика.
- Откройте консоль разработчика, нажав ctrl-shift-j или Меню->Инструменты->Консоль разработчика.
- В консоли разработчика перейдите на вкладку «Источники».
- В верхнем левом углу этой вкладки находится значок с треугольником раскрытия. Нажмите здесь.
- Перейти к →CSS→
- Выделите весь текст и нажмите «Удалить».
- Промойте и повторите для каждой таблицы стилей, которую вы хотите отключить.
ответ дан 06 мая ’16, 17:05
Если у вас много источников и вы хотите найти, где был вложен CSS, начните с вкладки «Сеть» и отфильтруйте ответы, чтобы включить только таблицы стилей. Затем щелкните правой кнопкой мыши ответ и нажмите «Открыть на панели источников». Затем Ctrl+A, Del- КайлМит
@MartinF «Маленькая стрелка воспроизведения» правильно называется треугольником раскрытия / виджетом раскрытия. — jsejcksn
Сейчас, в 2021 году, все кажется другим. Очень жаль. И/или обсуждаются только внешние файлы .css. — Дэн Джейкобсон 積 丹尼
Плагин веб-разработчика для Firefox и Chrome может это сделать
После того, как вы установили плагин, опция доступна в меню CSS. Например, CSS > Disable Styles > Disable All Styles
В качестве альтернативы с включенной панелью инструментов разработчика вы можете нажать Alt+Shift+A .
Можете ли вы указать, как это сделать там? — Джон Дворжак
Спасибо. Есть ли в Firebug эта функция? — АТОзТОА
Firebug позволяет выборочно отключать/включать некоторые селекторы и редактировать существующий CSS в реальном времени, так что в некотором смысле это возможно. Для ваших целей плагин Web Developer кажется более подходящим, там у вас есть возможность отключить все CSS или определенные таблицы стилей, среди других полезных инструментов для оценки доступности сайта для старых/мобильных браузеров. — Джоэл Кейпер
Этот ответ не содержит никакой информации о КАК сделать это, о чем и спрашивается. — НессДан
Группа Paciello имеет аналогичную панель инструментов, которая работает в IE 9/10/11. paciellogroup.com/resources/ват — РПниндзя
Firefox (Win и Mac)
- На панели инструментов меню выберите: «Вид» > «Стиль страницы» > «Без стиля».
- На панели инструментов веб-разработчика выберите: «CSS» > «Отключить стили» > «Все стили».
Если установлена панель инструментов Web Dev, люди могут использовать следующие сочетания клавиш: Command + Shift + S (Mac) и Control + Shift + S (Выиграть)
- Safari (Mac): на панели инструментов меню выберите «Разработка» > «Отключить стили».
- Opera (Win): в меню выберите «Страница» > «Стиль» > «Режим пользователя».
- Chrome (Win): с помощью значка шестеренки выберите вкладку «CSS» > «Отключить все стили».
- Internet Explorer 8: на панели инструментов меню выберите «Вид» > «Стиль» > «Без стиля».
- Internet Explorer 7: через меню панели инструментов разработчика IE: Отключить > Все CSS
- Internet Explorer 6: на панели инструментов веб-доступности выберите «CSS» > «Отключить CSS».
ответ дан 08 апр.
Chrome (Win): эта опция больше не существует; Ответ @David Baucum ниже действительно работает. — Дэвид Кук
Этот скрипт работает для меня (спасибо за лома)
встроенный стиль остается нетронутым, хотя
Это потрясающе, просто нажмите F12 в Chrome, перейдите к консоли, нажмите «Вставить» и введите. — Эрик Бишард
Развивая идею скраппедокола/renergy, вы можете превратить JavaScript в букмарклет который выполняется против javascript: uri, чтобы код можно было легко повторно использовать на нескольких страницах без необходимости открывать инструменты разработчика или сохранять что-либо в буфере обмена.
Просто запустите следующий фрагмент и перетащите ссылку на панель закладок/избранного:
- Я бы не стал перебирать тысячи элементов на странице с getElementsByTagName(‘*’) и приходится проверять и действовать по каждому индивидуально.
- Я бы не стал полагаться на jQuery, существующий на странице с $(‘style,link[rel=»stylesheet»]’).remove() когда дополнительный javascript не слишком громоздкий.
ответ дан 26 мар ’15, в 15:03
Это самый быстрый способ сделать это, мне нравится этот метод. — морская щука
Чтобы очистить встроенный CSS: document.querySelectorAll(‘*[style]’).forEach((e)=>e.removeAttribute(‘style’)); Перебирает только элементы с существующими style атрибуты. — Мат Гессель
Установите Adblock Plus, затем добавьте *.css правило в параметрах фильтров (вкладка пользовательских фильтров). Метод воздействует только на внешние таблицы стилей. Он не отключает встроенные стили.
Этот метод делает именно то, что вы просили.
Это единственное решение, которое все еще работает при перезагрузке страницы. К сожалению, вы не можете проверить это с помощью рекламы. — синухепоп
@sinuhepop Вы можете отключить все списки фильтров в ABP. Разве это не работает? — Туупертунут
Конечно! Я попробую. Спасибо — синухепоп
Удалить <head> с закладкой
Для страниц, которые полагаются на внешний CSS (большинство страниц в настоящее время), вы можете удалить head элемент:
Использование: щелкните правой кнопкой мыши страницу (в Chrome/Firefox), выберите Инспектировать, вставьте приведенный выше код в консоль devtools и нажмите Enter.
Версия букмарклета с тем же кодом, который можно вставить в качестве URL-адреса закладки:
Теперь щелчок по закладке на панели закладок (надеюсь) удалит все таблицы стилей css.
Удалить <head> через инструменты разработки
Другой способ сделать это — щелкнуть правой кнопкой мыши страницу (в Chrome/Firefox), выбрать Инспектировать , в панели devtools на вкладке Elements выберите <head> тег (см. снимок экрана), щелкните его правой кнопкой мыши и выберите Удалить элемент :
Примечание. Удаление заголовка не работает для страниц, использующих встроенные стили.
Как отключить CSS в браузере для тестирования
Можно ли отключить все внешние CSS в браузере (Firefox, Chrome. )?
При использовании более медленного интернет-соединения иногда браузер загружает только голый HTML без информации CSS. Похоже, что страница была отложена на экране. Вы бы тоже заметили это с помощью StackOverflow.
Я хочу убедиться, что моя веб-страница отображается нормально, даже если файлы CSS не загружены.
Я не имел ввиду, что хочу преобразовать внешний CSS в inline. Но я хочу, чтобы явным образом отключил все CSS из браузера, чтобы я мог более легко и легко изменять мои элементы.
Я знаю, что могу удалить ссылку < link rel= ‘stylesheet’ > записи, но что, если у меня много связанных страниц?
How to disable CSS in Browser for testing purposes
Is there any way I can disable all external CSS in a browser (Firefox, Chrome. )?
When using slower internet connection, sometimes only the bare HTML is loaded by the browser without the CSS info. It looks like the page has been laid raw on the screen. You would have noticed this with StackOverflow too.
I want to make sure that my web page shows up OK even if the CSS files are not loaded.
I didn’t mean I want to convert external CSS to inline. But I want a way to explicitly disable all CSS from the browser so that I can reposition my elements in a better, readable way.
I know I can remove the <link rel=’stylesheet’> entries, but what if I have a lot of linked pages?
19 Answers 19
In Chrome/Chromium you can do this in the developer console.
- Bring up the developer console by either ctrl-shift-j or Menu->Tools->Developer Console.
- Within the developer console browse to the Sources tab.
- In the top-left corner of this tab is an icon with a disclosure triangle. Click on it.
- Browse to <domain>→css→<css file you want to eliminate>
- Highlight all of the text and hit delete.
- Rinse and repeat for each stylesheet you want to disable.
The Web Developer plugin for Firefox and Chrome is able to do this
Once you have installed the plugin the option is available in the CSS menu. For example, CSS > Disable Styles > Disable All Styles
Alternatively with the developer toolbar enabled you can press Alt+Shift+A .
Firefox (Win and Mac)
- Via the menu toolbar, choose: «View» > «Page Style» > «No Style»
- Via the Web Developer Toolbar, choose: «CSS» > «Disable Styles» > «All Styles»
If the Web Dev Toolbar is installed, people can use this keyboard shortcuts: Command + Shift + S (Mac) and Control + Shift + S (Win)
- Safari (Mac): Via the menu toolbar, choose «Develop» > «Disable Styles»
- Opera (Win): Via the menu, choose «Page» > «Style» > «User Mode»
- Chrome (Win): Via the gear icon, choose the «CSS» tab > «Disable All Styles»
- Internet Explorer 8: Via the menu toolbar, choose «View» > «Style» > «No Style»
- Internet Explorer 7: via the IE Developer Toolbar menu: Disable > All CSS
- Internet Explorer 6: Via the Web Accessibility Toolbar, choose «CSS» > «Disable CSS»
This script works for me (hat tip to scrappedcola)
inline style stays intact, though
Expanding on scrappedocola/renergy’s idea, you can turn the JavaScript into a bookmarklet that executes against the javascript: uri so the code can be re-used easily across multiple pages without having to open up the dev tools or keep anything on your clipboard.
Just run the following snippet and drag the link to your bookmarks/favorites bar:
- I would avoid looping through the thousands of elements on a page with getElementsByTagName(‘*’) and have to check and act on each individually.
- I would avoid relying on jQuery existing on the page with $(‘style,link[rel=»stylesheet»]’).remove() when the extra javascript is not overwhelmingly cumbersome.
Delete <head> with a bookmarklet
For pages that rely on external CSS (most pages nowadays) you can delete the head element:
Usage: right-click the page (in Chrome/Firefox), select Inspect, paste the code above in the devtools console and press Enter.
A bookmarklet version of the same code that you can paste as the URL of a bookmark:
Now clicking the bookmark in your Bookmarks bar will (hopefully) strip all the css stylesheets.
Delete <head> via devtools
Another way to achieve it is to right-click the page (in Chrome/Firefox), select Inspect , in devtools panel, Elements tab select the <head> tag (see screenshot), right-click it, and pick Delete element :
Note: Removing the head will not work for pages that use inline styles.
Safari-only solution
If you happen to use Safari on MacOS then:
- Open Safari Preferences ( cmd + , ) and in the Advanced tab enable the checkbox "Show Develop menu in menu bar".
- Now under the Develop menu you will find a Disable Styles option.
Custom bookmarklet to ‘fix’ all styles
For making any page readable and adjust it to your liking you can also use a custom bookmarklet that will set your own preferred styling:
Minified version of the bookmarklet that you can paste as URL of a bookmark in your browser:
NOTE: You can test it on this page by pasting the code above into the browser address bar and pressing Enter — make sure you prepend javascript: at the beginning since most browsers will automatically strip it when you copy it to the clipboard (for security reasons).
NOTE: Bookmarklets will not work on page content inside frames ( <frame> and <iframe> elements) and also might not work on sites that define strict CSP’s (content-security-policy rules) which is the case with stackoverflow and related sites. The code will still work when run from devtools console or from the address bar with the javascript: prefix.