—»     —»   DevTools в Internet Explorer 11
  Раздел: Браузеры   Нет комментариев  

DevTools в Internet Explorer 11



Встроенные инструменты для разработчиков в Internet Explorer (то есть, DevTools) длительное время не могли предложить всего необходимого функционала для отладки сайтов, что и делало этот набор инструментов абсолютно бесполезным. Среди проблем можно отметить отсутствие возможности инспектировать элементы в различных состояниях вроде :hover, :active, :focus и :visited. Точнее это было возможно, но делать это было крайне сложно и неудобно. В общем и целом, проводить отладку сайтов при помощи IE было практически невозможно.

Однако, начиная от 11 версии Internet Explorer, DevTools претерпели серьезные изменения, и сегодня готовы предложить нам абсолютно обновленный функционал. Давайте познакомимся с ним поближе.

Приступаем к работе

Internet Explorer 11 был представлен вместе с Windows 8. Если вы все еще используете Windows 7 и не обновили IE, то можете скачать установщик отсюда. Запустите установщик, а затем следуйте предложенным инструкциям.

Как только установка будет завершена, запустите Internet Explorer 11 и нажмите кнопку F12, чтобы запустить DevTools. Как отмечено ниже, новый DevTools претерпел полное обновление внешнего вида.

DevTools в Internet Explorer 11

Вдобавок, несмотря на то, что такая опция была доступна и в других браузерах, IE 11 теперь также предлагает опцию Inspect Element (Проверить объект) при нажатии правой кнопки мыши.

DevTools в Internet Explorer 11

DOM Explorer

DOM Explorer также был подвергнут изменениям. Прежде всего, что теперь в самом низу присутствует меню в формате хлебных крошек, которое в значительной степени облегчает навигацию по DOM-иерархии. Он также позволяет перемещать элементы внутри DOM путем простого перетаскивания курсором мыши.

DevTools в Internet Explorer 11

Вкладка стилей (Styles)

С правой стороны панели DOM Explorer, как и в случае с другими инструментами браузера, теперь можно видеть вкладку Стили со всеми CSS-правилами, примененными к DOM-элементам. Кроме того, этот инструмент теперь также укомплектован Intellisense. Так что, по мере того, как мы вписываем CSS, javascript или HTML-код, нам будут предлагаться возможные варианты написания, что позволяет ускорить процесс.

DevTools в Internet Explorer 11

К тому же, теперь только что примененные коды будут располагаться в самом верху, вместо того, чтобы скрываться за грудой остального кода в самом низу (для чего нужно было очень долго прокручивать страницу). Это ускоряет процесс отладки и делает его более интуитивным.

Вкладка трассировки (Trace)

При помощи данной вкладки теперь у вас есть возможность просматривать, какие стили были применены к элементу, и какие из них были изменены или переписаны.

DevTools в Internet Explorer 11

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

Вкладка шаблона (Layout)

Более того, во вкладке Layout вы также можете видеть диаграмму блока и информацию о свойствах: ширине, отступах, высоте, полях и границах. Кроме того, эта панель не просто отображает нам значения, мы теперь можем их редактировать.

DevTools в Internet Explorer 11

Обновленный Console API

Кроме изменений в интерфейсе и опыте взаимодействия, Internet Explorer 11 также предлагает несколько новых Console API, включая методы console.time и console.timeEnd. Вы можете использовать эти два метода для того, чтобы отслеживать время выполнения javascript-функций или блоков кода:

console.time('loop');
var index;
var a = ["a", "b", "c"];
for (index = 0; index < a.length; ++index) {
console.log(a[index]);
}
console.timeEnd('loop');

На этой странице вы можете видеть полный список новых Console API.

Эмулятор мобильных устройств

Ввиду увеличения количества мобильных пользователей, востребованность мобильных или адаптивных версий сайтов также возрастает, и сегодня в любом наборе инструментов для отладки крайне важно иметь помощников для отладки мобильных сайтов. И сегодня вы можете воспользоваться Mobile Emulator в IE.

На панели Emulation вы можете настроить режимы документа и браузера, ориентацию отображения, размер экрана и геолокации, которые позволяют вам изменять координаты текущего местоположения.

DevTools в Internet Explorer 11

В завершение

В целом, мы рады наблюдать, что Microsoft наконец-то решила уделить достаточно внимания Internet Explorer. Кроме поддержки современных CSS3 и HTML5, DevTools в Internet Explorer 11, как мы убедились выше, также претерпел серьезные изменения и сегодня способен тягаться с лидерами в данной сфере.

Однако стоит отметить, что касательно дополнительных свойств, он все равно отстает от конкурентов. В самом начале было сказано об отсутствии возможности просматривать элементы в различных состояниях, и эта проблема до сих пор не решена. Нам кажется, что эта функция важна для всех, кто так или иначе связан с кодом CSS.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Internet Explorer
Опубликовал Design FactoRy   Прочитано (раз): 3338   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031