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


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

Чтобы проверка последние возможности 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 .

Видео: Microsoft Edge | Новые возможности devTools 96

Эскиз видео

Доступен новый пользовательский интерфейс DevTools (в предварительной версии)

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

Чтобы попробовать этот новый пользовательский интерфейс в Microsoft Edge версии 96, выберите Параметры (значок шестеренки параметров в средствах разработки) >Режим фокусировкиэкспериментов>.

Начиная с Microsoft Edge версии 96, флажок эксперимента помечен как Режим фокусировки , а не Режим фокусировки и Подсказки средств разработки.

Этот пользовательский интерфейс все еще находится в разработке и может измениться в будущих версиях Microsoft Edge. Мы рады услышать ваши отзывы об этом новом пользовательском интерфейсе DevTools. Отправьте нам свой отзыв, отправив в твиттере @EdgeDevTools. Или, когда эксперимент режим фокусировки включен, в нижней части панели действий выберите Справка (значок справки на панели действий в режиме фокусировки) >Обратная связь, чтобы отобразить окно Отправить отзыв .

Режим фокусировки, включая панель действий

См. также:

Консоль может снова появиться на верхней и нижней панелях

Начиная с Microsoft Edge версии 87, вы можете перемещать любой инструмент между верхней и нижней панелями, включая консоль. Тем не менее, мы слышали от разработчиков, что перемещение средства консоли неоднократно было громоздким. Начиная с Microsoft Edge версии 96, интерфейс по умолчанию для средства "Консоль" был восстановлен, что позволяет быстро переключаться между полноэкранным режимом консоли (на верхней панели) и режимом разделения экрана (с консолью, отображаемой на нижней панели), без перемещения средства Консоли.

Консоль можно открыть в ящике (теперь быстрое представление) в нижней части devTools вместе с другим инструментом:

Если на панели инструментов main выбран инструмент, отличный от консоли, откроется окно с окном Консоль.

При выборе консоли на верхней панели нижняя панель автоматически сворачиваться, если на нижней панели отображалась консоль:

Если выбран пункт Консоль на панели инструментов main, выдвижной ящик автоматически сворачиваться, если в ящике отображалась консоль

Если вы хотите разрешить открытие средства консоли только в одном месте, можно настроить поведение консоли:

  1. На панели инструментов main или панели инструментов Панели инструментов щелкните правой кнопкой мыши вкладку Консоль и выберите пункт Настроить консоль. > ОтобразитсястраницаПараметры параметров.

  2. В разделе Консоль снимите флажок Показать вкладку Консоль на панели и ящике main, а затем нажмите кнопку Закрыть (x).

См. также:

Расширение microsoft Edge DevTools Visual Studio Code

Общие сведения об этом расширении см. в статье Расширение Microsoft Edge DevTools для Visual Studio Code.

Отображение веб-проекта в редакторе и имитация различных устройств

Расширение Microsoft Edge DevTools для Visual Studio Code теперь поддерживает закрепленную экранную трансляцию и эмуляцию устройства:

Щелкните значок экранной трансляции, чтобы просмотреть браузер в Visual Studio Code

Веб-проект можно просмотреть на выделенной вкладке внутри Visual Studio Code, а также имитировать различные устройства:

Экранная трансляция, показывающая текущий документ в эмулированном iPhone 5 правильного размера с эмулированным интерфейсом сенсорного экрана

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

Отчеты о проблемах в режиме реального времени

Расширение также теперь поддерживает динамические встроенные отчеты о проблемах. Вместо того, чтобы узнать о проблемах в отдельном средстве, Visual Studio Code выделяет проблемы в исходном коде и сообщает о них в реальном времени при вводе кода:

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

Дополнительные сведения см . в разделе Встроенный и динамический анализ проблем.

Средство "Источники" теперь уведомляет вас о том, что исходные карты не могут быть загружены

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

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

Средство

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

Средство

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

См. также:

Открытие исходных файлов в Visual Studio Code теперь лучше интегрируется со средством "Источники"

В предыдущих версиях Microsoft Edge включение файлов с открытым кодом в Visual Studio Code эксперименте приводило к неожиданному поведению, когда вы уже использовали средство "Источники" в DevTools. Установка точек останова приведет к Visual Studio Code или документации по правильной настройке эксперимента.

В Microsoft Edge версии 96 файлы с открытым исходным кодом в эксперименте Visual Studio Code теперь лучше интегрируются со средством "Источники".

  • Если средство "Источники" открыто, а затем вы включаете открытые исходные файлы в Visual Studio Code эксперименте, установка точек останова или открытие файлов теперь открывает средство "Источники", а не направляет вас на Visual Studio Code или документацию для правильной настройки эксперимента.

    Если средство

  • Как и в более ранних версиях Microsoft Edge, если средство "Источники" не открыто в средствах разработки, а затем вы включите открытые исходные файлы в Visual Studio Code эксперименте, установка точек останова или открытие файлов из средств, отличных от средства "Источники", открывает файл в Visual Studio Code.

См. также:

При выборе раскрывающегося треугольника в пользовательском интерфейсе DevTools открывается меню

В более ранних версиях Microsoft Edge DevTools при выборе значка треугольника рядом с раскрывающимся меню раскрывающееся меню не отображалось. Чтобы открыть раскрывающееся меню, необходимо щелкнуть выбранный пункт меню слева от значка треугольника, например Нет регулирования:

При щелчке значка треугольника раскрывающегося меню не открывалось раскрывающееся меню

В Microsoft Edge версии 96 эта проблема устранена. При выборе значка треугольника для любого раскрывающегося меню в Средствах разработки открывается раскрывающееся меню:

Щелкнув значок треугольника, откроется раскрывающееся меню

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Оригинальной страницей объявлений из проекта Chromium является Что нового в DevTools (Chrome 96) и автор Джеселин Йен.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.