Поделиться через

Новые возможности средств разработки (Microsoft Edge 112)

  • Статья

Чтобы проверка последние возможности Microsoft Edge DevTools и расширения Microsoft Edge DevTools для Microsoft Visual Studio Code и Visual Studio, ознакомьтесь с этими объявлениями.

Чтобы оставаться в курсе событий и получать последние возможности DevTools, скачайте предварительную версию Microsoft Edge для участников программы предварительной оценки. Независимо от того, используете ли вы Windows, Linux или macOS, рассмотрите возможность использования Canary (или другого канала предварительной версии) в качестве браузера разработки по умолчанию. Бета-версии, версии Dev и Canary Microsoft Edge выполняются как отдельные приложения, параллельно с стабильной выпущенной версией Microsoft Edge. См . статью Каналы предварительной оценки Microsoft Edge.

Чтобы узнать последние объявления, следите за новостями команды Microsoft Edge в Twitter. Чтобы сообщить о проблеме с DevTools или запросить новую функцию, отправьте сообщение о проблеме в репозиторий MicrosoftEdge/DevTools .

Видео: Новые возможности DevTools 112

Эскиз видео

Средство повышения производительности отменяет работу JavaScript во внепроцессных iframes

В предыдущих версиях Microsoft Edge выполнение JavaScript во внепроцессном iframe (OOPIF) было изолировано из средств разработки. В результате средству производительности не удалось применить исходные карты к событиям производительности из OOPIF. При записи профиля в средстве производительности средство может отображать в диаграмме пламени только минифицированные имена файлов и функций, но не неминифицированные имена:

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

В Microsoft Edge 112 средство производительности теперь загружает исходные карты и применяет их к событиям производительности, которые отслеживаются в OOPIF. В результате после записи профиля в средстве производительности теперь можно увидеть неминифицированные имена файлов и функций для выполнения JavaScript, которое происходит в OOPIF:

Неминифицированный стек вызовов из профиля, записанного в средстве производительности

См. также:

Средство "Обзор CSS" отображает несложные селекторы для быстрого повышения производительности

В средстве обзора CSS есть новый раздел Несложные селекторы, в котором отображается список не простых селекторов CSS при snapshot css веб-страницы. Этот список простых селекторов CSS в средстве "Обзор CSS " предоставляет быстрый способ определения распространенных виновников, которые могут вызывать длительные события пересчета стилей :

Новый список несложных селекторов в средстве обзора CSS

Это список селекторов, которые могут снизить производительность. Чтобы определить, действительно ли эти селекторы снижают производительность, используйте функцию Статистика выбора в средстве производительности .

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

  • При добавлении элементов в DOM или удалении из него.
  • При изменении атрибутов элемента, например class или id.
  • При вводе пользователем, например при перемещении мыши или изменении фокуса, что может повлиять на :hover правила.

Чтобы проанализировать производительность отдельного селектора CSS и проанализировать влияние изменений, используйте функцию Статистика выбора в средстве производительности .

См. также:

Средство просмотра JSON в Microsoft Edge поддерживает свертывание кода

Начиная с Microsoft Edge 110, у вас есть доступ к экспериментальной функции для просмотра JSON непосредственно в браузере: средству просмотра JSON. Ранее вы могли использовать расширения браузера или текстовые редакторы для просмотра JSON, но теперь вы можете проверять полезные данные JSON непосредственно в Microsoft Edge, независимо от того, из сети или с диска.

Начиная с Microsoft Edge 112 средство просмотра JSON теперь поддерживает свертывание кода. Средство просмотра JSON является экспериментальной функцией. Чтобы включить средство просмотра JSON и получить доступ к свертывание кода, выполните следующие действия:

  1. Перейдите по адресу edge://flags.

  2. В текстовом поле Флаги поиска начните вводить средство просмотра JSON.

  3. В раскрывающемся меню Средство просмотра JSON выберите Включено. В правом нижнем углу появится кнопка "Перезапустить ".

  4. Нажмите кнопку Перезапустить .

  5. Перейдите в JSON-файл, например https://microsoftedge.github.io/Demos/json-dummy-data/256KB.json. Номера строк отображаются слева.

  6. Щелкните значок шестеренки (значок шестеренки средства просмотра JSON) в правом верхнем углу и установите флажок Свертывание кода .

После включения свертывания кода можно развертывать и сворачивать объекты и массивы в проверяемом json:

Свертывание кода в средстве просмотра JSON Microsoft Edge

Отправьте нам свой отзыв!

См. также:

Улучшения режима фокусировки

Режим фокусировки — это новый экспериментальный пользовательский интерфейс для средств разработки. Режим фокусировки упрощает и упрощает пользовательский интерфейс Средств разработки, обеспечивая максимальную настройку без ущерба для надежного набора функций в средствах. В Microsoft Edge 112 режим фокусировки получил следующие улучшения:

При нажатии клавиши ESC отображается или полностью скрывается быстрое представление

В предыдущих версиях Microsoft Edge в режиме фокусировки панель быстрого просмотра всегда отображалась как свернутая или развернутая. При нажатии клавиши ESC панель быстрого просмотра была развернута, если она была свернута, и наоборот. Однако при выборе средства "Консоль" на панели действий при нажатии клавиши ESC при сворачивании панели быстрого просмотра отображается пустое представление. В Microsoft Edge 112 эта проблема устранена.

Теперь при нажатии клавиши ESC отображается или полностью скрывается панель быстрого просмотра . Если панель быстрого просмотра в настоящее время скрыта, при нажатии клавиши ESC отображается развернутая панель быстрого просмотра :

Расширенная панель быстрого просмотра путем нажатия клавиши ESC

Если панель быстрого просмотра отображается (будь то свернутая или развернутая панель быстрого просмотра ), нажатие клавиши ESC полностью скрывает панель быстрого просмотра и панель:

Панель быстрого просмотра и панель полностью скрыты при нажатии клавиши ESC

Значок Узла для выделенных средств разработки больше не перекрывает первый значок на панели действий

В режиме фокусировки, когда средства разработки обнаруживают, что сервер Node.js запущен, отображается значок Узла. Щелкнув этот значок, откроется выделенный раздел Средства разработки для Node.

Перед Microsoft Edge 112 значок узла перекрывает первый значок инструмента, когда панель действий находится в вертикальной ориентации, что затрудняет выбор первого средства. Эта проблема устранена. При вертикальном расположении панели действий нет перекрытия значка узла и первого значка инструмента:

Значок Узла больше не перекрывает первый значок инструмента на панели действий.

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

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

Ранее при выборе значка с помощью клавиатуры или наведении указателя мыши на значок отображались две метки одновременно. Эта проблема устранена. Отображается только одна метка:

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

Объявления из проекта Chromium

Microsoft Edge 112 также включает следующие обновления из проекта Chromium: