Видео о веб-разработке с Microsoft Edge
Узнайте о новых технологиях и продуктах веб-разработки Microsoft Edge, включая Средства разработки, API и функции веб-платформы, прогрессивные веб-приложения и WebView2.
Эта страница содержит ссылки на короткие видео, каждое из которых посвящено только одной функции и включает демонстрацию.
Корпорация Майкрософт регулярно публикует новые видео на канале Microsoft Edge YouTube, и они также перечислены ниже.
Щелкните эскиз из следующего списка, чтобы watch соответствующее видео на YouTube.
Все видео о разработке с помощью Microsoft Edge можно найти на канале Microsoft Edge (@MSFTEdge) на YouTube.
Канал Microsoft Edge содержит следующие списки воспроизведения:
8 февраля 2024 г.
Средства консоли и источников в Средствах разработки Microsoft Edge теперь интегрируются с Copilot в Microsoft Edge, чтобы помочь вам разобраться в ошибках и исходном коде. Используйте эту функцию, чтобы получить справку по отладке кода.
См. также:
17 августа 2023 г.
Средство просмотра JSON автоматически форматирует и выделяет ответы и файлы JSON на вкладках браузера. Когда веб-сервер отвечает на HTTP-запросы данными, закодированными в формате JSON, эти данные не всегда легко прочитать и иногда возвращаются в виде одной строки текста. Средство просмотра JSON изменяет возвращаемые данные, чтобы упростить их чтение. Синтаксис JSON выделяется разными цветами, свойства объектов отображаются на собственных линиях и отступах, а объекты можно свернуть или развернуть.
См. также:
24 июля 2023 г.
Охватывает:
- Средство анализатора сбоев .
- Статистические статистические данные селектора CSS.
- Предупреждения для свойств CSS, которые активируют макет.
- Улучшения средств для работы с памятью.
- Улучшения специальных возможностей.
- Улучшенная поддержка режима высокой контрастности в расширении DevTools для VS Code.
-
console.table().
См. также:
- Новые возможности средств разработки (Microsoft Edge 114)
- Новые возможности средств разработки (Microsoft Edge 113)
26 апреля 2023 г.
Охватывает:
- Неминифицированные имена JS для OOPIF в средстве производительности .
- Не простые селекторы CSS в средстве обзора CSS .
- Свертывание кода в средстве просмотра JSON.
- Улучшения в пользовательском интерфейсе DevTools.
- Новые маркеры для точек журнала и условных точек останова.
- Изменение тем в средствах разработки.
См. также:
- Новые возможности средств разработки (Microsoft Edge 112)
- Анализ производительности селектора CSS во время событий повторного вычисления стиля — статистика селектора CSS.
- Просмотр форматированных ответов ИЛИ файлов JSON
28 марта 2023 г.
Охватывает:
- Удаленная отладка веб-содержимого на устройствах Xbox и HoloLens.
- Неминифицированные имена файлов и функций в средстве производительности .
- Может скопировать таблицу статистика селектора CSS в Excel.
- Функции эмуляции отрисовки на панели инструментов Режим устройства.
- Боковая панель инструментов Better Elements .
- Улучшенные специальные возможности быстрого просмотра.
- Функции цвета высокой четкости.
- Настройте столбцы средства "Сеть ".
См. также:
- Новые возможности средств разработки (Microsoft Edge 111)
- Безопасная отладка исходного кода путем публикации сопоставления источника серверу символов Azure Artifacts
16 февраля 2023 г.
Охватывает:
- Более быстрая куча snapshot записей.
- Улучшена настройка режима фокусировки (пользовательский интерфейс DevTools).
- Улучшения специальных возможностей и контрастности тем.
- Автоматическая печать на месте в инструменте "Источники ".
- Имитируйте
prefers-color-scheme.
См. также:
17 января 2023 г.
Охватывает:
- Расширенные трассировки для совместного использования памяти и записей производительности.
- Статистика селектора в средстве производительности .
- Отслеживайте объекты, собранные мусором (GC'd), в средстве "Память ".
- Расширение визуализатора моментальных снимков кучи.
- Переработанная панель быстрого просмотра в режиме фокусировки.
- Новые команды для областей Стили .
- Проверка элементов.
См. также:
- Новые возможности средств разработки (Microsoft Edge 109)
- Совместное использование трассировки производительности и памяти
- Анализ производительности селектора CSS во время событий повторного вычисления стиля — статистика селектора.
- Исследуйте выделение памяти с уменьшением мусора (флажки "Включить объекты") в статье Ускорение среды выполнения JavaScript (тип профилирования "Выборка выделения").
- Мусорный разговор: сборщик мусора Orinoco
- Расширение визуализатора моментальных снимков кучи.
16 декабря 2022 г.
Охватывает:
- Улучшена навигация в палитре команд.
- Исправления режима высокой контрастности.
- Предупреждение о отключении JavaScript.
- См. неактивные свойства CSS.
- Новая документация по созданию собственных средств.
- WebDriver доступен в macOS в Apple M1.
- Используйте отсоединенные элементы для поиска утечек DOM.
См. также:
- Новые возможности средств разработки (Microsoft Edge 108)
- Создание расширения DevTools, добавление пользовательской вкладки инструментов и панели
- Формат файла кучи snapshot
- Microsoft Edge WebDriver — скачайте Edge WebDriver.
8 ноября 2022 г.
Охватывает:
- Текстовые метки в пользовательском интерфейсе средств разработки режима фокусировки.
- Новое сочетание клавиш для палитры команд.
- Моментальные снимки больших кучи в средстве "Память ".
- Исправления режима высокой контрастности.
- Отключите параметр "Поиск по мере ввода".
- Автоматизация WebView2 с помощью Playwright.
- Настройка сочетаний клавиш.
См. также:
6 октября 2022 г.
Узнайте, как использовать средство "Сеть" в Средствах разработки Microsoft Edge.
Охватывает:
- Почему средство "Сеть" в Средствах разработки важно для веб-разработчиков.
- Как веб-сайты получают необходимую информацию из Интернета для отображения в веб-браузере.
- Когда следует использовать средство "Сеть ".
- Обзор пользовательского интерфейса средства "Сеть ".
- Отображение запросов в средстве "Сеть ".
- Просмотр сведений о запросе или ответе.
- Настройка средства "Сеть ".
- Сортировка, фильтрация и поиск запросов.
- Изучение проблем с производительностью.
- Блокировка запросов и их экспорт в виде HAR-файлов.
- Редактирование и повторная отправка запросов.
См. также:
3 октября 2022 г.
Охватывает:
- Эксперимент с палитрой команд.
- Быстрое исправление проблем в расширении VS Code для Edge DevTools.
- Средства разработки используют меньше места на диске.
- Улучшены специальные возможности в режиме фокусировки (пользовательский интерфейс DevTools) и исправлена ошибка с высокой контрастностью.
- Не рекомендуется Chromium светлые и темные темы.
- Отслеживание новых взаимодействий в средстве производительности .
- Использование фрагментов кода.
См. также:
6 сентября 2022 г.
Охватывает:
- Отладка протокола PWA.
- Улучшения режима фокусировки.
- Исправление ошибок режима фокусировки.
- Улучшена надежность средств "Сеть и проблемы".
- Динамическое редактирование кода функции во время отладки.
- Использование точек журнала.
См. также:
1 сентября 2022 г.
В этом видео немного более старой версии (сентябрь 2022 г.) показан устаревший пользовательский интерфейс для Средств разработки:
- Вместо панели действий на видео показана панель инструментов main.
- Вместо панели быстрого просмотра на видео показана панель "Панель" в нижней части devTools.
Охватывает:
- Структура пользовательского интерфейса DevTools с main панелью инструментов и панелью в верхней части, а панелью инструментов и панелью "Панель" внизу.
- Порядок организации пользовательского интерфейса Средств разработки Microsoft Edge.
- Что делают main части интерфейса DevTools.
- Доступные инструменты.
- Средство проверки .
- Режим эмуляции устройства.
- Инструменты на панели инструментов main или в панели инструментов.
- Кнопка Другие вкладки .
- Кнопка "Дополнительные инструменты" , чтобы просмотреть все инструменты более 30.
- Средства закрытия.
- Изменение порядка средств на панели инструментов main.
- Панель инструментов и панель инструментов.
- Перемещение инструментов между панелью инструментов main и панелью инструментов Drawer.
- Восстановление параметров по умолчанию.
См. также:
5 августа 2022 г.
Охватывает:
- Исправления ошибок отрисовки и специальных возможностей.
- Составные слои теперь находятся в инструменте 3D-представления , а инструмент "Слои" удален.
- Группирование файлов в средстве "Источники ".
- Узнайте, где узлы получают слоты в веб-компонентах.
- Где найти дополнительные сведения.
- Как изменить расположение панели действий .
См. также:
- Новые возможности DevTools 104
- Отладка веб-страницы в трехмерном формате с помощью средства трехмерного просмотра — запись блога.
5 июля 2022 г.
Охватывает:
- Переработанное средство приветствия .
- Новое средство выбора цвета.
- Новая куча памяти snapshot типах узлов.
- Исправлена ошибка режима высокой контрастности.
- Откройте любую HTML-страницу в расширении VS Code.
См. также:
21 июня 2022 г.
Инструмент 3D-представления в Средствах разработки Microsoft Edge предоставляет трехмерное представление проверяемой веб-страницы. Используйте средство трехмерного просмотра для отладки распространенных проблем веб-разработки, таких как:
- Глубоко вложенные узлы DOM.
- Элементы вне документа.
- Нежелательные полосы прокрутки.
- Проблемы с стеком индексов Z.
- Производительность составных слоев.
См. также:
- Навигация по слоям веб-страниц, z-индексу и модели DOM с помощью инструмента трехмерного представления
- Отладка веб-страницы в трехмерном формате с помощью средства трехмерного просмотра — запись блога.
9 июня 2022 г.
Выбор языка пользовательского интерфейса, наиболее удобного для программирования и отладки. Microsoft Edge DevTools поддерживает более 13 различных языков.
См. также:
1 июня 2022 г.
Охватывает:
- Visual Studio Code.
- Экспорт моментальных снимков кучи.
- Циклы внутренних узлов.
- Значок справки.
- Исправлены проблемы.
См. также:
31 мая 2022 г.
Стилизация <select> элементов была сложной задачей. Экспериментальный <selectmenu> элемент (или <selectlist>) обещает преодолеть оставшиеся ограничения, позволяя веб-разработчикам создавать стили для всех частей элемента.
Обновление за июнь 2024 г. Этот новый элемент по-прежнему является экспериментальным. Элемент <selectmenu> был переименован <selectlist> в 2023 году.
См. также:
-
Открытие демонстраций пользовательского
<selectlist>интерфейса -
Стилизация
<select>элементов для реальных — запись блога об элементах стилей<select>и элементе<selectmenu>.
20 мая 2022 г.
У каждого веб-продукта есть проблемы. Средство Microsoft Edge DevTools Issues анализирует текущую веб-страницу и сообщает о проблемах, сгруппированных по типам, включая специальные возможности, совместимость, производительность и многое другое.
Расширение Microsoft Edge DevTools для Visual Studio Code позволяет напрямую получить доступ к проблемам в исходном коде.
Выпущенные продукты могут иметь проблемы. На основе ваших отзывов мы добавили полезные способы фильтрации проблем. Вы можете отключить проблемы, поступающие из сторонних библиотек, и выбрать браузеры для просмотра проблем.
См. также:
- Поиск и устранение проблем с помощью средства "Проблемы"
- Встроенный и динамический анализ проблем в расширении DevTools для VS Code
12 мая 2022 г.
Узнайте о функции анимации, связанной с прокруткой CSS, и о том, как ее можно использовать для создания индикатора хода чтения на веб-странице без использования JavaScript. Это функция веб-платформы в целом, а не только Microsoft Edge.
С 21 июля 2023 г. эта функция больше не является экспериментальной и теперь поддерживается в Microsoft Edge без флага. Из описания 2022 года: анимация, связанная с прокруткой CSS, является экспериментальной функцией в Microsoft Edge; Чтобы попробовать эту функцию, перейдите к edge://flags и включите параметр Функции экспериментальной веб-платформы .
См. также:
- Демонстрация читателя — демонстрационная версия приложения, показанная в видео.
- Исходный код для демонстрации читателя
- Анимация на основе прокрутки CSS в MDN.
- @scroll временная шкала в MDN: исходная страница с экспериментальной анимацией CSS, связанной с прокруткой.
5 мая 2022 г.
Узнайте, как настроить Средства разработки в соответствии со своими потребностями. Охватывает:
- Закрепление или отстыковка devTools.
- Откройте новые средства.
- Закройте инструменты, которые вам не нужны.
- Перемещение инструментов в нижней панели (теперь панель быстрого просмотра ).
- Настройте размер текста.
- Настройка темы.
- Используйте сочетания клавиш меню команд, чтобы быстро настроить средства разработки.
См. также:
28 апреля 2022 г.
Стилизация диапазонов текста в Интернете очень полезно, но исторически было сложно сделать.
API пользовательского выделения CSS — это будущее выделения диапазонов текста в Интернете. Этот API предоставляет веб-разработчикам функции JavaScript и CSS, которые упрощают и эффективнее стили любого диапазона текста.
См. также:
28 апреля 2022 г.
Охватывает:
- Использование консоли.
- Кэш карт источника.
- Текстовый столбец состояния.
- Переключение тем.
См. также:
- Новые возможности DevTools 101
- Интеграция консоли: https://aka.ms/ConsoleIntegration
- Сетевые столбцы: https://aka.ms/NetworkColumns
19 апреля 2022 г.
Охватывает:
- Репозиторий средств разработчика Microsoft Edge для отправки отзывов и идей.
- Добавлены чешский и вьетнамский языки для пользовательского интерфейса DevTools.
- В средстве "Память " фильтруйте моментальные снимки кучи по типу узла.
- Средство "Сеть " содержит столбец "Выполнено" , в котором показана рабочая роль службы или кэш.
- Ссылки из импортированного профиля производительности используют исходные карты с сервера символов Azure Artifacts для сопоставления с привычным исходным кодом.
См. также:
21 марта 2022 г.
Охватывает:
- Сервер символов Azure Artifacts и исходные карты.
- Улучшена панель "Слои " в инструменте трехмерного представления .
- Используйте исходные карты для отмены использования профилей производительности.
- Динамическая отладка ASP.NET в средствах разработки для Visual Studio.
- Специальные возможности в средстве сетевой консоли и инструменте трехмерного представления .
См. также:
17 марта 2022 г.
Microsoft Edge предоставляет автоматически созданный замещающий текст для изображений, которые его не включают. Автоматически созданный замещающий текст помогает пользователям специальных возможностей, таким как средства чтения с экрана, обнаруживать смысл или намерение изображения в Интернете.
Многие люди, которые слепы или слабовидят, в первую очередь, через средство чтения с экрана: специальные возможности, которые считывают содержимое каждой страницы вслух. Средства чтения с экрана зависят от наличия меток изображений (альтернативный текст или "замещающий текст"), которые позволяют им описывать визуальное содержимое, например изображения и диаграммы, чтобы пользователь смог понять полное содержимое страницы. Замещающий текст имеет решающее значение для обеспечения доступа к Интернету, но его часто упускают из виду. В более чем половине изображений, обработанных средствами чтения с экрана, отсутствует замещающий текст.
См. также:
- Похоже, говорит: Microsoft Edge теперь предоставляет автоматически созданные метки изображений - запись блога
23 февраля 2022 г.
Охватывает:
- Эмулировать режим принудительных цветов.
- Значки действий в журнале событий средства производительности имеют подсказки.
- Мелкие размеры в средстве "Память " представлены десятичными значениями.
- В средстве "Сеть " поле "Поиск" изменит размер по мере необходимости.
- В средстве приложения пользовательский интерфейс выравнивается правильно.
- Обновления для подсистемы браузера Chromium.
См. также:
1 февраля 2022 г.
Охватывает:
- Средство "Отсоединенные элементы " доступно по умолчанию.
- Инструмент трехмерного представления поддерживает изменение цветовых тем в средствах разработки.
- Улучшения режима фокусировки (пользовательский интерфейс DevTools).
- Расширение DevTools для VS Code имеет дополнительные функции.
См. также:
- Новые возможности devTools 97
- Обновите список устройств: https://aka.ms/RefreshDeviceList
- Автозавершение с изменением в формате HTML https://aka.ms/AutocompleteEditHTML
- Улучшена отладка: https://aka.ms/NewDebugging
9 декабря 2021 г.
Для отладки утечек памяти DOM используйте один из следующих вариантов:
- Инструмент "Отсоединенные элементы ". Отключенные узлы имеют ссылку на связанный код JavaScript.
- Тип профилирования отсоединенные элементы в средстве "Память ".
Средство "Отсоединенные элементы" помогает исследовать и устранять утечки памяти DOM.
Утечки памяти происходят, когда код JavaScript приложения сохраняет все больше и больше объектов в памяти, а не освобождает их для сборки мусора в браузере. Мы создали средство "Отсоединенные элементы " вместе с разработчиками Microsoft Teams, и оно уже помогло нам найти и устранить утечки памяти на многих наших собственных веб-сайтах и приложениях.
См. также:
- Отладка утечек памяти DOM с помощью инструмента "Отсоединенные элементы"
- Отладка утечек памяти с помощью средства Отсоединенные элементы Microsoft Edge — запись блога.
9 декабря 2021 г.
Охватывает:
- Новый пользовательский интерфейс DevTools: режим фокусировки.
- Средство "Консоль" может находиться как на верхней, так и на нижней панелях devTools.
- Средство "Источники " уведомляет вас о том, что исходные карты не могут быть загружены.
- Щелкнув значок треугольника раскрывающегося списка, откроется меню.
- Открытие исходных файлов в Visual Studio Code интегрируется со средством "Источники".
См. также:
8 декабря 2021 г.
Охватывает:
- Значок поиска в Интернете для всех сообщений об ошибках и предупреждениях.
- Улучшенный доступ для определения User-Agent подсказок клиента.
- В фильтрах консоли отображаются сгруппированные сообщения.
См. также:
22 ноября 2021 г.
Команда Microsoft Edge указала и реализовала новый API EyeDropper в сотрудничестве с проектом Chromium с открытым кодом. Оставьте отзыв на странице Проблемы — WICG/пипетка | github.com.
Многие творческие приложения позволяют пользователям выбирать цвета из частей окна приложения или даже со всего экрана, обычно используя метафору пипеты. API EyeDropper позволяет авторам использовать предоставленные браузером пипеты при создании пользовательских средств выбора цвета в Интернете.
См. также:
- Выбор цветов любого пикселя на экране с помощью API EyeDropper | web.dev
- API eyeDropper — веб-API | mdn developer.mozilla.org
12 ноября 2021 г.
Охватывает:
- Выполните поиск по запросу Ошибки консоли в Интернете.
- Значки точки останова отображаются при использовании Visual Studio Code тем.
- Расширение DevTools для Visual Studio Code включает последние инструменты, поддержку тем и полезные ссылки. Подключение отладчика JavaScript к удаленным рабочим областям.
Обновление. Начиная с Microsoft Edge 131 функция Visual Studio Code тем удаляется, а такие темы отменить изменения темы по умолчанию:
- Light+
- Темный+
См. также:
- Новые возможности DevTools 94
- Сочетания клавиш — навигация по средствам разработки с помощью клавиатуры.
11 октября 2021 г.
Охватывает:
- Пользовательский интерфейс DevTools.
- Отладка утечек памяти узла DOM с помощью инструмента "Отсоединенные элементы ".
- Изменить язык интерфейса.
- Скопируйте объявления CSS в области Стили средства "Элементы" для библиотек CSS-in-JS.
- Упрощенная настройка User-Agent клиентских подсказок.
- Средства чтения с экрана объявляют об ошибках, предупреждениях и проблемах, отображаемых на панели инструментов и консоли.
- Копирование как PowerShell в средстве "Сеть" включает файлы cookie.
- Отладчик Visual Studio Code интегрируется с расширением DevTools для VS Code.
См. также:
25 мая 2021 г.
Microsoft Edge обеспечивает привлекательную и согласованную платформу и инструменты для разработчиков. Так как наши устаревшие браузеры постепенно откажутся от поддержки, Edge скоро станет единственным поддерживаемым браузером корпорации Майкрософт на Windows 10. Узнайте о последних возможностях платформы Edge, инструментов и веб-приложений.
Охватывает:
- Делегированные рукописные следы.
- Новые веб-возможности для разработчиков.
- Запуск при входе в ОС.
- Средства Microsoft Edge для VS Code.
См. также:
- Будущее интернет-Обозреватель на Windows 10 находится в режиме Microsoft Edge — IE.
- Внедрение Microsoft Edge с помощью FastTrack
- "Microsoft Edge: состояние платформы": ресурсы сеанса
2 марта 2021 г.
Прогрессивные веб-приложения (PWA) поддерживаются в Microsoft Edge, и они предоставляют возможность для расширения возможностей обнаружения и взаимодействия с приложением. Новые возможности веб-платформы. Как эти современные веб-приложения легко интегрируются с Microsoft Windows.
Охватывает:
- Возможность модернизации.
- Совместные усилия по расширению возможностей веб-платформы.
- Microsoft Edge и подсистема браузера Chromium.
- Возможности Microsoft Edge и веб-приложений (Project Fugu).
- Обеспечение яркости PWA в Windows.
- Лучший в своем классе охват.
- Установите веб-сайт как приложение.
- Получите участие в PWA в Windows.
См. также:
22 сентября 2020 г.
Средства разработчика Microsoft Edge упрощают веб-разработку, тестирование и автоматизацию. Узнайте, как мы уделяем приоритетное внимание специальным возможностям в наших инструментах и приложениях и как мы помогаем другим людям делать то же самое.
Охватывает:
- Расширение DevTools для VS Code.
- Межбраузерное тестирование и автоматизация. Selenium, WebDriver, Puppeteer, Playwright и CI/CD через контейнеры Docker.
- Совместная работа в подсистеме браузера Chromium. Как внести свой вклад.
- Локализованный пользовательский интерфейс в средствах разработчика.
- Специальные возможности в средствах разработчика.
См. также:
YouTube:
-
Канал Microsoft Edge (@MSFTEdge) на YouTube
- Разработчик — список воспроизведения.
- Новые возможности DevTools — список воспроизведения.
- Расширения — список воспроизведения.
- Создание, развертывание и управление приложениями WebView2 — 2 марта 2021 г.