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


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

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

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

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

Щелкните эскиз из следующего списка, чтобы watch соответствующее видео на YouTube.

Канал Microsoft Edge на YouTube

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

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

Объяснение ошибок консоли DevTools с помощью Copilot в Edge

8 февраля 2024 г.

Эскиз видео

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

См. также:

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

17 августа 2023 г.

Эскиз видео

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

См. также:

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

24 июля 2023 г.

Эскиз видео

Охватывает:

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

См. также:

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

26 апреля 2023 г.

Эскиз видео

Охватывает:

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

См. также:

Microsoft Edge | Новые возможности devTools 111

28 марта 2023 г.

Эскиз видео

Охватывает:

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

См. также:

Microsoft Edge | Новые возможности devTools 110

16 февраля 2023 г.

Эскиз видео

Охватывает:

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

См. также:

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

17 января 2023 г.

Эскиз видео

Охватывает:

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

См. также:

Microsoft Edge | Новые возможности DevTools 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 | Новые возможности devTools 106

3 октября 2022 г.

Эскиз видео

Охватывает:

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

См. также:

Microsoft Edge | Новые возможности devTools 105

6 сентября 2022 г.

Эскиз видео

Охватывает:

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

См. также:

Общие сведения о пользовательском интерфейсе DevTools

1 сентября 2022 г.

Эскиз видео

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

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

Охватывает:

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

См. также:

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

5 августа 2022 г.

Эскиз видео

Охватывает:

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

См. также:

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

5 июля 2022 г.

Эскиз видео

Охватывает:

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

См. также:

Отладка интернета в трехмерном режиме

21 июня 2022 г.

Эскиз видео

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

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

См. также:

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

9 июня 2022 г.

Эскиз видео

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

См. также:

Microsoft Edge | Новые возможности DevTools 102

1 июня 2022 г.

Эскиз видео

Охватывает:

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

См. также:

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

31 мая 2022 г.

Эскиз видео

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

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

См. также:

Дополнительные проблемы с фильтрацией в средствах разработки Edge и VSCode

20 мая 2022 г.

Эскиз видео

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

Расширение 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 г.

Эскиз видео

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

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

См. также:

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

28 апреля 2022 г.

Эскиз видео

Охватывает:

  • Использование консоли.
  • Кэш карт источника.
  • Текстовый столбец состояния.
  • Переключение тем.

См. также:

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

19 апреля 2022 г.

Эскиз видео

Охватывает:

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

См. также:

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

21 марта 2022 г.

Эскиз видео

Охватывает:

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

См. также:

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

17 марта 2022 г.

Эскиз видео

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

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

См. также:

Microsoft Edge | Новые возможности DevTools 98

23 февраля 2022 г.

Эскиз видео

Охватывает:

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

См. также:

Microsoft Edge | Новые возможности devTools 97

1 февраля 2022 г.

Эскиз видео

Охватывает:

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

См. также:

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

9 декабря 2021 г.

Эскиз видео

Для отладки утечек памяти DOM используйте один из следующих вариантов:

  • Инструмент "Отсоединенные элементы ". Отключенные узлы имеют ссылку на связанный код JavaScript.
  • Тип профилирования отсоединенные элементы в средстве "Память ".

Средство "Отсоединенные элементы" помогает исследовать и устранять утечки памяти DOM.

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

См. также:

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

9 декабря 2021 г.

Эскиз видео

Охватывает:

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

См. также:

Microsoft Edge | Новые возможности devTools 95

8 декабря 2021 г.

Эскиз видео

Охватывает:

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

См. также:

Microsoft Edge | API пипетка

22 ноября 2021 г.

Эскиз видео

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

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

См. также:

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

12 ноября 2021 г.

Эскиз видео

Охватывает:

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

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

  • Light+
  • Темный+

См. также:

Microsoft Edge | Новые возможности devTools 93

11 октября 2021 г.

Эскиз видео

Охватывает:

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

См. также:

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

25 мая 2021 г.

Эскиз видео

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

Охватывает:

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

См. также:

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

2 марта 2021 г.

Эскиз видео

Прогрессивные веб-приложения (PWA) поддерживаются в Microsoft Edge, и они предоставляют возможность для расширения возможностей обнаружения и взаимодействия с приложением. Новые возможности веб-платформы. Как эти современные веб-приложения легко интегрируются с 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: