Как отключить CSS в браузере для целей тестирования

Ответ 1

Плагин для веб-разработчиков для Firefox и Chrome может это сделать

После установки плагина опция доступна в меню CSS. Например, CSS > Disable Styles > Disable All Styles

В качестве альтернативы с включенной панелью инструментов разработчика можно нажать Alt+Shift+A.

Ответ 2

В Chrome/Chromium вы можете сделать это в консоли разработчика.

• Поднимите консоль разработчика с помощью ctrl-shift-j или Menu- > Tools- > Console разработчика.
• В консоли разработчика перейдите на вкладку "Источники".
• В верхнем левом углу этой вкладки находится значок с раскрывающимся треугольником. Нажмите на нее.
• Перейдите к <domain> → css → < css файл, который вы хотите удалить >
• Выделите весь текст и нажмите delete.
• Промыть и повторить для каждой таблицы стилей, которую вы хотите отключить.

Ответ 3

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"

Ответ 4

Этот 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]); };

встроенный стиль остается неповрежденным, хотя

Ответ 5

Установите Adblock Plus, затем добавьте правило *.css в опции Фильтры (вкладка пользовательских фильтров). Метод влияет только на внешние таблицы стилей. Он не отключает встроенные стили.

Отключить все внешние CSS

Этот метод - именно то, что вы просили.

Ответ 6

Расширяя идею 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>

Ответ 7

Еще один способ добиться решения @David Baucum за меньшее количество шагов:

• Щелкните правой кнопкой мыши → элемент проверки
• Нажмите на имя таблицы стилей, которые влияют на ваш элемент (только в правой части объявления).
• Выделите весь текст и нажмите delete.

В некоторых случаях он может быть более удобным.

Ответ 8

В Firefox самый простой способ - с помощью команды меню "Вид" > "Стиль страницы" > "Нет стиля". Но это также отключает эффекты некоторой презентационной разметки HTML. Поэтому использование плагинов, предложенное @JoelKuiper, обычно лучше; они дают большую гибкость (например, отключение только некоторых таблиц стилей).

Ответ 9

Я попробовал в инструментах разработчика 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-странице

Ответ 10

Для страниц, которые полагаются на внешний CSS (большинство страниц в настоящее время), простым и надежным решением является уничтожение элемента head:

document.querySelector("head").remove();

Щелкните правой кнопкой мыши эту страницу (в Chrome/Firefox), выберите "Осмотр", вставьте код в консоли devtools и нажмите "Enter".

Версия букмарклета того же кода, которую вы можете вставить в качестве URL закладки:

javascript:(function(){document.querySelector("head").remove();})()

Теперь нажатие закладки на панели "Избранное" покажет страницу без каких-либо стилей CSS.

Удаление головы не будет работать для страниц, использующих встроенные стили.

Если вы используете Safari для MacOS, тогда:

• Откройте настройки Safari (cmd + ,) и на вкладке Дополнительно установите флажок "Показать меню разработчика в строке меню".
• Теперь в меню Развить вы найдете опцию Disable Styles.

Ответ 11

Поскольку большинство ответов выглядят довольно старыми, ссылаясь на пункты меню, которые, похоже, не могут найти в текущих версиях популярных браузеров, вот как это сделать в текущей версии Firefox Developer Edition:

• Открыть инструменты разработчика (CTRL + SHIFT + I)
• Выберите вкладку "Редактор стилей"
• Там вы должны увидеть все источники CSS в своем документе. Вы можете отключить каждый из них, щелкнув значок рядом с ними.

Ответ 12

На самом деле, это проще, чем вы думаете. В любых браузерах нажмите F12, чтобы открыть консоль отладки. Это работает для IE, Firefox и Chrome. Не уверен в Opera. Затем закомментируйте CSS в окнах элементов. Что это.

Ответ 13

При проверке HTML с помощью средства разработки браузера, который вы предпочитаете (например, Chrome Devtools), найдите элемент <head> и вообще удалите его.

Обратите внимание, что этот также удалит js, но для меня это самый быстрый способ получить страницу голая.