Просмотр таблиц стилей CSS в инструментах разработчика IE11 F12

В предыдущих версиях инструментов разработчика IE вы могли открывать исходный код файлов CSS в отладчике.

Это было наиболее полезно для проверки того, что они действительно были загружены/ссылались правильно, т.е. если запрос на таблицу стилей вернул ошибку 404, то это причина маршрута, по которой мои стили не применялись.

Однако, начиная с IE 11, отладчик больше не отображает файлы CSS, поэтому я не могу использовать его для просмотра их источника и проверки их.

Я знаю, что могу сделать это через профилировщик, но для этого нужно запустить трассировку профиля и перезагрузить страницу, что не совсем способствует простому рабочему процессу. (Используются не частые блокировки, которые инструменты F12, кажется, испытывают на любой из вкладок профиля)

Есть ли еще средства разработчика, чтобы увидеть источник файлов CSS?


css internet-explorer ie-developer-tools
person Morvael    schedule 13.03.2014    source источник
comment
Смотрите ответ десяти букв и мой комментарий!   -  person Andrew    schedule 25.10.2017

Ответы (4)


arrow_upward
10
arrow_downward

Я так не думаю. Существует проблема с подключением, сообщающая об этом, и MS говорит, что у них есть это в их невыполненных работах для «потенциального» будущего выпуска. IE11: CSS вкладка отсутствует в новых инструментах разработчика F12

Обновление: Microsoft объявила через сайт UserVoice для Internet Explorer, что они планируют вернуть его.

person Bart Sipes    schedule 04.04.2014
comment
Я надеюсь, что IE умрет в огне. - person Ben Racicot; 02.01.2015
comment
@BenRacicot Это будет. Они делают новый браузер. - person Ismael Miguel; 05.03.2015
comment
Спартанец скоро будет - person Premraj; 13.05.2015

arrow_upward
6
arrow_downward

Вкладка CSS отсутствует, и отладчик также не отображает файлы CSS.

Однако, если вы найдете элемент в проводнике dom со стилями, примененными из файла css, вы можете щелкнуть имя файла и открыть весь файл.

person tenletters    schedule 24.09.2015
comment
Работает! Кроме того, если вы щелкнете вкладку «Консоль», отфильтруете только «Сообщения» и перейдете к файлу CSS напрямую по URL-адресу, появится новое сообщение «HTML1300: навигация произошла». Файл: blah.css, который вы можете щелкнуть и просмотреть. - person Andrew; 25.10.2017
comment
Удивительно, я этого не заметил. Однако это не решает проблему отсутствия файлов CSS, поскольку их содержимое не будет применяться ни к одному элементу. Вкладка «Сеть» также стала намного лучше, и вы можете легко отфильтровать, чтобы найти ошибки 404. - person Morvael; 26.10.2017

arrow_upward
0
arrow_downward

Я был удивлен, обнаружив это сегодня, и прибегнул к использованию инструмента Chrome F12. На вкладке «Ресурсы» на левой панели вы можете развернуть «Фреймы», чтобы получить доступ к изображениям, сценариям и таблицам стилей для вашей страницы. .

Само собой разумеется, что это помогает только в том случае, если у вас есть доступ к Chrome и сайт его поддерживает.

person MarkD    schedule 10.04.2014

arrow_upward
0
arrow_downward

В инструментах разработчика перейдите на вкладку «Сеть». Щелкните стрелку (при наведении на нее появится надпись «Включить захват сетевого трафика»). Он превратится в квадрат, чтобы указать, что он захватывает сетевой трафик. Обновите страницу. Щелкните тип для сортировки по типу и найдите «text/css». Дважды щелкните файл. Нажмите «Тело ответа». Там вы увидите содержимое CSS.

Чтобы вручную добавить стили, перейдите в DOM Explorer. Щелкните элемент на вашей веб-странице, и вы должны перейти к этой части веб-страницы. Вы можете добавить стили к элементам в проводнике DOM или в левом окне, вы увидите «Встроенный стиль» (если нет классов CSS) или вы увидите «Встроенный стиль», а также класс CSS и его детали. . Вы можете нажать там, чтобы внести изменения.

person Kendevman    schedule 28.03.2019