Обновления F12 в канале разработчика

В канал разработчика Internet Explorer добавлено ряд отличных больших и маленьких обновлений средства разработчика F12. Загрузки доступны для пользователей ОС Windows 8.1 и Windows 7 с пакетом обновления 1 (SP1), которые используют браузер Internet Explorer 11. Испробуйте функциональные возможности, описанные ниже, и оставьте свой отзыв о них на веб-сайте Microsoft Connect.

Что нового?

Рассмотрим новые возможности пользовательского интерфейса средств разработчика F12 в общем, а затем — обновления каждого средства в отдельности.

• Изменения в пользовательском интерфейсе F12
• Консоль
• Проводник DOM
• Отладчик
• Эмуляция
• Отклик пользовательского интерфейса
• Память

Изменения в пользовательском интерфейсе F12

• Новые значки и уведомления

  Изменены значки для средств Память и Профилировщик.

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

  

• Навигация супермножества F6 по средствам

  Использование клавиши F6 подобно использованию клавиши TAB для навигации в средстве, но в этом случае перемещение происходит по выбранному набору наиболее часто используемых элементов на панели инструментов, а не по каждому доступному для выбора элементу. Это часть общей системы упрощения использования клавиатуры для перемещения по содержимому в пределах одного средства и между несколькими средствами.

• Перемещение вперед и назад между недавно использованными средствами с помощью клавиатуры

  Используйте сочетание клавиш CTRL + [, чтобы перейти назад к журналу навигации средства, и CTRL + ], чтобы перейти вперед — аналогично использованию стрелок назад и вперед при просмотре.

• Быстрый доступ к режиму документов

  Хотите получить доступ к режиму документов без необходимости переключения средств? Мы добавили новое раскрывающееся меню, которое предоставляет доступ к режиму документов из любого средства.

  

Изменения консоли

• Console.timeStamp()

  При вызове из консоли или из кода, на консоль выводится время, в течение которого текущая вкладка находится открытой, в миллисекундах. Если вызывается при выполнении сеанса профилирования с помощью средства Отклик пользовательского интерфейса, на временной шкале сеанса создается пользовательская отметка с меткой времени, которое прошло с момента запуска сеанса.

• CTRL + L удаляет все сообщения консоли

• Точное автозаполнение

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

  В список автозаполнения консоли добавлены $, $$, $x, $0-$5 и $_ для удобства их использования, а также для того, чтобы поведение консоли было более согласованным с другими браузерами.

• Индикатор устаревших сообщений

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

  

Изменения в проводнике DOM

• Индикаторы изменений на панели "Вычисленные"

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

  

Изменения в отладчике

• Назначение сопоставлений с исходным кодом

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

  

• Автозаполнение для контрольных значений

  Теперь при добавлении контрольного значения отображаются варианты автозаполнения.

  

• Проверка возвращаемого значения

  При прерывании функции с использованием возвращаемого значения пошагово выполняйте функцию, пока не дойдете до заключительной фигурной скобки. Возвращаемое значение будет отображено в разделе Локальные на панели Контрольные значения. Снова выполните заход, и значение будет возвращено в код, который его вызывал.

  Для быстрой демонстрации используйте этот код в консоли:

  function showval() { var x = 0; x++; debugger; return x; } showval();

  Он вызовет функцию, создаст прерывание в debugger, и вы сможете выполнить заход, чтобы увидеть возвращаемое значение.

• Множественный выбор для точек останова

  Для выбора нескольких точек останова на панели Точки останова используйте методы CTRL + ЩЕЛЧОК МЫШЬЮ, SHIFT + ЩЕЛЧОК МЫШЬЮ или CTRL + A.

• Продолжение и игнорирование прерываний

  Нажмите клавишу F5, чтобы перейти к следующему прерыванию. Удерживайте клавишу F5, чтобы пропустить несколько прерываний (пока вы не отпустите клавишу F5).

• Точки останова и трассировки событий

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

  

Изменения в средстве "Отклик пользовательского интерфейса"

• Сеансы производительности импорта/экспорта

  Не обязательно воспроизводить тестовый случай при каждом намерении проанализировать создаваемые им данные или поделиться этими данными с коллегами. Значки импорта (папка) и экспорта (диск) на панели значков средства Отклик пользовательского интерфейса позволяют сохранять снимки памяти в файл, который можно будет импортировать позже.

• Предварительный просмотр изображения

  Если вы увидели HTTP-запрос для изображения, и вам стало интересно, что это за изображение, теперь его можно просмотреть в сведениях о событии.

  

• Фильтрация событий

  Кнопка Фильтровать события скрывает за собой большие возможности. При нажатии этой кнопки открывается меню, которое позволяет фильтровать события различными способами, и каждый способ имеет существенное воздействие.

  • Фильтр имени события

    Фильтр для любого имени события, соответствующего тексту фильтра.

  • Фильтр активности пользовательского интерфейса

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

  • Фильтр порогового значения времени

    Эта функция отфильтровывает события верхнего уровня продолжительностью менее 1 мс. Во многих случаях это значительно упрощает представление и помогает сконцентрироваться на более эффективных событиях.

  

• События сценариев HTML5

  Если вы используете прослушиватели запросов мультимедиа или наблюдатели изменений, теперь вы сможете определять соответствующие затраты при запуске сеанса профилирования производительности.

  

• Группирование кадра

  Кнопка между раскрывающимся меню Сортировать по и меню Фильтровать события переключает Группирование кадра. Группы верхнего уровня объединяются в соответствующие единицы работы (или "кадры") в течение периодов времени, когда выполнялись анимация или визуальные обновления. Кадры рассматриваются как другие события, поэтому их можно сортировать и фильтровать, и они предоставляют Сводку инклюзивного времени.

  

• Пользовательские измерения

  Если вы используете API performance.mark() для добавления треугольников на временную шкалу, указывая, где произошло то или иное событие, API performance.measure() расширит возможности использования меток производительности. Используйте метод performance.measure(), чтобы создать событие Пользовательское измерение, включающее время, прошедшее между двумя событиями performance.mark(), щелкните правой кнопкой мыши это событие и воспользуйтесь функцией Фильтровать по событию, чтобы выбирать события, которые произошли только между этими двумя метками.

  

• Колоризация для модели DOM

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

• Сводка выбора

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

  

• Поддержка console.timeStamp()

  С помощью метода console.timeStamp() в коде или на консоли в процессе профилирования создается пользовательская отметка на временной шкале, указывающая время, прошедшее с начала сеанса профилирования.

Изменения в средстве "Память"

• Свертывание доминант

  Свертывание доминант упрощает содержимое снимка в результате удаления объектов из представлений верхнего уровня, которые являются логическими компонентами другого объекта (например, <BR> внутри <DIV> или область, сохраняемая функцией) и представляют собой дополнительные сведения, которые не помогают анализу данных, а наоборот, могут привести к пустой трате времени.

  Например, на изображении ниже приведены представления "до" и "после", отображая, как свертывание доминант помогает просматривать сведения, предоставляемые средством. Свернутое представление отображает 30 элементов <DIV> HTML, что занимает 15,64 МБ памяти и предоставляет сведения об отключенных узлах DOM. Во многих случаях не так важно знать композицию объекта как mhch, как знать то, что она слишком велика и подвержена утечкам (особенно при использовании сторонних библиотек).

  

• Колоризация элементов DOM, строковых и числовых литералов

  Эта функция добавляет колоризацию к элементам DOM, строковым и числовым литералам. Кроме придания более общего вида и поведения содержимому в различных средствах F12, она делает анализ памяти несколько более интересным визуально.

• Фильтрация цикла корней

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

• Сеанс импорта/экспорта

  Не обязательно воспроизводить тестовый случай при каждом намерении проанализировать создаваемые им данные или поделиться этими данными с коллегами. Значки импорта (папка) и экспорта (диск) на панели значков средства Память позволяют сохранять снимки памяти в файл, который можно будет импортировать позже.

  

Изменения в эмуляторе

• Устойчивость и сброс параметров

  Значок Сохранять параметры эмуляции добавлен в средстве Эмулятор. Текущие параметры эмуляции сохраняются до тех пор, пока не будут отключены, что позволяет работать в браузере, закрывать его и возвращаться к работе при неизменных параметрах эмуляции. Справа находится значок Сброс параметров эмуляции, с помощью которого можно быстро сбросить средство к значениям по умолчанию.

  

Связанные разделы

Загрузить канал разработчика Internet Explorer для Windows 8.1

Загрузить канал разработчика Internet Explorer для Windows 7 с пакетом обновления 1 (SP1)