Средства разработчика internet explorer 11

Internet Explorer 11 в Windows 8.1 и Windows 7 поставляется с полностью переработанным и усовершенствованным набором средств разработчика, встроенных в браузер, помогающих разработчикам создавать, диагностировать и оптимизировать работу современных веб-сайтов и приложений на многих устройствах. Новые средства, которые мы ради краткости называем просто F12, позволяют веб-разработчикам работать быстро и эффективно.

Рабочие группы Visual Studio и Internet Explorer работали совместно, чтобы создать средства F12, в основу которых заложен принцип помочь разработчикам быстро переходить от проблемы к решению с использованием значимых данных. Новый набор F12 обеспечивает быстрое и гибкое взаимодействие с Интернетом с помощью средств для диагностики и исправления проблем производительности, а также средств, которые помогут вам глубже понять, как Internet Explorer выполняет разметку и отрисовку веб-приложений. Средства F12 поддерживает быстрый интерактивный рабочий процесс, используемый современными веб-разработчиками.

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

  • Средства анализа отклика пользовательского интерфейса и профилирования памяти, помогающие разработчикам создавать быстрые и гибкие веб-приложения.
  • Live DOM Explorer и средство проверки CSS, обновляемые вместе со страницей, чтобы разработчики могли в интерактивном режиме исследовать, как динамический контент влияет на разметку и стили
  • Возможность отладки JavaScript, быстро запускаемой без обновления страницы, чтобы разработчики могли быстрее приступить к работе

По мере использования средств F12 вы заметите и многие другие усовершенствования, которые помогут вам обеспечить быстрый интерактивный рабочий процесс:

  • Быстрый доступ к этим средствам посредством щелчка правой кнопкой мыши пункта меню с помощью "элемента проверки"
  • Эффективное взаимодействие с клавиатурой
  • Широкие возможности копирования элементов и компонентов из инструментальных средств, благодаря чему их можно вставлять в любой редактор без дополнительного форматирования

Самое главное при этом состоит в том, что эти средства теперь отображают наиболее полную и точную информацию — от правил @media и !important в DOM Explorer до поэлементной структуры затрат в профилировщике отклика пользовательского интерфейса. Эти инструментальные средства также предоставляют непосредственно значимые данные; например, профилировщик памяти определяет узлы DOM, которые являются "живыми", но на которые нет ссылок из разметки или дерева отрисовки.

Возможности нового набора F12 представлены и в Visual Studio, поэтому разработчикам обеспечен согласованный и непрерывный опыт работы со всеми нашими инструментами и платформами веб-разработки.

Давайте теперь коротко рассмотрим эти инструменты в действии.

Средство анализа отклика пользовательского интерфейса помогает вам понять, где именно тратится время ЦП, чтобы ваше приложение смогло полностью реализовать свой потенциал в области производительности. Данное средство дает вам необходимое понимание внутренних особенностей работы Internet Explorer, обеспечивая визуализацию во времени выполнения кодов HTML, CSS и JavaScript, а также важных сопутствующих эффектов, таких как разметка и сборка мусора. С одного взгляда вы сможете точно увидеть, какова скорость отклика вашего приложения и его отрисовки. Это позволит вам определить конкретные источники узких мест и более осмысленно подойти к его оптимизации.

Анализ использования памяти приложения с помощью профилировщика памяти

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

Хотя JavaScript является средой, в которой осуществляется сбор мусора, приложения обычно потребляют больше памяти просто из-за того, что ссылки на объекты не были (и не могут быть) освобождены. Средство анализа памяти поможет вам выявить эти проблемы, предоставив информацию по каждому объекту на странице, независимо от того, является ли он объектом JavaScript или DOM. С помощью этой информации вы сможете, например, увидеть, сколько памяти удерживается элементом и какие объекты поддерживают его сохранение. Но самое главное, вы можете сравнить два моментальных снимка и увидеть, что изменилось. Это позволит вам понять, почему ваше приложение стало использовать больше памяти, и исправить это положение.

Снимок памяти типа ”куча”, показывающий отключенные элементы DOM

Быстрое понимание особенностей производительности приложения с помощью панели мониторинга производительности

Чтобы помочь вам быстро выявить проблемы, влияющие на производительность работы вашей страницы, в Internet Explorer 11 имеется "настраничный" виджет, называемый панелью мониторинга производительности, доступ к которой осуществляется с помощью сочетания клавиш Ctrl+Shift+U или соответствующего пункта меню "Инструменты" (Alt+T). Эта панель отображает в Internet Explorer в динамическом режиме статистики для основных метрик производительности, таких как время отрисовки, память, количество кадров в секунду (кадров/с) и использование ЦП. Панель мониторинга производительности не требует использования средств F12 и может также использоваться в современных браузерах.

Читайте также:  Стикеры блоггеров в вайбере

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


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

Проверка разметки и стилей

DOM Explorer при внесении изменений в таблицу CSS упрощает получение правильного значения свойства или свойств с помощью IntelliSense. Вы сможете легко увидеть, какие свойства являются ошибочными или оказались нераспознанными, и затем копируете правило, чтобы повторно применить его к вашему источнику.

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

При выполнении отладки вам, вероятно, захочется наладить взаимодействие со своим веб-сайтом. Консоль является ключевым инструментом для выполнения этой задачи. Вы можете получить доступ к консоли в любое время, что делает использование этой интерактивной среды с IntelliSense и визуализаторами объектов эффективным. Консоль также предоставляет широкий диапазон специализированных API, что позволяет вам вести журнал вывода, анализировать величину затраченного времени в определенном коде и предоставлять визуализаторы объектов, когда потребуется провести углубленную проверку объектов JavaScript.

В этой записи блога просто содержится эскиз описания новых элементов в средствах F12. Вы можете найти полный список новых функциональных возможностей, доступных разработчикам в Internet Explorer 11 в статье "Новые возможности средств F12" и в "руководстве по Internet Explorer 11 Preview для разработчиков." Вы можете также получить дополнительные сведения в тестовой демонстрации по Internet Explorer, "F12 Adventure".

Установите Windows 8.1 Preview из Магазина Windows и попробуйте поработать с Internet Explorer 11 или с Internet Explorer 11 Developer Preview для Windows 7.

С нетерпением ждем ваших отзывов и надеемся на длительное сотрудничество с сообществом разработчиков. Поделитесь вашими предложениями через средство отправки отзывов и предложений в Internet Explorer 11 или на сайте Connect.

— П. Дж. Хуг (PJ Hough)
, вице-президент, Visual Studio

Кто-нибудь сталкивался с такой проблемой ? Отказывается работать средство разработчика в ie 11 (

1 ответ 1

Нужно скачать и установить обновление от Windows 7 (KB3008923) и перезагрузить компьютер.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками internet-explorer или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.12.20.35703

Это содержимое относится к устаревшей версии средств разработчика F12. Ознакомьтесь с нашей новейшей документацией средств F12.

Средства F12 позволяют отладить и протестировать веб-страницы, а также ускорить их загрузку. Кроме того, они могут быть полезны при настройке макета CSS или поиске причин утечки памяти.

Принцип работы средств разработчика F12

Средства разработчика F12 для IE11 были полностью перестроены. Новый пользовательский интерфейс и дополнительные функции позволяют легче и быстрее выполнять разработку и отладку. Еще больше усовершенствований будет выпущено в обновлениях.

Чтобы воспользоваться этими инструментами, нажмите клавишу F12 на клавиатуре. Если на клавиатуре нет функциональных клавиш, воспользуйтесь меню Сервис.

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

Проводник DOM (CTRL+1)

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

Читайте также:  Стилистический анализ художественного произведения

Новые возможности Проводник DOM:

  • Варианты автозаполнения IntelliSense при редактировании атрибутов HTML и свойств CSS.
  • Упорядочение узлов DOM с помощью функции перетаскивания.

Разработка и отладка выполняются легко и удобно:

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

Новые возможности в Проводнике DOM в ОС Windows 8.1 с обновлением 1 включают следующее.

  • Переключатель псевдоклассов отображает стили при наведении и посещенные режимы в результате простой установки флажка.
  • Панели Трассировка и Вычисленные были объединены, чтобы освободить место для новой панели Изменения, которая отслеживает все изменения, внесенные в стили через Проводник DOM.

Новые возможности в Проводнике DOM в накопительном пакете обновления для системы безопасности Internet Explorer (KB2976627) включают следующее.

  • На панель Вычисленные добавлены "индикаторы изменений" — визуальные индикаторы, которые указывают на то, что стиль был изменен.
  • Новое средство Палитра упрощает выбор цвета с помощью пипетки, ползунков или выбора предустановок.

Консоль (CTRL+2)

Консоль позволяет работать с выполняемым кодом: данные вводятся из командной строки, получение информации осуществляется с помощью API отладки на консоли. Для разработчиков работа с консолью стала более удобной. Теперь ее можно открывать в нижней части любого другого средства, используя кнопку консоли в правом верхнем углу пользовательского интерфейса рядом с кнопкой справки или нажав сочетание клавиш CTRL+`.

Новые возможности Консоль:

  • Кнопка и комбинация клавиш CTRL+` для открытия консоли в нижней части любого средства.
  • Новые методы API отладки на консоли для синхронизации, подсчета, группирования и т. д.
  • Варианты автозаполнения IntelliSense для ускорения ввода с командной строки: сокращают ошибки при вводе и выявляют тонкости работы с API JavaScript.

Разработка и отладка выполняются легко и удобно:

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

Новые возможности в Консоли в ОС Windows 8.1 с обновлением 1 включают следующее.

  • Раскрывающееся меню Целевой объект применяет команды консоли к выбранным элементам iFrames в документах.
  • Переключатель Очистить при переходе предоставляет элемент управления для сохранения или удаления сообщений консоли после перехода новую страницу.
  • Параметр Всегда записывать сообщения консоли разработчика позволяет больше не открывать консоль для запуска записи вывода.

Новые возможности в Консоли в накопительном пакете обновления для системы безопасности Internet Explorer (KB2976627) включают следующее.

  • Команда console.timeStamp() отображает время в миллисекундах, в течение которого текущая вкладка браузера находится открытой, или ее можно использовать в ходе сеанса профилирования Отклик пользовательского интерфейса для создания меток времени на временной шкале сеанса.
  • Указание устаревшего сообщения деактивирует значки сообщений консоли с предыдущих страниц, если функция Очистить при переходе отключена. Это упрощает отслеживание только текущих сообщений.
  • Обновлена функция автозаполнения IntelliSense: удалены свойства индексатора, которые создавали множественность вариантов.
  • CTRL + L теперь очищает консоль.

Отладчик (CTRL+3)

Отладчик предназначен для проверки кода: что выполняется, когда и каким образом. Можно приостановить работу кода, запустить его пошаговое выполнение, просмотреть значения переменных и состояние объектов в каждом шаге.

Новые возможности Отладчик:

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

Разработка и отладка выполняются легко и удобно:

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

Новые возможности в Отладчике в ОС Windows 8.1 с обновлением 1 включают следующее.

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

Новые возможности в Отладчике в накопительном пакете обновления для системы безопасности Internet Explorer (KB2976627) включают следующее.

  • Выбрать файл соответствия источника позволяет указать соответствие источника для файла, если это не задано внутренне.
  • Точки останова и точки трассировки можно связывать с событиями.
  • Стеки асинхронных вызовов позволяет просматривать соответствующие стеки вызовов при прерывании работы обработчиков ответа для простоты отладки асинхронные вызовов.
Читайте также:  Телефоны с маленьким sar

Сеть (CTRL+4)

На вкладке Сеть содержатся подробные сведения обо всех сетевых запросах, происходящих при загрузке и выполнении ваших веб-страниц.

Новые возможности Сеть:

  • Более подробные сведения о синхронизации запросов.
  • Улучшенное получение сжатой информации.

Разработка и отладка выполняются легко и удобно:

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

Отклик пользовательского интерфейса (CTRL+5)

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

Отклик пользовательского интерфейса — новый инструмент F12 в IE11. Некоторые интересные возможности:

  • Идентификация различных источников активности ЦП, вызываемой медленной работой пользовательского интерфейса.
  • Определение частоты кадров, относящейся к вашим веб-страницам.
  • Установка отметок на временной шкале, чтобы изолировать пользовательские сценарии.

Разработка и отладка выполняются легко и удобно:

  • Проверка оптимизации кода.
  • Ускорение работы ваших веб-страниц.

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

  • Возможность фильтрации по типу событий помогает сосредоточиться на важных в данный момент типах событий.
  • Фильтровать по событию позволяет находить интересующие события и элементы в пределах инклюзивного времени.
  • Обновления модели DOM, разработанные JavaScript, теперь перечислены как дочерние элементы события Сценарии.

Новые возможности в средстве Отклик пользовательского интерфейса в накопительном пакете обновления для системы безопасности Internet Explorer (KB2976627) включают следующее.

  • Сохранение и загрузка сеансов профилирования для дальнейшего анализа.
  • HTTP-запросы для изображений отображают представление предварительного просмотра изображений в области сведений.
  • Фильтр активности пользовательского интерфейса помогает сосредоточиться на событиях связанных с пользовательским интерфейсом, или отфильтровать их.
  • Фильтрация элементов занимает менее 1 мс и помогает рационализировать отчет профилирования.

Профили (CTRL+6)

Профили — средство измерения скорости выполнения кода JavaScript. Оно отображает функции, вызываемые в процессе профилирования, количество вызовов и длительность их выполнения.

Новые возможности Профили:

  • Отслеживание функций, которые выполнялись в рабочих веб-процессах.
  • Более четкая и ускоренная реакция пользовательского интерфейса.

Разработка и отладка выполняются легко и удобно:

  • Изоляция наиболее медленных участков кода.
  • Проверка оптимизации кода.
  • Ускорение работы ваших веб-страниц

Память (CTRL+7)

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

Память — новый инструмент F12 в IE11. Некоторые интересные возможности:

  • Временная шкала с информацией о текущих изменениях памяти.
  • Моментальные снимки использования памяти в определенных точках.
  • Сравнение снимков для определения конкретных точек роста использования памяти.

Разработка и отладка выполняются легко и удобно:

  • Идентификация отсоединенных узлов DOM.
  • Определение точек, в которых растет объем используемой памяти.
  • Вычисление объема памяти, используемого объектами.

Новые возможности в средстве Память в ОС Windows 8.1 с обновлением 1 включают следующее.

  • Объекты, связанные с функциями, привязываются к Отладчику. Если щелкнуть элемент, откроется соответствующий сценарий в Отладчике, и в сценарии — область этой функции.
  • Меню Область добавлено в сравнения снимков для предоставления другой перспективы.
  • Теперь поддерживаются контейнеры Set, Map и WeakMap из ECMAScript 6.

Новые возможности в средстве Память в накопительном пакете обновления для системы безопасности Internet Explorer (KB2976627) включают следующее.

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

Эмуляция (CTRL+8)

Эмуляция позволяет тестировать веб-страницы, выполняя их на экранах с разными размерами, и проверять их ответ на различные строки агента пользователя.

Эмулятор — новый инструмент F12 в IE11. Некоторые интересные возможности:

  • Эмуляция нескольких размеров и разрешений экрана.
  • Эмуляция GPS.

Разработка и отладка выполняются легко и удобно:

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

Новые возможности в Эмуляторе в ОС Windows 8.1 с обновлением 1 включают следующее.

  • Переключатель для сохранения параметров эмуляции при работе с разными веб-сайтами и даже окнами.
  • Среди причин режима документов можно найти причину, почему Internet Explorer эмулирует другой режим.
  • Поддержка Режима предприятия.

Новые возможности в Эмуляторе в накопительном пакете обновления для системы безопасности Internet Explorer (KB2976627) включают следующее.

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

Adblock detector