Як відключити 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 або Меню-> Інструменти-> Консоль розробника.
2. У консолі розробника перейдіть на вкладку "Джерела".
3. У верхньому лівому куті цієї вкладки розташований значок із трикутником розкриття. Натисніть на нього.
4. Перейдіть до <domain> → 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"

Цей сценарій працює для мене (підказка капелюха до скрапкола)

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

стиль inline залишається неушкодженим, хоча

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

Просто запустіть такий фрагмент і перетягніть посилання на панель закладок / обраних:

<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), виберіть « Оглянути» , вставте код у консоль програми devtools та натисніть 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. Зауважте, що це не об’єкт масиву 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 Dev> Вкладка "Мережа"> Клацніть правою кнопкою миші на відповідному аркуші стилів> блокувати URL-адресу запиту

Для тих, хто не хоче ніяких плагінів чи інших продуктів, ми можемо використовувати document.styleSheets для відключення / включення css.

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

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

Якщо ви використовуєте хром, ви можете створити функцію та додати її до фрагментів. Так що ви можете використовувати консоль для включення / відключення css для будь-яких сайтів.

// Фрагменти -> ВимкнутиCSS

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

// в консолі

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