Видео о веб-разработке с Microsoft Edge

Узнайте о новых технологиях и продуктах веб-разработки Microsoft Edge, включая средства разработчика, API и функции веб-платформы, прогрессивные веб-приложения и WebView2.

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

Корпорация Майкрософт регулярно публикует новые видео на канале YouTube Microsoft Edge, и они также перечислены ниже.

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

Канал Microsoft Edge на сайте YouTube

Все видео о разработке с помощью Microsoft Edge можно найти на канале Microsoft Edge (@MSFTEdge) на YouTube.

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

Объяснение ошибок консоли средств разработчика с использованием Copilot в Edge

8 февраля 2024 г.

Эскиз видео

Средства разработчика " Консоль" и "Источники" в Microsoft Edge теперь интегрируются с Copilot в Microsoft Edge, чтобы помочь вам понять ошибки и исходный код. Используйте эту функцию для получения справки по отладке кода.

См. также:

Средство просмотра JSON

17 августа 2023 г.

Эскиз видео

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

См. также:

Браузер Microsoft Edge | Новые возможности средств разработчика 113 и 114

24 июля 2023 г.

Эскиз видео

Обложки:

  • Средство анализа сбоев Crash Analyzer.
  • Агрегатируйте статистику селектора CSS.
  • Предупреждения для свойств CSS, запускающих макет.
  • Улучшения средств работы с памятью .
  • Улучшения специальных возможностей.
  • Улучшенная поддержка режима высокой контрастности в расширении DevTools для VS Code.
  • console.table().

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 112

26 апреля 2023 г.

Эскиз видео

Обложки:

  • Несокращенные JS-имена для OOPIF в инструменте "Производительность ".
  • Непростые селекторы CSS в средстве обзора CSS .
  • Свертывание кода в средстве просмотра JSON.
  • Улучшения в пользовательском интерфейсе средств разработчика.
  • Новые маркеры для точек входа и условных точек останова.
  • Изменение тем в средствах разработчика.

См. также:

Браузер Microsoft Edge | Что нового в средствах разработчика 111

28 марта 2023 г.

Эскиз видео

Обложки:

  • Удаленная отладка веб-содержимого на устройствах XBOX и HoloLens.
  • Неминифицированные имена файлов и функций в средстве "Производительность ".
  • Можно скопировать таблицу CSS Selector Stats в Excel.
  • Функции эмуляции отрисовки на панели инструментов режима устройства.
  • Боковая панель средства "Улучшенные элементы ".
  • Улучшенные специальные возможности быстрого просмотра .
  • Функции цветов высокой четкости.
  • Настройка столбцов средства " Сеть ".

См. также:

Браузер Microsoft Edge | Новые возможности средств разработчика 110

16 февраля 2023 г.

Эскиз видео

Обложки:

  • Более быстрая запись snapshot кучи.
  • Улучшена настройка режима фокусировки (пользовательский интерфейс средств разработчика).
  • Улучшения специальных возможностей и контрастных тем.
  • Автоматическая печать на месте в средстве "Источники ".
  • Имитация prefers-color-scheme.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 109

17 января 2023 г.

Эскиз видео

Обложки:

  • Общий доступ к трассировке памяти и производительности с большим количеством данных.
  • Статистика селектора в инструменте "Производительность ".
  • Отслеживание объектов из сборки мусора (GC'd) в средстве "Память ".
  • Расширение для визуализатора моментальных снимков кучи.
  • Панель быстрого просмотра в режиме фокусировки переработана.
  • Новые команды для областей "Стили ".
  • Осмотр элементов.

См. также:

Браузер Microsoft Edge | Новые возможности средств разработчика 108

16 декабря 2022 г.

Эскиз видео

Обложки:

  • Улучшена навигация в палитре команд.
  • Исправления режима высокой контрастности.
  • Отключено предупреждение JavaScript.
  • См. неактивные свойства CSS.
  • Новая документация для создания собственных средств.
  • WebDriver доступен в macOS для Apple M1.
  • Используйте отсоединенные элементы для поиска утечек DOM.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 107

8 ноября 2022 г.

Эскиз видео

Обложки:

  • Текстовые подписи в пользовательском интерфейсе средств разработчика в режиме фокусировки.
  • Новое сочетание клавиш для палитры команд.
  • Большие моментальные снимки кучи в средстве "Память ".
  • Исправления режима высокой контрастности.
  • Отключите параметр "Поиск по мере ввода".
  • Автоматизируйте WebView2 с помощью Playwright.
  • Настройка сочетаний клавиш.

См. также:

Браузер Microsoft Edge | Научитесь использовать средство "Сеть"

6 октября 2022 г.

Эскиз видео

Узнайте, как использовать средство "Сеть " в средствах разработчика Microsoft Edge.

Обложки:

  • Почему средство "Сеть " в средствах разработчика необходимо веб-разработчикам.
  • Как веб-сайты получают необходимые сведения из Интернета для отображения в веб-браузере.
  • Когда использовать средство "Сеть ".
  • Обзор пользовательского интерфейса средства "Сеть ".
  • Отображение запросов в средстве " Сеть ".
  • Просмотр сведений о запросе или ответе.
  • Настройка средства "Сеть ".
  • Сортировка, фильтрация и поиск запросов.
  • Исследование проблем с производительностью.
  • Блокировка запросов и экспорт в виде файлов HAR.
  • Редактирование и повторная отправка запросов.

См. также:

Браузер Microsoft Edge | Что нового в средствах разработчика 106

3 октября 2022 г.

Эскиз видео

Обложки:

  • Эксперимент с палитрой команд.
  • Быстрое исправление проблем в расширении Edge DevTools VS Code.
  • Средства разработчика используют меньше места на диске.
  • Улучшенные специальные возможности в режиме фокусировки (пользовательский интерфейс средств разработчика) и исправление ошибок с высокой контрастностью.
  • Нерекомендуемые светлые и темные темы Chromium.
  • Отслеживание новых взаимодействий в инструменте "Производительность ".
  • С помощью фрагментов.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 105

Сентябре 6, 2022

Эскиз видео

Обложки:

  • Отладка обработки протокола PWA.
  • Улучшения режима фокусировки.
  • Исправлены ошибки режима фокусировки.
  • Повышена надежность средств "Сеть" и "Проблемы".
  • Динамическое редактирование кода функции во время отладки.
  • Использование точек журнала.

См. также:

Знакомство с пользовательским интерфейсом средств разработчика

Сентябре 1, 2022

Эскиз видео

В этом немного более старом видео (сентябрь 2022 г.) показан устаревший пользовательский интерфейс для средств разработчика:

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

Обложки:

  • Структура пользовательского интерфейса средств разработчика с основной панелью инструментов и панелью вверху и панелью и панелью приложения "Ящик" внизу.
  • Организация пользовательского интерфейса средств разработчика в Microsoft Edge.
  • Что делают основные части интерфейса средств разработчика.
  • Какие инструменты доступны.
    • Средство проверки .
    • Режим эмуляции устройства .
    • Инструменты на главной панели инструментов или в консоли.
  • Кнопка "Дополнительные вкладки".
  • Кнопка "Дополнительные инструменты " для просмотра всех 30+ инструментов.
  • Закрытие средств.
  • Изменение порядка инструментов на главной панели инструментов.
  • Консоль и его панель инструментов.
  • Перемещение инструментов между основной панелью инструментов и панелью инструментов приложения .
  • Как восстановить настройки по умолчанию.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 104

5 августа 2022 г.

Эскиз видео

Обложки:

  • Исправления ошибок отрисовки и специальных возможностей.
  • Составные слои теперь находятся в средстве 3D-представление , а инструмент Layers был удален.
  • Группировка файлов в средстве "Источники ".
  • Узнайте, где узлы вставляются в слоты в веб-компонентах.
  • Где найти дополнительные сведения.
  • Как изменить расположение панели действий .

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 103

5 июля 2022 г.

Эскиз видео

Обложки:

  • Новый дизайн средства "Добро пожаловать ".
  • Новая палитра.
  • Новые типы узлов кучи памяти snapshot.
  • Исправление ошибки режима высокой контрастности.
  • Откройте любую HTML-страницу в расширении VS Code.

См. также:

Отладка веб-страниц в 3D

21 июня 2022 г.

Эскиз видео

Средство "Трехмерное представление" в средствах разработчика Microsoft Edge обеспечивает трехмерное представление веб-страницы, которую вы изучаете. Используйте средство "Трехмерное представление " для отладки распространенных проблем веб-разработки, таких как:

  • Глубоко вложенные узлы DOM.
  • Элементы вне документа.
  • Нежелательные полосы прокрутки.
  • Проблемы с наложением индекса Z.
  • Производительность композитных слоев.

См. также:

Использование предпочитаемого языка в средствах разработчика Microsoft Edge

9 июня 2022 г.

Эскиз видео

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

См. также:

Браузер Microsoft Edge | Новые возможности средств разработчика 102

1 июня 2022 г.

Эскиз видео

Обложки:

  • Visual Studio Code.
  • Экспорт моментального снимка кучи.
  • Циклы внутренних узлов.
  • Значок справки.
  • Проблемы исправлены.

См. также:

Полностью стилизуйте раскрывающуюся часть HTML <select> с <selectmenu> помощью элемента

31 мая 2022 г.

Эскиз видео

Элементы <select> стиля были сложными. Экспериментальный <selectmenu> (или <selectlist>) элемент обещает преодолеть оставшиеся ограничения, позволяя веб-разработчикам стилизовать все части элемента.

Обновление за июнь 2024 г.: Этот элемент пока является экспериментальным. Элемент <selectmenu> был переименован в <selectlist> 2023 году.

См. также:

Фильтрация сложных проблем в Edge DevTools и VSCode

20 мая 2022 г.

Эскиз видео

У каждого веб-продукта есть проблемы. Средство "Проблемы" средств разработчика Microsoft Edge анализирует текущую веб-страницу и сообщает о проблемах, сгруппированных по типу, включая специальные возможности, совместимость, производительность и т. д.

В расширении Microsoft Edge DevTools для Visual Studio Code проблемы становятся доступными непосредственно в исходном коде.

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

См. также:

Создание анимации, связанной с прокруткой, без JavaScript

12 мая 2022 г.

Эскиз видео

Узнайте о функции анимации, связанной с прокруткой CSS, и о том, как ее можно использовать для создания индикатора техники чтения на веб-странице без использования JavaScript. Это особенность веб-платформы в целом, а не только Microsoft Edge.

С 21 июля 2023 г. эта функция больше не является экспериментальной и поддерживается в Microsoft Edge без флага. Из описания 2022 года: Анимация, связанная с прокруткой CSS, является экспериментальной функцией в Microsoft Edge; чтобы попробовать эту функцию, перейдите к edge://flags параметру экспериментальных функций веб-платформы и включите его.

См. также:

Настройка средств разработчика Microsoft Edge и быстрого доступа к функциям

5 мая 2022 г.

Эскиз видео

Узнайте, как настроить средства разработчика в соответствии с вашими потребностями. Обложки:

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

См. также:

Выделение текста в Интернете с помощью API настраиваемого выделения CSS

28 апреля 2022 г.

Эскиз видео

Стилизация диапазонов текста в Интернете очень удобна, но исторически сложна с этой задачей.

CSS Custom Highlight API — это будущее выделения текстовых диапазонов в Интернете. Этот API предоставляет веб-разработчикам функции JavaScript и CSS, которые упрощают и повышают эффективность стилизации любого диапазона текста.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 101

28 апреля 2022 г.

Эскиз видео

Обложки:

  • С помощью консоли.
  • Кэш исходных карт.
  • Столбец "Текст состояния".
  • Переключение тем.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 100

19 апреля 2022 г.

Эскиз видео

Обложки:

  • Репозиторий средств разработчика Microsoft Edge, чтобы отправить отзывы и идеи.
  • Добавлен чешский и вьетнамский языки для пользовательского интерфейса средств разработчика.
  • В средстве "Память " отфильтруйте моментальные снимки кучи по типу узла.
  • Средство "Сеть" содержит столбец "Выполнено ", в котором показан служебный сценарий или кэш.
  • Ссылки из импортированного профиля производительности используют исходные карты из сервера символов Azure Artifacts для сопоставления со знакомым вам исходным кодом.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 99

21 марта 2022 г.

Эскиз видео

Обложки:

  • Сервер символов Azure Artifacts и исходные карты.
  • Улучшенная панель "Слои " в средстве "Трехмерное представление ".
  • Используйте исходные карты для разминирования профилей производительности.
  • Динамическая отладка ASP.NET в средствах разработчика для Visual Studio.
  • Специальные возможности в средствах "Сетевая консоль" и " Трехмерное представление ".

См. также:

Автоматическое описание изображений в Microsoft Edge

17 марта 2022 г.

Эскиз видео

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

Многие люди с нарушениями зрения пользуются Интернетом в основном с помощью средства чтения с экрана — вспомогательной технологии, которая читает содержимое каждой страницы вслух. Средства чтения с экрана зависят от наличия меток изображений (альтернативный или "замещающий текст"), которые позволяют описывать визуальное содержимое, например изображения и диаграммы, чтобы пользователь мог понять полное содержимое страницы.

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

См. также:

Браузер Microsoft Edge | Новые возможности в средствах разработчика 98

23 февраля 2022 г.

Эскиз видео

Обложки:

  • Эмуляция режима принудительных цветов.
  • Значки действий в журнале событий средства "Производительность " содержат подсказки.
  • Небольшие размеры в средстве "Память " представляются в виде десятичных значений.
  • В средстве "Сеть " размер поля поиска изменится соответствующим образом.
  • В средстве "Приложение " пользовательский интерфейс выровнен правильно.
  • Обновления для движка браузера Chromium.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 97

1 февраля 2022 г.

Эскиз видео

Обложки:

  • Инструмент "Отсоединенные элементы " доступен по умолчанию.
  • Средство трехмерного представления поддерживает изменение цветовых тем в средствах разработчика.
  • Улучшения режима фокусировки (пользовательский интерфейс средств разработчика).
  • Расширение DevTools для VS Code имеет дополнительные функции.

См. также:

Отладка утечек памяти с помощью средства Microsoft Edge "Отсоединенные элементы"

9 декабря 2021 г.

Эскиз видео

Обновление за март 2025 г.: инструмент "Отсоединенные элементы " удален. Для отладки утечек памяти DOM используйте тип профилирования Detached elements в средстве Memory .

Утечки памяти возникают, когда код JavaScript приложения сохраняет все больше и больше объектов в памяти вместо того, чтобы освободить их для сборки мусора браузером. Совместно с разработчиками Microsoft Teams мы создали средство "Отсоединенные элементы ", которое уже помогло нам находить и устранять утечки памяти на многих наших веб-сайтах и в приложениях.

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 96

9 декабря 2021 г.

Эскиз видео

Обложки:

  • Новый пользовательский интерфейс средств разработчика: режим фокусировки.
  • Средство "Консоль" может находиться как на верхней, так и на нижней панели средств разработчика.
  • Средство "Источники" уведомит вас, если исходные карты не могут быть загружены.
  • Если щелкнуть значок треугольника раскрывающегося списка, откроется меню.
  • Открытие исходных файлов в Visual Studio Code интегрируется со средством "Источники".

См. также:

Браузер Microsoft Edge | Новые возможности в средствах разработчика 95

8 декабря 2021 г.

Эскиз видео

Обложки:

  • Поиск в Интернете всех сообщений об ошибках и предупреждений.
  • Улучшенный доступ для определения User-Agent клиентских подсказок.
  • Фильтры консоли отображают сгруппированные сообщения.

См. также:

Браузер Microsoft Edge | API пипетки

22 ноября 2021 г.

Эскиз видео

Команда Microsoft Edge определила и реализовала новый API пипетки в сотрудничестве с проектом с открытым кодом Chromium. Оставьте отзыв в разделе "Проблемы" - WICG/eyedropper | github.com.

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

См. также:

Браузер Microsoft Edge | Новые возможности DevTools 94

12 ноября 2021 г.

Эскиз видео

Обложки:

  • Выполните поиск ошибок консоли в Интернете.
  • При использовании тем Visual Studio Code отображаются значки точек останова.
  • Расширение DevTools для Visual Studio Code включает новейшие инструменты, поддержку тем и полезные ссылки. Подключение отладчика JavaScript к удаленным рабочим областям.

Обновление. Функция тем Visual Studio Code удалена, и такие темы отменить изменения к темам по умолчанию:

  • Light+
  • Dark+

См. также:

Браузер Microsoft Edge | Новые возможности средств разработчика 93

11 октября 2021 г.

Эскиз видео

Обложки:

  • Пользовательский интерфейс средств разработчика.
  • Отладка утечек памяти узла DOM с помощью средства "Отсоединенные элементы ".
  • Изменение языка интерфейса.
  • Копирование объявлений CSS в области "Стили" средства "Элементы" для библиотек CSS-in-JS.
  • Упрощенная настройка User-Agent клиентских подсказок.
  • Средства чтения с экрана озвучивают ошибки, предупреждения и проблемы, отображаемые на панели инструментов и в консоли.
  • Средство "Копировать", так как PowerShell в средстве "Сеть" содержит файлы cookie.
  • Отладчик Visual Studio Code интегрируется с расширением средств разработчика для VS Code.

См. также:

Браузер Microsoft Edge | Состояние платформы

25 мая 2021 г.

Эскиз видео

Microsoft Edge предоставляет разработчикам комплексную согласованную платформу и инструменты. По мере прекращения поддержки наших устаревших браузеров Microsoft Edge скоро станет единственным поддерживаемым браузером от Майкрософт для Windows 10. Узнайте о последних новостях платформы Microsoft Edge, средствах и веб-приложениях.

Обложки:

  • Делегированные рукописные следы.
  • Новые возможности Интернета для разработчиков.
  • Запуск при входе в ОС.
  • Средства Microsoft Edge для VS Code.

См. также:

Ignite | Март 2021 г. | Зажигание истории веб-приложений

2 марта 2021 г.

Эскиз видео

Прогрессивные веб-приложения (PWA) поддерживаются в Microsoft Edge, и они предоставляют возможность улучшить обнаружение и взаимодействие с вашим приложением. Новые возможности Web-платформы. Органичная интеграция современных веб-приложений с Microsoft Windows.

Обложки:

  • Возможность модернизации.
  • Совместные усилия по расширению возможностей веб-платформы.
  • Microsoft Edge и движок браузера Chromium.
  • Microsoft Edge и возможности Интернета (Project Fugu).
  • Обеспечение блеска PWA в Windows.
  • Лучший в своем классе охват.
  • Установите веб-сайт в виде приложения.
  • Примите участие в PWA в Windows.

См. также:

Ignite | Сентябрь 2020 г. | Новейшие инструменты разработчика

Сентябре 22, 2020

Эскиз видео

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

Обложки:

  • Расширение DevTools для VS Code.
  • Кроссбраузерное тестирование и автоматизация. Selenium, WebDriver, Puppeteer, Playwright и CI/CD через контейнеры Docker.
  • Совместная работа в движке браузера Chromium. Как внести свой вклад.
  • Локализованный пользовательский интерфейс в средствах разработчика.
  • Специальные возможности в средствах разработчика.

См. также:

См. также

YouTube:

  • Last updated on