Как в chrome / firefox devtool увидеть большой контент стиля

Question

Я работаю над веб-сайтом, на котором скрипт загружает большой кусок стиля в HTML. Моя проблема в том, что инструменты разработчика chrome не позволяют мне просмотреть весь скрипт. он также недоступен на вкладке ресурсов, и все, что делает chrome, это ставит три точки при обрезке содержимого. есть ли способ просмотреть это в инструменте разработки? даже если я скопирую содержимое стиля, это будет обрезанная версия.

the same content in the firefox doesn't even load as something readable.

введите описание изображения здесь

, и мне нужно скопировать содержимое и переформатировать, чтобы увидеть результат. интересно, есть ли лучший способ сделать это?

Answer 1

В Firefox используйте вкладку Редактор стилей в инструментах разработчика. из официальной документации:

Редактор стилей позволяет:

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

У вас есть (как минимум) 2 варианта, чтобы увидеть эту вкладку:

1. Нажмите F12, для вас откроются инструменты Dev, затем щелкните вкладку Style Editor.
2. Нажмите Shift + F7, откроются инструменты Dev и активная вкладка Style Editor для вас.

После открытия вкладки вы должны увидеть все таблицы стилей, связанные со страницей, на левой панели (панель таблицы стилей), имя встроенного таблицы стилей обычно имеют вид <inline style sheet #1>, щелкните по нему, содержимое / css отобразится на правой панели (панель редактора).

введите описание изображения здесь