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

Есть ли способ отключить весь внешний CSS в браузере (Firefox, Chrome ...)?

При использовании более медленного подключения к Интернету браузер иногда загружает только чистый HTML без информации CSS. Похоже, страница была выложена на экран в сыром виде. Вы бы тоже заметили это с помощью StackOverflow.

Я хочу убедиться, что моя веб-страница отображается нормально, даже если файлы CSS не загружены.

Я не имел в виду, что хочу преобразовать внешний CSS во встроенный. Но мне нужен способ явно отключить весь CSS в браузере, чтобы я мог лучше и удобнее перемещать свои элементы.

Я знаю, что могу удалить записи <link rel = 'stylesheet'>, но что, если у меня много связанных страниц?

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

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

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

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

1. Откройте консоль разработчика, нажав ctrl-shift-j или Menu-> Tools-> Developer Console.
2. В консоли разработчика перейдите на вкладку «Источники».
3. В верхнем левом углу этой вкладки находится значок с треугольником раскрытия. Нажмите здесь.
4. Перейдите к <домен> → css → <файл css, который вы хотите удалить>
5. Выделите весь текст и нажмите удалить.
6. Промойте и повторите для каждой таблицы стилей, которую хотите отключить.

Firefox (Win и Mac)

• На панели инструментов меню выберите: «Вид»> «Стиль страницы»> «Без стиля».
• На панели инструментов веб-разработчика выберите: «CSS»> «Отключить стили»> «Все стили».

Если установлена ​​панель инструментов Web Dev, люди могут использовать следующие сочетания клавиш: Command+ Shift+ S(Mac) и Control+ Shift+ S(Win).

• Safari (Mac): на панели инструментов меню выберите «Разработка»> «Отключить стили».
• Opera (Win): в меню выберите «Страница»> «Стиль»> «Пользовательский режим».
• Chrome (Win): с помощью значка шестеренки выберите вкладку «CSS»> «Отключить все стили».
• Internet Explorer 8: на панели инструментов меню выберите «Вид»> «Стиль»> «Без стиля».
• Internet Explorer 7: через меню панели инструментов разработчика IE: Отключить> Все CSS
• Internet Explorer 6. На панели инструментов веб-доступности выберите «CSS»> «Отключить CSS».

Этот скрипт у меня работает (шляпа перед 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]); };

встроенный стиль остается неизменным

Расширяя идею scrappedocola / renergy, вы можете превратить JavaScript в букмарклет, который выполняется против javascript:uri, чтобы код можно было легко повторно использовать на нескольких страницах без необходимости открывать инструменты разработчика или хранить что-либо в своем буфере обмена.

Просто запустите следующий фрагмент и перетащите ссылку на панель закладок / избранного:

<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 не является слишком громоздким.

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

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

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

Другой способ достижения @David Baucum в раствор в меньшем количестве шагов:

1. Щелкните правой кнопкой мыши -> проверить элемент
2. Щелкните имя таблицы стилей, которая влияет на ваш элемент (справа от объявления)
3. Выделите весь текст и нажмите удалить.

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

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

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

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

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

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

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

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

Теперь, щелкнув закладку на панели избранного, вы увидите страницу без таблиц стилей css.

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

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

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

Я пробовал использовать инструменты разработчика 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());

Пояснения

1. document.querySelectorAll('link')получает все узлы связи. Это вернет массив элементов DOM. Обратите внимание, что это не объект Array в javascript.
2. Array.prototype.forEach.call(linkElements проходит через элементы ссылки
3. element.remove() удаляет элемент из DOM

Результат в простой HTML-странице

вы можете заблокировать любой запрос (даже для одного файла css) из инспектора следующим образом:
    Щелкните правой кнопкой мыши> URL-адрес запроса блокировки,
не отключая другие файлы css> https://umaar.com/dev-tips/68-block-requests/ Это стандартная функция инспектора, никаких плагинов и трюков не требуется

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

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

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

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

Все предлагаемые ответы просто устраняют css для загрузки этой страницы. В зависимости от вашего варианта использования вы можете вообще не загружать css:

Инструменты разработчика Chrome> вкладка "Сеть"> щелкните правой кнопкой мыши соответствующую таблицу стилей> URL-адрес запроса блокировки

Для тех, кому не нужны плагины или другие вещи, мы можем использовать document.styleSheets для отключения / включения CSS.

// код для отключения всех css

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

Если вы используете хром, вы можете создать функцию и добавить в свои фрагменты. Чтобы вы могли использовать консоль для включения / отключения css для любых сайтов.

// Фрагменты -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// в консоли

disableCss() // by default is disable
disableCss(false) // to enable