Вопрос:
Можно ли отключить все внешние CSS в браузере (Firefox, Chrome…)?
При использовании более медленного интернет-соединения иногда браузер загружает только голый HTML без информации CSS. Похоже, что страница была отложена на экране. Вы бы тоже заметили это с помощью StackOverflow.
Я хочу убедиться, что моя веб-страница отображается нормально, даже если файлы CSS не загружены.
Я не имел ввиду, что хочу преобразовать внешний CSS в inline. Но я хочу, чтобы явным образом отключил все CSS из браузера, чтобы я мог более легко и легко изменять мои элементы.
Я знаю, что могу удалить ссылку < link rel= ‘stylesheet’ > записи, но что, если у меня много связанных страниц?
Лучший ответ:
Плагин для веб-разработчиков для Firefox и Chrome может это сделать
После установки плагина опция доступна в меню CSS. Например, CSS > Disable Styles > Disable All Styles
В качестве альтернативы с включенной панелью инструментов разработчика можно нажать Alt+Shift+A.
Ответ №1
В Chrome/Chromium вы можете сделать это в консоли разработчика.
- Поднимите консоль разработчика с помощью ctrl-shift-j или Menu- > Tools- > Console разработчика.
- В консоли разработчика перейдите на вкладку “Источники”.
- В верхнем левом углу этой вкладки находится значок с раскрывающимся треугольником. Нажмите на нее.
- Перейдите к <domain> → css → < css файл, который вы хотите удалить >
- Выделите весь текст и нажмите delete.
- Промыть и повторить для каждой таблицы стилей, которую вы хотите отключить.
Ответ №2
Firefox (Win и Mac)
- На панели инструментов меню выберите “Вид” > “Стиль страницы” > “Нет стиля”
- С помощью панели инструментов веб-разработчиков выберите: “CSS” > “Disable Styles” > “All Styles”
Если панель инструментов Web Dev установлена, люди могут использовать эти быстрые клавиши: Command + Shift + S (Mac) и Control + Shift + S (Win)
- Safari (Mac): через панель инструментов меню выберите “Develop” > “Disable
Стили “ - Opera (Win): через меню выберите “Страница” > “Стиль” > “Пользовательский режим”
- Chrome (Win): через значок шестеренки выберите вкладку “CSS” > “Отключить все
Стили “ - Internet Explorer 8: через панель инструментов меню выберите “Вид” > “Стиль” > “Нет стиля”
- Internet Explorer 7: через меню панели инструментов IE Developer: отключить > Все
CSS - Internet Explorer 6: на панели инструментов веб-доступности выберите “CSS” > “Отключить CSS”
Ответ №3
Этот script работает для меня (наконечник шляпы для scrappedcola)
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]); };
встроенный стиль остается неповрежденным, хотя
Ответ №4
Установите Adblock Plus, затем добавьте правило *.css в опции Фильтры (вкладка пользовательских фильтров). Метод влияет только на внешние таблицы стилей. Он не отключает встроенные стили.
Отключить все внешние CSS
Этот метод – именно то, что вы просили.
Ответ №5
Расширяя идею scrappedocola/renergy, вы можете превратить JavaScript в букмарклет, который выполняется против url javascript:, поэтому код может быть повторно используется легко на нескольких страницах без необходимости открывать инструменты 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(‘*’) и должен проверять и действовать по отдельности.
- Я бы не стал полагаться на jQuery, существующий на странице, с $(‘style,link[rel=»stylesheet»]’).remove(), когда дополнительный javascript не является чрезвычайно громоздким.
Ответ №6
Еще один способ добиться решения @David Baucum за меньшее количество шагов:
- Щелкните правой кнопкой мыши → элемент проверки
- Нажмите на имя таблицы стилей, которые влияют на ваш элемент (только в правой части объявления).
- Выделите весь текст и нажмите delete.
В некоторых случаях он может быть более удобным.
Ответ №7
В Firefox самый простой способ – с помощью команды меню “Вид” > “Стиль страницы” > “Нет стиля”. Но это также отключает эффекты некоторой презентационной разметки HTML. Поэтому использование плагинов, предложенное @JoelKuiper, обычно лучше; они дают большую гибкость (например, отключение только некоторых таблиц стилей).
Ответ №8
Я попробовал в инструментах разработчика Chrome, и этот метод действителен только в том случае, если CSS включены в качестве внешних файлов, и он не будет работать для встроенных стилей.
Array.prototype.forEach.call(document.querySelectorAll(‘link’), (element)=>element.remove());
или
var linkElements = document.querySelectorAll(‘link’); Array.prototype.forEach.call(linkElements, (element)=>element.remove());
Пояснения
- document.querySelectorAll(‘link’) получает все узлы ссылок. Это вернет массив элементов DOM. Обратите внимание, что это не объект массива javascript.
- Array.prototype.forEach.call(linkElements перемещается по элементам ссылки
- element.remove() удаляет элемент из DOM
Результат в простой HTML-странице
Ответ №9
Для страниц, которые полагаются на внешний CSS (большинство страниц в настоящее время), простым и надежным решением является уничтожение элемента head:
document.querySelector(«head»).remove();
Щелкните правой кнопкой мыши эту страницу (в Chrome/Firefox), выберите “Осмотр”, вставьте код в консоли devtools и нажмите “Enter”.
Версия букмарклета того же кода, которую вы можете вставить в качестве URL закладки:
javascript:(function(){document.querySelector(«head»).remove();})()
Теперь нажатие закладки на панели “Избранное” покажет страницу без каких-либо стилей CSS.
Удаление головы не будет работать для страниц, использующих встроенные стили.
Если вы используете Safari для MacOS, тогда:
- Откройте настройки Safari (cmd + ,) и на вкладке Дополнительно установите флажок “Показать меню разработчика в строке меню”.
- Теперь в меню Развить вы найдете опцию Disable Styles.
Ответ №10
Поскольку большинство ответов выглядят довольно старыми, ссылаясь на пункты меню, которые, похоже, не могут найти в текущих версиях популярных браузеров, вот как это сделать в текущей версии Firefox Developer Edition:
- Открыть инструменты разработчика (CTRL + SHIFT + I)
- Выберите вкладку “Редактор стилей”
- Там вы должны увидеть все источники CSS в своем документе. Вы можете отключить каждый из них, щелкнув значок рядом с ними.
Ответ №11
На самом деле, это проще, чем вы думаете. В любых браузерах нажмите F12, чтобы открыть консоль отладки. Это работает для IE, Firefox и Chrome. Не уверен в Opera. Затем закомментируйте CSS в окнах элементов. Что это.
Ответ №12
При проверке HTML с помощью средства разработки браузера, который вы предпочитаете (например, Chrome Devtools), найдите элемент <head> и вообще удалите его.
Обратите внимание, что этот также удалит js, но для меня это самый быстрый способ получить страницу голая.
