Видео о веб-разработке с 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 114)
- Новые возможности средств разработки (Microsoft Edge 113)
Microsoft Edge | Новые возможности DevTools 112
26 апреля 2023 г.
Охватывает:
- Неминифицированные имена JS для OOPIF в средстве производительности .
- Не простые селекторы CSS в средстве обзора CSS .
- Свертывание кода в средстве просмотра JSON.
- Улучшения в пользовательском интерфейсе DevTools.
- Новые маркеры для точек журнала и условных точек останова.
- Изменение тем в средствах разработки.
См. также:
- Новые возможности средств разработки (Microsoft Edge 112)
- Анализ производительности селектора CSS во время событий повторного вычисления стиля — статистика селектора CSS.
- Просмотр форматированных ответов ИЛИ файлов JSON
Microsoft Edge | Новые возможности devTools 111
28 марта 2023 г.
Охватывает:
- Удаленная отладка веб-содержимого на устройствах Xbox и HoloLens.
- Неминифицированные имена файлов и функций в средстве производительности .
- Может скопировать таблицу статистика селектора CSS в Excel.
- Функции эмуляции отрисовки на панели инструментов Режим устройства.
- Боковая панель инструментов Better Elements .
- Улучшенные специальные возможности быстрого просмотра.
- Функции цвета высокой четкости.
- Настройте столбцы средства "Сеть ".
См. также:
- Новые возможности средств разработки (Microsoft Edge 111)
- Безопасная отладка исходного кода путем публикации сопоставления источника серверу символов Azure Artifacts
Microsoft Edge | Новые возможности devTools 110
16 февраля 2023 г.
Охватывает:
- Более быстрая куча snapshot записей.
- Улучшена настройка режима фокусировки (пользовательский интерфейс DevTools).
- Улучшения специальных возможностей и контрастности тем.
- Автоматическая печать на месте в инструменте "Источники ".
- Имитируйте
prefers-color-scheme
.
См. также:
Microsoft Edge | Новые возможности DevTools 109
17 января 2023 г.
Охватывает:
- Расширенные трассировки для совместного использования памяти и записей производительности.
- Статистика селектора в средстве производительности .
- Отслеживайте объекты, собранные мусором (GC'd), в средстве "Память ".
- Расширение визуализатора моментальных снимков кучи.
- Переработанная панель быстрого просмотра в режиме фокусировки.
- Новые команды для областей Стили .
- Проверка элементов.
См. также:
- Новые возможности средств разработки (Microsoft Edge 109)
- Совместное использование трассировки производительности и памяти
- Анализ производительности селектора CSS во время событий повторного вычисления стиля — статистика селектора.
- Исследуйте выделение памяти с уменьшением мусора (флажки "Включить объекты") в статье Ускорение среды выполнения JavaScript (тип профилирования "Выборка выделения").
- Мусорный разговор: сборщик мусора Orinoco
- Расширение визуализатора моментальных снимков кучи.
Microsoft Edge | Новые возможности DevTools 108
16 декабря 2022 г.
Охватывает:
- Улучшена навигация в палитре команд.
- Исправления режима высокой контрастности.
- Предупреждение о отключении JavaScript.
- См. неактивные свойства CSS.
- Новая документация по созданию собственных средств.
- WebDriver доступен в macOS в Apple M1.
- Используйте отсоединенные элементы для поиска утечек DOM.
См. также:
- Новые возможности средств разработки (Microsoft Edge 108)
- Создание расширения DevTools, добавление пользовательской вкладки инструментов и панели
- Формат файла кучи snapshot
- Microsoft Edge WebDriver — скачайте Edge WebDriver.
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-представления , а инструмент "Слои" удален.
- Группирование файлов в средстве "Источники ".
- Узнайте, где узлы получают слоты в веб-компонентах.
- Где найти дополнительные сведения.
- Как изменить расположение панели действий .
См. также:
- Новые возможности DevTools 104
- Отладка веб-страницы в трехмерном формате с помощью средства трехмерного просмотра — запись блога.
Microsoft Edge | Новые возможности DevTools 103
5 июля 2022 г.
Охватывает:
- Переработанное средство приветствия .
- Новое средство выбора цвета.
- Новая куча памяти snapshot типах узлов.
- Исправлена ошибка режима высокой контрастности.
- Откройте любую HTML-страницу в расширении VS Code.
См. также:
Отладка интернета в трехмерном режиме
21 июня 2022 г.
Инструмент 3D-представления в Средствах разработки Microsoft Edge предоставляет трехмерное представление проверяемой веб-страницы. Используйте средство трехмерного просмотра для отладки распространенных проблем веб-разработки, таких как:
- Глубоко вложенные узлы DOM.
- Элементы вне документа.
- Нежелательные полосы прокрутки.
- Проблемы с стеком индексов Z.
- Производительность составных слоев.
См. также:
- Навигация по слоям веб-страниц, z-индексу и модели DOM с помощью инструмента трехмерного представления
- Отладка веб-страницы в трехмерном формате с помощью средства трехмерного просмотра — запись блога.
Использование предпочитаемого языка в средствах разработки 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 году.
См. также:
-
Открытие демонстраций пользовательского
<selectlist>
интерфейса -
Стилизация
<select>
элементов для реальных — запись блога об элементах стилей<select>
и элементе<selectmenu>
.
Дополнительные проблемы с фильтрацией в средствах разработки Edge и VSCode
20 мая 2022 г.
У каждого веб-продукта есть проблемы. Средство Microsoft Edge DevTools Issues анализирует текущую веб-страницу и сообщает о проблемах, сгруппированных по типам, включая специальные возможности, совместимость, производительность и многое другое.
Расширение Microsoft Edge DevTools для Visual Studio Code позволяет напрямую получить доступ к проблемам в исходном коде.
Выпущенные продукты могут иметь проблемы. На основе ваших отзывов мы добавили полезные способы фильтрации проблем. Вы можете отключить проблемы, поступающие из сторонних библиотек, и выбрать браузеры для просмотра проблем.
См. также:
- Поиск и устранение проблем с помощью средства "Проблемы"
- Встроенный и динамический анализ проблем в расширении DevTools для VS Code
Создание анимации, связанной с прокруткой, без JavaScript
12 мая 2022 г.
Узнайте о функции анимации, связанной с прокруткой CSS, и о том, как ее можно использовать для создания индикатора хода чтения на веб-странице без использования JavaScript. Это функция веб-платформы в целом, а не только Microsoft Edge.
С 21 июля 2023 г. эта функция больше не является экспериментальной и теперь поддерживается в Microsoft Edge без флага. Из описания 2022 года: анимация, связанная с прокруткой CSS, является экспериментальной функцией в Microsoft Edge; Чтобы попробовать эту функцию, перейдите к edge://flags
и включите параметр Функции экспериментальной веб-платформы .
См. также:
- Демонстрация читателя — демонстрационная версия приложения, показанная в видео.
- Исходный код для демонстрации читателя
- Анимация на основе прокрутки CSS в MDN.
- @scroll временная шкала в MDN: исходная страница с экспериментальной анимацией CSS, связанной с прокруткой.
Настройка средств разработчика Microsoft Edge и быстрый доступ к функциям
5 мая 2022 г.
Узнайте, как настроить Средства разработки в соответствии со своими потребностями. Охватывает:
- Закрепление или отстыковка devTools.
- Откройте новые средства.
- Закройте инструменты, которые вам не нужны.
- Перемещение инструментов в нижней панели (теперь панель быстрого просмотра ).
- Настройте размер текста.
- Настройка темы.
- Используйте сочетания клавиш меню команд, чтобы быстро настроить средства разработки.
См. также:
Выделение текста в Интернете с помощью API пользовательского выделения CSS
28 апреля 2022 г.
Стилизация диапазонов текста в Интернете очень полезно, но исторически было сложно сделать.
API пользовательского выделения CSS — это будущее выделения диапазонов текста в Интернете. Этот API предоставляет веб-разработчикам функции JavaScript и CSS, которые упрощают и эффективнее стили любого диапазона текста.
См. также:
Microsoft Edge | Новые возможности DevTools 101
28 апреля 2022 г.
Охватывает:
- Использование консоли.
- Кэш карт источника.
- Текстовый столбец состояния.
- Переключение тем.
См. также:
- Новые возможности DevTools 101
- Интеграция консоли: https://aka.ms/ConsoleIntegration
- Сетевые столбцы: https://aka.ms/NetworkColumns
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 теперь предоставляет автоматически созданные метки изображений - запись блога
Microsoft Edge | Новые возможности DevTools 98
23 февраля 2022 г.
Охватывает:
- Эмулировать режим принудительных цветов.
- Значки действий в журнале событий средства производительности имеют подсказки.
- Мелкие размеры в средстве "Память " представлены десятичными значениями.
- В средстве "Сеть " поле "Поиск" изменит размер по мере необходимости.
- В средстве приложения пользовательский интерфейс выравнивается правильно.
- Обновления для подсистемы браузера Chromium.
См. также:
Microsoft Edge | Новые возможности devTools 97
1 февраля 2022 г.
Охватывает:
- Средство "Отсоединенные элементы " доступно по умолчанию.
- Инструмент трехмерного представления поддерживает изменение цветовых тем в средствах разработки.
- Улучшения режима фокусировки (пользовательский интерфейс DevTools).
- Расширение DevTools для VS Code имеет дополнительные функции.
См. также:
- Новые возможности devTools 97
- Обновите список устройств: https://aka.ms/RefreshDeviceList
- Автозавершение с изменением в формате HTML https://aka.ms/AutocompleteEditHTML
- Улучшена отладка: https://aka.ms/NewDebugging
Отладка утечек памяти с помощью средства Отсоединенные элементы Microsoft Edge
9 декабря 2021 г.
Для отладки утечек памяти DOM используйте один из следующих вариантов:
- Инструмент "Отсоединенные элементы ". Отключенные узлы имеют ссылку на связанный код JavaScript.
- Тип профилирования отсоединенные элементы в средстве "Память ".
Средство "Отсоединенные элементы" помогает исследовать и устранять утечки памяти DOM.
Утечки памяти происходят, когда код JavaScript приложения сохраняет все больше и больше объектов в памяти, а не освобождает их для сборки мусора в браузере. Мы создали средство "Отсоединенные элементы " вместе с разработчиками Microsoft Teams, и оно уже помогло нам найти и устранить утечки памяти на многих наших собственных веб-сайтах и приложениях.
См. также:
- Отладка утечек памяти DOM с помощью инструмента "Отсоединенные элементы"
- Отладка утечек памяти с помощью средства Отсоединенные элементы Microsoft Edge — запись блога.
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 позволяет авторам использовать предоставленные браузером пипеты при создании пользовательских средств выбора цвета в Интернете.
См. также:
- Выбор цветов любого пикселя на экране с помощью API EyeDropper | web.dev
- API eyeDropper — веб-API | mdn developer.mozilla.org
Microsoft Edge | Новые возможности DevTools 94
12 ноября 2021 г.
Охватывает:
- Выполните поиск по запросу Ошибки консоли в Интернете.
- Значки точки останова отображаются при использовании Visual Studio Code тем.
- Расширение DevTools для Visual Studio Code включает последние инструменты, поддержку тем и полезные ссылки. Подключение отладчика JavaScript к удаленным рабочим областям.
Обновление. Начиная с Microsoft Edge 131 функция Visual Studio Code тем удаляется, а такие темы отменить изменения темы по умолчанию:
- Light+
- Темный+
См. также:
- Новые возможности DevTools 94
- Сочетания клавиш — навигация по средствам разработки с помощью клавиатуры.
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.
См. также:
- Будущее интернет-Обозреватель на Windows 10 находится в режиме Microsoft Edge — IE.
- Внедрение Microsoft Edge с помощью FastTrack
- "Microsoft Edge: состояние платформы": ресурсы сеанса
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:
-
Канал Microsoft Edge (@MSFTEdge) на YouTube
- Разработчик — список воспроизведения.
- Новые возможности DevTools — список воспроизведения.
- Расширения — список воспроизведения.
- Создание, развертывание и управление приложениями WebView2 — 2 марта 2021 г.