Новые возможности средств разработки (Microsoft Edge 85)
Чтобы проверка последние возможности 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
Функции отладки сетки CSS
Команда разработчиков Microsoft Edge сотрудничает с командой Chrome DevTools и Chromium сообществом, чтобы добавить новые функции отладки сетки CSS в средства разработки. Теперь можно отображать номера строк сетки, разрывы сетки и расширенные линии сетки в виде наложения на странице. Кроме того, в ближайшее время будут усовершенствованы средства сетки.
Обновление. Эта функция выпущена и больше не является экспериментальной.
Чтобы опробовать эксперимент с примером, см. пример планировщика сетки CSS.
Изменение и воспроизведение запросов с помощью сетевой консоли
Теперь можно использовать изменение и воспроизведение запросов в сетевом журнале с помощью сетевой консоли. Откройте журнал сети, щелкните правой кнопкой мыши и выберите изменить и воспроизвести:
Новая панель— сетевая консоль открывается в панели DevTools и автоматически заполняет сведениями для HTTP-запроса. Чтобы отобразить ответ, возвращенный сервером, измените запрос (при необходимости) и нажмите кнопку Отправить.
Консоль сети также можно использовать для создания и отправки HTTP-запросов непосредственно из средств разработки.
Совет. Чтобы отобразить сетевую консоль на панели main (верхней) вместо панели средств разработки, см. раздел Перемещение инструментов между панелями.
Обновление. Эта функция выпущена и больше не является экспериментальной.
Рабочая роль службы отвечает На события на вкладке «Время»
Вкладка «Время» средства «Сеть» теперь содержит respondWith события рабочей роли службы. Событие respondWith рабочей роли службы показывает длительность от времени непосредственно до запуска обработчика событий рабочей роли fetch службы до момента, когда respondWith обещание обработчика fetch будет урегулировано.
Разверните узел Полученный ответ , чтобы отобразить дополнительные сведения из fetch ответа, такие как CacheStorageCacheName , serviceWorkerResponseSource и ResponseTime .
- Отображение отношения времени запросов в справочнике по сетевым функциям.
- Отображение разбивки по времени запроса в справочнике по сетевым функциям.
отзыв webhint на панели «Проблемы»
webhint — это средство с открытым исходным кодом, которое предоставляет отзывы в режиме реального времени о специальных возможностях, совместимости между браузерами, безопасности, производительности, PWA и других распространенных проблемах веб-разработки веб-сайтов. Вы можете просмотреть отзывы веб-сайта на панели «Проблемы «.
Чтобы включить эксперимент, см . статью Включение или отключение эксперимента и установите флажок Рядом с параметром Включить веб-статью. Откройте панель Проблемы , чтобы отобразить отзывы с веб-сайта.
- расширение webhint для Visual Studio Code
- Включение webhint в экспериментальных функциях в Средствах разработки Microsoft Edge
Перемещение инструментов между панелями
Как правило, такие средства, как Элементы и Сеть, могут открываться только на main (верхней) панели Средств разработки. Аналогичным образом, такие средства, как трехмерные представления и проблемы , могут открываться только в панели панели инструментов разработки (внизу). Теперь вы можете настроить макет DevTools, перемещая инструменты между верхней и нижней панелями.
Обновление. Эта функция выпущена и больше не является экспериментальной.
- Сведения о панели действий и средствах быстрого просмотра в обзоре средств разработки.
Улучшенная подсказка инициатора на панели «Сеть»
В Microsoft Edge 83 и 84 всплывающие подсказки для столбца Инициатор, который показывает причину запроса ресурса, в журнале сети , отображаемом с горизонтальной полосой прокрутки. Вы смогли отобразить только стек вызовов, который инициировал запрос, прокрутив по горизонтали подсказку.
Начиная с Microsoft Edge 85, теперь можно отображать стек вызовов инициатора в подсказке без прокрутки по горизонтали.
Объявления из проекта Chromium
В следующих разделах описаны дополнительные функции, доступные в Microsoft Edge 85, которые были добавлены в проект открытый код Chromium.
Редактирование стилей для платформ CSS-in-JS
Теперь в области Стили улучшена поддержка редактирования стилей, созданных с помощью ИНТЕРФЕЙСОВ API css Object Model (CSSOM). Многие платформы и библиотеки CSS-in-JS используют API CSSOM под капотом для создания стилей.
Теперь вы можете изменять стили, добавленные в JavaScript, с помощью CSSStyleSheet интерфейса . Это новый способ создания и распространения повторно используемых стилей при использовании Теневой модели DOM. См. раздел Интерфейс CSSStyleSheet в объектной модели CSS (CSSOM).
Например, стили h1 , добавленные с помощью CSSStyleSheet (API CSSOM), ранее не были редактируемыми. Теперь стили можно редактировать на панели Стили .
Маяк 6 в панели маяка
Маяк панель в настоящее время работает Lighthouse 6. Полный список всех изменений см . в заметках о выпуске версии 6.0.0.
Lighthouse 6.0 представляет в отчет три новые метрики: наибольший объем содержимого paint (LCP), совокупный сдвиг макета (CLS) и общее время блокировки (ТБT).
Формула оценки производительности также была перевывешна, чтобы лучше отразить процесс загрузки пользователя.
Первый значимый устаревание paint
First Meaningful Paint (FMP) не рекомендуется использовать в Lighthouse 6.0. FMP также удален из панели Производительность . Наибольший объем содержимого Paint является рекомендуемой заменой для FMP.
Поддержка новых функций JavaScript
DevTools теперь имеет улучшенную поддержку некоторых из последних функций языка JavaScript:
- Необязательное автозавершение синтаксиса цепочки. Автозавершение свойств в консоли теперь поддерживает необязательный синтаксис цепочки, например, name?. теперь работает в дополнение к name. и name[ .
- Выделение синтаксиса для закрытых полей. Поля частного класса теперь правильно выделены синтаксисом и красиво печатаются на панели Источники .
- Выделение синтаксиса для оператора объединения nullish. DevTools теперь правильно печатает оператор объединения nullish на панели Источников .
- Запуск JavaScript в консоли
- Функции отладки JavaScript
Предупреждения о ярлыках новых приложений в области манифеста
В средстве приложенияярлыки приложений помогают пользователям быстро приступать к выполнению распространенных или рекомендуемых задач в веб-приложении.
В средстве «Приложение » в области Манифест теперь отображаются предупреждения для следующих условий:
- Если значки ярлыков приложения меньше 96 x 96 пикселей.
- Если значки ярлыков приложения и значки манифеста не являются квадратными (так как значки игнорируются).
Согласованное отображение области «Вычислено»
Вычисленная область в инструменте Элементы теперь отображается согласованно в виде панели для всех размеров окна просмотра. Ранее вычисленная область объединялась внутри области Стили , когда средства разработки были узкими.
- Просмотр только css, который фактически применяется к элементу в справочнике по функциям CSS
Смещения байтов для файлов WebAssembly
DevTools теперь использует смещения байт-кода для отображения номеров строк дизассемблирования Wasm. Номера строк делают более понятным, что вы просматриваете двоичные данные, и в большей мере согласуются с тем, как среда выполнения Wasm ссылается на расположения.
Копирование и вырезка на основе строк на панели источников
При выполнении копирования или вырезания без выделения в редакторе панели «Источники» средства разработки копируют или вырезают текущую строку содержимого.
Обновления параметров консоли
Разгруппировать одни и те же сообщения консоли
Переключатель Группа, аналогичный в параметрах консоли, теперь применяется к дубликатам сообщений. Ранее он применялся только к аналогичным сообщениям.
Например, ранее Средства разработки не разгруппировали hello сообщения, даже если флажок Группировать аналогично . hello Теперь сообщения разгруппированы.
- Отключение группирования сообщений в справочнике по функциям консоли
Сохранение параметров только выбранного контекста
Параметры только для выбранного контекста в параметрах консоли теперь сохраняются. Ранее параметры сбрасывались при каждом закрытии и повторном открытии средств разработки. Это изменение делает поведение параметра совместимым с другими параметрами параметров консоли.
- Фильтрация сообщений из разных контекстов — в справочнике по функциям консоли
Обновления панели производительности
Сведения о кэше компиляции JavaScript в средстве производительности
Сведения о кэше компиляции JavaScript теперь всегда отображаются на панели Сводка средства производительности . Ранее средства разработки не отображали ничего, связанного с кэшированием кода, если кэширование кода не происходило.
Выравнивание времени навигации на панели «Производительность»
Ранее на панели Производительность указывалось время в линейках в зависимости от времени начала записи. Теперь время для записей, в которых пользователь переходит, изменилось. DevTools теперь показывает время линейки относительно навигации, а не время начала записи.
Время для DOMContentLoaded событий , First Paint, First Contentful Paint и Largest Contentful Paint обновляется, чтобы быть относительно начала навигации, что означает, что время соответствует времени, сообщаемому PerformanceObserver .
Новые значки для точек останова, условных точек останова и точек журнала
Обновление. С 2022 года точки останова теперь обозначаются синим прямоугольником, а не красным кругом.
На панели Источники есть новые структуры точек останова, условных точек останова и точек журнала. Точки останова представлены красным кругом, как и Visual Studio Code и Visual Studio. Значки добавляются для различения условных точек останова и точек журнала.
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Jecelyn Yeen (разработчик, Chrome DevTools).
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.
Эксперимент force_stopped_listing в Яндекс. браузере
Как включить эксперимент force_stopped_listing в Яндекс. браузере? Кейс на скриншоте. Помогите, плиииз!
Лучший ответ
1.Клавиша F12
2. Вкладка Console, справа от неё значок настроек (шестерёнка), тык на шестерёнку.
3. В выпавшем меню выбираем Experiments
4. В списке экспериментов находим/не находим нужный и ставим/не ставим галочку
muRmotУченик (155) 1 год назад
В экспериментах, в моём браузере, нету forced stopped listing.
muRmot, привет! хотела вам 1-2 вопроса задавать если конечно можете) как можно с вами связаться, или пишите мне в телеге @jesuissoul. Буду очень благодарна вам! Спасибо!
*Ася*Мастер (1200) 1 год назад
У меня его тоже нет, хоть и три браузера
Остальные ответы
Эксперименты
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
В коллекции эксперимент содержатся все ресурсы эксперимент, каждый из которых описывает эксперимент, доступный прошедшему аутентификацию пользователю.
Список методов для этого ресурса приведен в конце страницы.
Представления ресурса
Шаблон для ресурса эксперимента Google Analytics в формате JSON.
< "id": string, "kind": "analytics#experiment", "selfLink": string, "accountId": string, "webPropertyId": string, "internalWebPropertyId": string, "profileId": string, "name": string, "description": string, "created": datetime, "updated": datetime, "objectiveMetric": string, "optimizationType": string, "status": string, "winnerFound": boolean, "startTime": datetime, "endTime": datetime, "reasonExperimentEnded": string, "rewriteVariationUrlsAsOriginal": boolean, "winnerConfidenceLevel": double, "minimumExperimentLengthInDays": integer, "trafficCoverage": double, "equalWeighting": boolean, "snippet": string, "variations": [ < "name": string, "url": string, "status": string, "weight": double, "won": boolean > ], "servingFramework": string, "editableInGaUi": boolean, "parentLink": < "type": "analytics#profile", "href": string > >
- REDIRECT – Google Analytics переадресует трафик на различные варианты страниц, формирует отчеты по вариантам и анализирует полученные результаты.
- API – Google Analytics выбирает вариант для показа, создает отчеты на его основе и анализирует результаты. Показ варианта осуществляет вызывающая сторона.
- EXTERNAL – обработку вариантов осуществляет внешняя платформа, передающая сведения о них в Google Analytics. Показ выбранного варианта и анализ результатов осуществляет вызывающая сторона.
Методы
delete Удаляет эксперимент. get Возвращает доступный пользователю эксперимент. insert Создает эксперимент. list Выводит список доступных пользователю экспериментов. patch Обновляет существующий эксперимент. Этот метод поддерживает семантику PATCH. update Обновляет существующий эксперимент.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2018-04-22 UTC.
Экспериментальные функции в средствах разработки Microsoft Edge
—> Experiments page. If no info, write a tautology as a starting point. Add as needed, each month. * Keep h2 sections in same order as DevTools > Settings > Experiments. * In the heading and UI steps, keep the checkbox label UI string as it appears in the UI; do not revise or «fix» it. * Don’t change h2 text, that might break a link from UI. * When a checkbox is removed from all the channels, delete its section. Steps to maintain this page monthly: For latest Canary, and for latest Stable: 1. Go to edge://settings/help, update if needed. 1. In DevTools, select Settings > Preferences > Restore Defaults > Reload DevTools. 1. In DevTools, go to Settings > Experiments. 1. In the «Experiments which are turned on by default» section below, update the Edge Canary list & Edge Stable list at top. * In that section, link down to the h2; do not link to a different article. 1. Make sure the article has an h2 for each checkbox. 1. In each h2 section, update the presence or absence of «not», and update the version #: This checkbox is|is not present in Microsoft Edge Canary 123. This checkbox is|is not present in Microsoft Edge Stable 123. —>
Средства разработки Microsoft Edge предоставляют доступ к экспериментальным функциям, которые еще находятся в стадии разработки. В этой статье перечислены и описаны экспериментальные функции, которые находятся в следующих компонентах:
- Последняя версия канала Предварительной версии Canary microsoft Edge.
- Последняя версия стабильного выпуска Microsoft Edge.
Все каналы Microsoft Edge имеют экспериментальные функции. Вы можете получить последние экспериментальные функции с помощью канал Microsoft Edge Canary. Полный список экспериментов, доступных в вашей версии Microsoft Edge, см. на странице Параметры экспериментов> в средствах разработки.
Эти эксперименты могут быть нестабильными или ненадежными и могут потребовать перезапуска средств разработки.
Эксперименты, включенные по умолчанию
По умолчанию включены следующие экспериментальные функции. Эти функции можно использовать сразу, не изменяя никаких параметров. При необходимости можно отключить эти экспериментальные функции по умолчанию.
Включен по умолчанию в Microsoft Edge Canary 122:
- Разрешение имен переменных в выражениях с помощью карт источника
- Установка всех точек останова при запуске
- Включение селектора фоновых страниц (например, для предварительной отладки)
- Отображение предупреждения о self-XSS при вставки кода
- Enable webhint
- Отображение проблем в элементах
- Открытие исходных файлов в Visual Studio Code
- Просмотр результатов console.profile() на панели Производительность для Node.js
- Включение панели спекулятивных загрузок на панели приложений
Включен по умолчанию в Microsoft Edge Stable 120:
- Автоматическая печать миниифицированных источников
- Средство просмотра исходных заказов
- Отладка WebAssembly: включение поддержки DWARF
- Установка всех точек останова при запуске
- Отображение более точных изменений на вкладке Изменения
- Локальные переопределения для заголовков ответов
- Включение выбора цвета за пределами окна браузера
- Включение селектора фоновых страниц (например, для предварительной отладки)
- Отображение предупреждения о self-XSS при вставки кода
- Enable webhint
- Отображение проблем в элементах
- Открытие исходных файлов в Visual Studio Code
- Просмотр результатов console.profile() на панели Производительность для Node.js
- Включение панели спекулятивных загрузок на панели приложений
Включение или отключение эксперимента
Экспериментальные функции постоянно обновляются и могут вызвать проблемы с производительностью. Это одна из причин, по которой вы можете отключить эксперимент.
Чтобы включить или отключить эксперимент в Microsoft Edge, выполните приведенные далее действия.
- Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
- В DevTools на панели инструментов main нажмите кнопку Настройка и управление Средствами разработки (
) и нажмите кнопку Параметры (
). Или нажмите клавиши SHIFT+?. - В левой части панели Параметры выберите страницу Эксперименты :
- Установите или снимите флажок для эксперимента. Некоторые эксперименты выбираются по умолчанию.
- Нажмите кнопку Закрыть (
«) в правом верхнем углу окна Параметры средств разработки. - Нажмите кнопку Перезагрузить средства разработки .
Восстановление значений по умолчанию, для которых выбраны эксперименты
Чтобы восстановить параметры по умолчанию, для которых включены экспериментальные функции, выполните следующие действия:
- Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
- В Средствах разработки на панели инструментов main нажмите кнопку Параметры (). Или нажмите клавиши SHIFT+?. Откроется панель Параметры с выбранной страницей Параметры .
- В нижней части страницы Параметры нажмите кнопку Восстановить значения по умолчанию и обновить, а затем нажмите кнопку Закрыть (
- Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
- В Средствах разработки на панели инструментов main нажмите кнопку Параметры (). Или нажмите клавиши SHIFT+?. Откроется панель Параметры с выбранной страницей Параметры .
- В левой части панели Параметры выберите страницу Эксперименты .
- Щелкните текстовое поле Фильтр и введите текст, например временная шкала. При вводе на странице Эксперименты отображаются только соответствующие флажки.
- Чтобы завершить фильтрацию, очистите текстовое поле Фильтр .
Предоставление отзывов об экспериментах
Мы рады услышать ваши отзывы об экспериментальных функциях. Чтобы поделиться с нами своими отзывами, обратитесь к команде Средств разработки Microsoft Edge.
Список экспериментов
Ниже перечислены флажки экспериментов, которые отображаются в последней версии канала Предварительной версии Canary Microsoft Edge. Также отмечается стабильный выпуск после добавления или удаления флажков в Canary.
Разрешить расширениям загружать пользовательские таблицы стилей
Некоторые надстройки Microsoft Edge могут определять пользовательские цветовые темы для средств разработки. При установке надстройки с темой необходимо включить эксперимент Разрешить расширениям загружать пользовательские таблицы стилей для просмотра тем надстройки.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Запись стеков создания узлов
Чтобы записать трассировки стека JavaScript при добавлении узлов DOM в DOM во время выполнения, включите этот эксперимент. Захваченные трассировки стека отображаются на панели Трассировка стека на панели Элементы .
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Автоматическая печать миниифицированных источников
Если этот эксперимент включен, при отображении миниифицированного файла на панели «Источники» файл открывается на одной вкладке на панели «Источники» и красиво печатается.
Если этот эксперимент отключен, в пользовательском интерфейсе с кнопкой появится запрос на печать файла. Файл открывается на дополнительной вкладке с добавленным суффиксом :formatted.
- Миниифицированный файл объединяется в одну длинную строку.
- В отличие от этого, красивая печать представляет содержимое файла в отступе, более удобочитаемом формате.
- Этот флажок отсутствует в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Монитор протокола
DevTools взаимодействует с проверяемой страницей с помощью протокола DevTools.
Чтобы отслеживать сообщения, отправленные и полученные средствами разработки для отладки проверенной страницы, выполните следующие действия:
- Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
- В Средствах разработки на панели инструментов main нажмите кнопку Параметры (). Или нажмите клавиши SHIFT+?. Откроется панель Параметры с выбранной страницей Параметры .
- В левой части панели Параметры выберите страницу Эксперименты .
- Установите флажок Монитор протоколов и нажмите кнопку Закрыть (
- Этот флажок отсутствует в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Показать параметр для предоставления внутренних данных в моментальных снимках кучи
новое с версии Microsoft Edge 105
Отображается ли флажок для предоставления внутренних данных в моментальных снимках кучи в средстве «Память «.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Средство просмотра исходных заказов
Этот флажок удаляется. Средство просмотра исходных заказов теперь является обычной функцией, а не экспериментом. Флажок установлен или снят, не имеет значения; Функция «Средство просмотра исходных заказов» отображается в средствах разработки в любом случае.
- Этот флажок отсутствует в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Временная шкала: инициаторы событий
Следует ли включать инициаторов событий на временную шкалу.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Временное включение Профилировщика JavaScript
новое с версии Microsoft Edge 114
Временно включает средство «Профилировщик JavaScript» (вкладку) в средствах разработки. Средство JavaScript Profiler будет не рекомендуется. Чтобы записать профили ЦП JavaScript, используйте вместо этого средство производительности .
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Временное отключение маркеров отступов
новое с версии Microsoft Edge 122
Временно отключает маркеры отступов в средстве «Источники «. Маркеры отступов — это вертикальные линии, указывающие уровень отступа кода:
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок отсутствует в Microsoft Edge Stable 120.
Отладка WebAssembly: включение поддержки DWARF
Включает поддержку dwarf для отладки WebAssembly. См. статью Улучшенная отладка WebAssembly в статье Новые возможности в средствах разработки (Microsoft Edge 80).
- Этот флажок отсутствует в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Разрешение имен переменных в выражениях с помощью карт источника
Использует исходные карты для автоматического сопоставления исходных имен переменных с минимальными именами переменных при вычислении выражений.
Этот флажок влияет на консоль и вкладку Контрольная боковая панель в средстве Источники .
- Составление карты обработанного кода с исходным кодом для отладки
- Сопоставление минимального кода с исходным кодом для отображения удобочитаемого кода в обзоре средства «Источники«.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Установка всех точек останова при запуске
Задает все возможные определенные точки останова при запуске.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение нового расширенного алгоритма перцептивной контрастности (APCA), заменив предыдущие рекомендации по коэффициенту контрастности и AA/AAA
Алгоритм APCA заменяет правила вычисления контрастности AA/AAA в палитре. Палитра используется на вкладке Стили в средстве Элементы.
APCA — это новый способ вычисления контрастности. Этот алгоритм основан на современных исследованиях восприятия цвета. Алгоритм APCA в большей степени учитывает контекст, чем правила AA/AAA. Контрастность вычисляется на основе следующих пространственных свойств текста, цвета и контекста.
- Пространственные свойства текста, включающие насыщенность и размер шрифта.
- Пространственные свойства цвета, включающие воспринимаемую контрастность между текстом и фоном.
- Пространственные свойства контекста, включающие внешнее освещение, окружение и предполагаемое назначение.
- Новое вычисление контрастности цветов — расширенный алгоритм перцептивной контрастности (APCA) в новых возможностях в средствах разработки (Microsoft Edge 89).
- Изменение цветов с помощью палитры в справочнике по функциям CSS:
- Тестирование контрастности цвета текста с помощью палитры
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение полного представления дерева специальных возможностей на панели «Элементы»
Добавляет кнопку в инструмент «Элементы «, которая переключается между деревом DOM и деревом специальных возможностей.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включите новый инструмент «Редактор шрифтов» в области Стили.
Включение средства «Редактор шрифтов» в области «Стили»
Для редактирования шрифтов можно использовать визуальный редактор шрифтов. Используйте его, чтобы определить шрифты и характеристики шрифтов. Визуальный редактор шрифтов помогает выполнять следующие действия.
- Переключение между единицами для различных свойств шрифта
- Переключение между ключевыми словами для различных свойств шрифта
- Преобразование единиц
- Создание точного кода CSS
Чтобы использовать визуальный редактор шрифтов, выполните следующие действия:
- Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
- В DevTools на панели инструментов main выберите вкладку Элементы. Если вкладка Элементы не отображается, нажмите кнопку Другие вкладки (
) или кнопку Дополнительные инструменты (
«) . - На вкладке Стили выберите значок Редактор шрифтов .
Некоторые каналы браузера имеют флажок Включить новый редактор шрифтов в области Стили.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение автоматического создания отчетов о проблемах с контрастностью с помощью панели «Проблемы»
Включает автоматическое создание отчетов о проблемах с контрастностью в средстве «Проблемы «.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение экспериментальных функций файлов cookie
Включает экспериментальные функции файлов cookie.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Отображение более точных изменений на вкладке Изменения
- Этот флажок отсутствует в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Синхронизация изменений CSS в области Стили
Следует ли синхронизировать изменения CSS на вкладке Стили в инструменте Элементы .
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Выделяет нарушающий узел или атрибут в дереве DOM панели Элементов.
новое с версии Microsoft Edge 106
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Локальные переопределения для заголовков ответов
Следует ли использовать локальные переопределения для заголовков ответов.
- Этот флажок отсутствует в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение выбора цвета за пределами окна браузера
Позволяет перемещать курсор мыши, когда это инструмент для пипети, в любом месте экрана, а не только в окне Microsoft Edge.
В инструменте Элементы на вкладке Стили щелкните любой предварительный просмотр цвета. Откроется средство выбора цвета. Нажмите кнопку Переключатель цвета (). Курсор мыши становится пипетой. Щелкните в любом месте монитора, чтобы выбрать цвет.
- Изменение цветов с помощью палитры в справочнике по функциям CSS
- Этот флажок отсутствует в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Группирование источников в созданные и развернутые деревья
Новое с версии Microsoft Edge 104
Определяет, следует ли группировать ресурсы в отдельные созданные и развернутые деревья на вкладке Страница инструмента Источники . Эта функция в средстве «Источники » позволяет группировать исходные файлы в две папки в зависимости от того, являются ли они:
- Исходные файлы (созданные, то есть файлы с локальными изменениями).
- Рабочие файлы (развернутые файлы, которые находятся на веб-сервере после компиляции и объединения исходных файлов).
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Скрытие игнорируемого кода в представлении дерева источников
новое с версии Microsoft Edge 106
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Выделение важных свойств DOM в средстве просмотра свойств объекта
новое с версии Microsoft Edge 105
При выборе этого флажка важные свойства DOM будут выделены на вкладке Свойства в таких средствах, как элемент «Элементы» , для выбранного в данный момент элемента дерева DOM. Этот новый эксперимент упрощает просмотр основных свойств. Некоторые свойства выделены полужирным шрифтом, другие — полужирным шрифтом, рядом с ними есть значок star.
Это удобно, так как в JavaScript объекты наследуются от родительских объектов, которые сами наследуются от других предков, иногда это сотни свойств. Этот эксперимент помогает найти свойства main.
Средство просмотра свойств объекта находится в нескольких средствах, включая Элементы, Источники, Консоль и Сеть. Он предоставляет представление свойств объектов в виде дерева.
В инструменте «Элементы»
Чтобы просмотреть средство просмотра свойств объекта в инструменте «Элементы» , выполните следующие действия:
- Щелкните правой кнопкой мыши элемент на веб-странице и выберите пункт Проверить. Откроется devTools с элементом страницы, выбранным в дереве DOM инструмента «Элементы «.
- В инструменте Элементы выберите вкладку Свойства , которая сгруппирована по вкладке Стили . Вкладка Свойства содержит список свойств для выбранного элемента.
В средстве «Источники»
Чтобы просмотреть средство просмотра свойств объекта в средстве «Источники» , выполните следующие действия:
- .js Откройте файл.
- Задайте точку останова в строке .js кода в файле.
- Приостановите отладчик в этой строке, запустив код на веб-странице. Свойства объекта отображаются в разделе Область на правой боковой панели. См . раздел Просмотр и изменение свойств и переменных в функциях отладки JavaScript.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение селектора фоновых страниц (например, для предварительной отладки)
новое с версии Microsoft Edge 114
Включает селектор фоновой страницы, например для предварительной отладки.
- Обзор и временные шкалы для миграции на манифест версии 3 — рабочие роли обслуживания вместо фоновых страниц для расширений Microsoft Edge.
- chrome.runtime — извлекает фоновую страницу.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Отображение предупреждения о self-XSS при вставки кода
новое с версии Microsoft Edge 117
Отображает предупреждение о самостоятельном межайтовом скрипте при вставке кода в консоль. Если этот флажок включен, при первоначальной попытке вставить код в консольное средство отображается предупреждающее сообщение:
«Предупреждение. Не вставлять код, который вы не понимаете или не проверили себя в консоли DevTools. Это может позволить злоумышленникам украсть вашу личность или получить контроль над компьютером. Введите «разрешить вставку» ниже, чтобы разрешить вставку».
После ввода allow pasting в консоль можно вставить код в текущем сеансе DevTools и в последующих сеансах.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Изменение панели фильтров на панели «Сеть»
новое с версии Microsoft Edge 120
В средстве «Сеть » панель фильтров была изменена:
- Кнопки заменяются раскрывающимся списком Типы запросов .
- Флажки заменяются раскрывающимся списком Дополнительные фильтры .
Панель фильтра с этим флажком снята:
Панель фильтра с установленным флажком:
- Фильтрация ресурсов в разделе Проверка сетевой активности.
- Фильтрация запросов в справочнике по сетевым функциям.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение навигации на панели производительности
новое с версии Microsoft Edge 121
Добавлена возможность увеличения диапазонов времени записи в средстве «Приложение «. Кроме того, добавляется путь навигации по времени, чтобы вернуться к предыдущим диапазонам.
Чтобы увеличить диапазон времени, выполните приведенные далее действия.
- Чтобы создать диапазон времени, перетащите мышь в раздел Обзор .
- Наведите указатель мыши на выбранный диапазон времени и щелкните значок лупы, который отображается при наведении указателя мыши. Новый элемент добавляется в путь тайм-навигации.
Чтобы уменьшить масштаб до предыдущего диапазона времени, щелкните элемент в пути синхронизации и навигации.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение представления автозаполнения
новое с версии Microsoft Edge 121
Добавляет средство автозаполнения в средства разработки для записи различных событий, которые браузер активирует, когда пользователь заполняет форму с помощью функции автозаполнения браузера. Например, когда браузер запоминает ваш адрес и автоматически заполняет его в поле адреса.
- Автоматическое заполнение в техническом документе о конфиденциальности Microsoft Edge.
- Автозаполнение в обзоре функций и API WebView2.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок отсутствует в Microsoft Edge Stable 120.
Необхожие исключения log DevTools для консоли
Определяет, следует ли регистрировать необначенные исключения DevTools в средстве консоли .
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Enable webhint
webhint — это инструмент с открытым исходным кодом, обеспечивающий обратную связь в реальном времени для веб-сайтов и локальных веб-страниц. Тип обратной связи, предоставляемой webhint, включает в себя:
- Специальные возможности
- Совместимость между браузерами
- Безопасность
- Производительность
- Прогрессивные веб-приложения (PWA)
- Другие распространенные проблемы веб-разработки
В эксперименте webhint отображается отзыв webhint на панели Проблемы . Выберите проблему, чтобы отобразить документацию по решению и список затронутых ресурсов на веб-сайте. Выберите ссылку на ресурс, чтобы открыть соответствующее средство, например Сеть, Источники или Элементы:
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Отображение проблем в элементах
Включите этот эксперимент для просмотра синтаксических ошибок в HTML в представлении DOM инструмента «Элементы «. Дополнительные сведения см. в статье Волнистые подчеркивания выделяют проблемы с кодом и улучшения в средстве Elements.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Открытие исходных файлов в Visual Studio Code
В эксперименте с открытым исходным кодом в Visual Studio Code редактор кода средства «Источники» используется Visual Studio Code для редактирования локальных файлов. При включении этого эксперимента средства разработчика определяют, когда вы редактируете локальный файл, и предлагает выбрать папку для использования в качестве рабочей области.
При выборе папки для использования в качестве рабочей области при выборе любой ссылки на файл в средствах разработки файл открывается в Visual Studio Code. В предыдущих версиях Microsoft Edge это действие открывал файл в редакторе кода средства «Источники» в средствах разработки.
Все изменения, внесенные в DevTools, теперь изменяют файл на жестком диске и синхронизируются с Visual Studio Code. Сведения о настройке рабочей области см. в статье Открытие исходных файлов в Visual Studio Code.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение анализатора сбоев
новое с версии Microsoft Edge 114
Включает средство анализатора сбоев .
- Отладка трассировок стека ошибок JavaScript с помощью средства анализатора сбоев в новых возможностях в средствах разработки (Microsoft Edge 113) .
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение адаптивного регулирования ЦП
новое с версии Microsoft Edge 114
Включает адаптивное регулирование ЦП.
- Регулирование ЦП во время записи в справочнике по функциям производительности.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Игнорировать список кадров JavaScript на временной шкале
Следует ли включать список «Игнорировать» для кадров JavaScript на временной шкале.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Профиль динамической кучи
Определяет, следует ли обновлять профиль кучи в реальном времени.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Временная шкала профилировщика кучи выборки
Определяет, следует ли отображать профилировщик выборки кучи временная шкала.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Временная шкала: отслеживание недействительности
Определяет, следует ли отображать отслеживание недействительности на временной шкале.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Временная шкала: отображение всех событий
Определяет, должны ли отображаться все события на временной шкале.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Временная шкала: статистика вызовов среды выполнения версии 8 на временной шкале
Определяет, следует ли отображать статистику вызовов среды выполнения версии 8 на временной шкале.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Просмотр результатов console.profile() на панели Производительность для Node.js
новое с версии Microsoft Edge 109
Отображает console.profile() результаты в средстве производительности для Node.js.
console.profile() Можно использовать в консоли DevTools (или в коде) для запуска профиля JavaScript, а затем можно использовать для console.profileEnd() его завершения. После этого вы сможете просмотреть запись профиля в средстве Профилировщик JavaScript .
Это программный способ записи выполнения JavaScript, который может быть полезен в определенных ситуациях отладки производительности.
Если средства разработки используются для отладки процессов, выполняемых в Node.js, этот эксперимент делает все, что console.profile создает, доступно для средства повышения производительности .
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение точек останова инструментирования
Следует ли останавливаться в точках останова теста. Этот эксперимент делает точки останова более надежными.
- Включение синхронизации в точках останова инструментирования
- При первой загрузке исходных файлов точки останова могут не активироваться
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Использование область информации из карт источников
новое с версии Microsoft Edge 118
Следует ли использовать область сведения из исходных карт.
- Составление карты обработанного кода с исходным кодом для отладки
- Сопоставление минимального кода с исходным кодом для отображения удобочитаемого кода в обзоре средства «Источники«.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение панели спекулятивных загрузок на панели приложений
новое с версии Microsoft Edge 121
Добавляет страницу спекулятивных загрузок в разделе Фоновые службы средства приложения , включая страницу Правил и страницу Спекуляции :
API правил спекуляции можно использовать для программного задания Microsoft Edge для предварительной отрисовки определенных страниц. Это полезно, так как предварительно отрисованные страницы практически мгновенно переходят к. Браузер предварительно отображает скрытым образом следующие страницы, на которые пользователь, скорее всего, перейдет, пока пользователь все еще находится на текущей странице.
На странице Спекулятивная загрузка перечислены правила спекуляций, определенные веб-автором на веб-странице. На странице содержатся отладочные сведения, показывающие, использовалось ли правило на самом деле, и показывает, была ли определенная страница предварительно отрисовывается.
На странице Правила есть столбцы:
На странице Спекуляции есть столбцы:
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включение дерева контейнеров хранилища на панели приложений
новое с версии Microsoft Edge 118
Следует ли включить дерево контейнеров хранилища в средстве «Приложение «.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.
Включить контекстное меню, позволяющее изменять деревья в диаграмме пламени
новое с версии Microsoft Edge 121
Добавляет контекстное меню, позволяющее изменять деревья в диаграмме пламени в средстве производительности . Включив этот эксперимент, можно щелкнуть правой кнопкой мыши события в диаграмме пламени средства производительности и изменить диаграмму в этом расположении:
В зависимости от контекста меню, которое можно щелкнуть правой кнопкой мыши, могут быть следующие элементы меню:
- Функция слияния
- Функция свертывание
- Свертывание повторяющихся потомков
- Отмена функции свертывание
- Отмена свертывания повторяющихся потомков
- Отмена всех действий
- Загрузка профиля
- Сохранение профиля
- Найдите узкое место в статье Общие сведения о средстве производительности.
- Просмотрите действия потока main в справочнике по функциям производительности.
- Этот флажок установлен в Microsoft Edge Canary 122.
- Этот флажок установлен в Microsoft Edge Stable 120.