Microsoft edge devtools client что это
Microsoft Edge позволяет открывать Инструменты разработчика (DevTools), нажимая F12 или нажав сочетание клавиш Ctrl + Shift + i. Это набор инструментов, которые позволяют вам проверять и отлаживать JavaScript, HTML и различные веб-приложения и страницы.
Microsoft Edge теперь основан на Chromium браузер с рядом эксклюзивных функций, таких как «Чтение вслух», и службами, привязанными к Microsoft вместо Google. Браузер уже получил несколько обновлений с поддержкой устройств ARM64. Кроме того, Microsoft Edge по-прежнему поддерживает ряд устаревших версий Windows, включая Windows 7. Ознакомьтесь с версиями Windows, поддерживаемыми Microsoft Edge Chromium. Наконец, заинтересованные пользователи могут загрузить установщики MSI для развертывания и настройки.
Microsoft Edge включает ряд инструментов, которые могут быть полезны разработчикам и опытным пользователям. Например, эти инструменты можно использовать для эмуляции другого устройства или программной платформы. Фактически, вы можете использовать один из вариантов, чтобы загрузить официальный ISO-образ Windows 10 напрямую.
Что доступно в Edge Developer Tools
С DevTools вы можете для выполнения следующих действий, все в браузере.
- Проверяйте и вносите изменения в свой HTML-сайт.
- Редактируйте CSS и сразу же просматривайте предварительный просмотр того, как ваш сайт отображает
- Просмотрите все операторы console.log () из внешнего кода JavaScript.
- Отладьте сценарий, установив точки останова и переходя по нему построчно
Чтобы открыть DevTools, нажмите F12 или нажмите Ctrl + Shift + I в Windows/Linux ( Command + Option + I в macOS). Вы можете найти официальную документацию DevTools здесь .
Доступные панели
Инструменты разработчика Microsoft Edge (Chromium) включают следующие панели.
Запуск в Edge Canary 89.0.726.0 , вы можете отключить параметр Открывать DevTools при нажатии клавиши F12 в настройках браузера.
Чтобы отключить сочетание клавиш F12 для инструментов разработчика в Microsoft Edge
Используйте протокол DevTools для инструментов, проверки, отладки и браузеров профилей, включая Microsoft Edge. Протокол Microsoft Edge DevTools соответствует API протокола Chrome DevTools. Для справочной документации перейдите к chrome DevTools Protocol Viewer.
С изменением в основном веб-платформе Microsoft Edge на Chromium, протокол Microsoft Edge (EdgeHTML) DevTools не будет получать никаких дополнительных обновлений. В будущем протокол Microsoft Edge DevTools будет соответствовать API протокола Chrome DevTools.
Все методы, ms которые были префиксировали в протоколе Microsoft Edge (EdgeHTML) DevTools, больше не поддерживаются в протоколе Microsoft Edge DevTools.
Использование протокола DevTools
Прикрепить настраиваемый клиент-инструментарий к серверу DevTools в Microsoft Edge:
Закрой все экземпляры Microsoft Edge.
Запуск Microsoft Edge с удаленным портом отладки.
Дополнительно можно запустить отдельный экземпляр Microsoft Edge с помощью отдельного профиля пользователя.
/json/version
Предоставляет сведения о браузере хост-машины и о том, какую версию протокола DevTools она поддерживает.
Параметры
Объект Return
/json/protocol
Предоставляет всю поверхность API протокола, сериализоваемую как JSON.
Параметры
Объект Return
Объект JSON, который представляет доступную поверхность API для текущей версии протокола.
/json/list
Предоставляет список кандидатов для отладки целевых объектов страницы.
Параметры
Объект Return
/json/close
Закрывает целевой процесс. Например, в Microsoft Edge закрывает вкладку страницы.
Параметры
Объект Return
Удаленные средства для Microsoft Edge (бета-версия)
Теперь вы можете установить удаленные средства для Microsoft Edge (бета-версии) из Microsoft Store. Это приложение позволяет удаленно отламывку Microsoft Edge на Windows 10 или более позднем устройстве с компьютера разработки.
Чтобы узнать, как настроить устройство Windows и подключиться к ним с компьютера разработки, см. в этой ссылке Начало работы с удаленной отладки Windows устройств.
Следующие разделы ссылки для удаленных средств для Microsoft Edge.
/msedge/json/list
Предоставляет список msedge.exe кандидатов всех процессов (включая PWAs и все вкладки во всех экземплярах Microsoft Edge) на Windows 10 или более позднем устройстве для отладки.
Параметры
Объект Return
/msedge/
/msedge/[pid]/json/list
Предоставляет список целевых объектов страницы кандидата для экземпляра Microsoft Edge, который соответствует предусмотренной [pid] для отладки.
Параметры
Объект Return
/msedge/[pid]/json/version
Предоставляет сведения о экземпляре Microsoft Edge, [pid] который соответствует предоставленной версии протокола DevTools, который он поддерживает.
Параметры
Объект Return
/msedge/[pid]/json/protocol/
Предоставляет всю поверхность API протокола, сериализированную как JSON для экземпляра Microsoft Edge, который соответствует предоставленному [pid] .
Параметры
Объект Return
Объект JSON, который представляет доступную поверхность API [pid] для версии протокола, Microsoft Edge, который соответствует используемой при условии.
В Microsoft Edge браузере есть встроенные средства веб-разработки, называемые Microsoft Edge DevTools. DevTools — это набор средств веб-разработки, которые отображаются рядом с отображаемой веб-страницей в браузере. DevTools предоставляет эффективный способ проверки и отладки веб-страниц и веб-приложений. Вы даже можете редактировать исходные файлы и создавать проекты веб-сайтов в среде DevTools.
С помощью Средств разработки можно выполнять следующие действия:
Проверка, настройка и изменение стилей элементов на веб-странице с помощью динамических инструментов с визуальным интерфейсом. Проверьте, где хранится содержимое браузера для создания веб-страницы, .html включая форматы файлов, .css``.js``.jpg а также форматы файлов.
Эмулировать поведение веб-сайта на разных устройствах и имитировать мобильную среду с разными условиями сети. Проверьте сетевой трафик и просмотрите расположение проблем.
Отладка JavaScript с помощью отладки точек останова и путем использования интерактивной консоли. Поиск проблем с памятью и отрисовки веб-приложений.
Поиск проблем со специальными возможностями, производительностью, совместимостью и безопасностью в продуктах, а также устранение найденных проблем со специальными возможностями с помощью средств разработки.
Используйте среду разработки для синхронизации изменений в DevTools с файловой системой и из Интернета.
Открыть средства разработчика
В Microsoft Edge средства разработчика можно открыть с помощью мыши или клавиатуры любым из следующих способов. То, какое средство открыто, зависит от того, как вы открываете DevTools.
Основные способы:
Действие | Результирующее средство |
---|---|
Щелкните правой кнопкой мыши любой элемент на веб-странице и выберите пункт " Проверить". | Инструмент Elements с расширением дерева DOM для отображения элемента страницы, щелкнув правой кнопкой мыши. |
Нажмите Ctrl ++ Shift``I (Windows/Linux) или I Command + Option +(macOS). | Ранее использованное средство или средство приветствия . |
Нажмите клавишу F12 . | Ранее использованное средство или средство приветствия . |
Дополнительные способы:
Действие | Результирующее средство |
---|---|
На панели Microsoft Edge выберите Параметры ( ) > дополнительные > средства Средства разработчика. | Ранее использованное средство или средство приветствия . |
Нажмите Ctrl ++ Shift``J (Windows, Linux) или J Command + Option +(macOS). | Средство консоли . |
Нажмите Ctrl ++ Shift``C (Windows, Linux) или C Command + Option +(macOS). | Средство Elements с развернутным деревом DOM, чтобы отобразить элемент. |
Нажмите Shift + F10 , чтобы открыть контекстное меню. Чтобы выбрать команду "Проверить ", нажмите Up Arrow и нажмите кнопку . Enter . | Средство Elements с развернутным деревом DOM, чтобы отобразить элемент. |
Нажмите Tab и Shift + Tab переместите фокус на элемент страницы. Затем нажмите, Shift + F10 чтобы открыть контекстное меню. Чтобы выбрать команду "Проверить ", нажмите Up Arrow и нажмите кнопку . Enter . | Инструмент Elements с расширением дерева DOM для отображения элемента страницы с фокусом. |
Откройте DevTools, щелкнув правой кнопкой мыши элемент на веб-странице
Хороший способ открыть DevTools — щелкнуть правой кнопкой мыши элемент на веб-странице и выбрать пункт "Проверить":
Откроется devTools с выделенным правой кнопкой мыши элементом в дереве DOM в средстве Elements :
Откройте devTools с помощью Microsoft Edge панели инструментов
На панели Microsoft Edge можно выбрать Параметры и другие ( . ) > дополнительные > средства Средства разработчика:
"Дополнительные инструменты" > "Средства разработчика"." />
Автоматическое открытие devTools при открытии новой вкладки
Чтобы средства разработчика автоматически открывались при открытии новой вкладки в браузере:
В командной строке откройте Microsoft Edge, передав --auto-open-devtools-for-tabs флаг следующим образом:
Windows командной строки:
Оболочка bash в macOS:
Оболочка bash в Linux:
Отключение сочетания клавиш F12
Чтобы запретить нажатие F12 клавиши DevTools:
В Microsoft Edge перейдите к edge://settings/system .
В разделе "Средства разработчика " отключите open the DevTools при нажатии клавиши F12.
Поддержка клавиатуры
Вы можете взаимодействовать с devTools с помощью мыши или клавиатуры. Сочетания клавиш обеспечивают быстрый доступ к функциональным возможностям и необходимы для специальных возможностей. Различные средства становятся все более доступными с помощью клавиатуры и специальных возможностей, таких как средства чтения с экрана.
Изменение места закрепления DevTools в браузере
Вы можете закрепить средства разработки в правой, левой или нижней части браузера или открепить их в отдельном окне. См . раздел "Изменение размещения средств разработки" (открепка, закрепление снизу, закрепление слева).
Увеличение масштаба средств разработки
Пользовательский интерфейс DevTools реализуется с помощью HTML и CSS, например веб-страниц, чтобы можно было увеличивать и увеличивать масштаб с помощью стандартных сочетаний клавиш. Уровни масштабирования для средств разработки и отображаемой страницы независимы.
Чтобы увеличить масштаб части DevTools в браузере, выполните указанные ниже действия.
- Если фокус еще не установлен на Средства разработки, щелкните где-нибудь в DevTools.
- Нажмите Ctrl + + или Ctrl + - (Windows linux). Или нажмите или Command``- + + Command +(macOS).
Чтобы увеличить отображаемую страницу, щелкните страницу и используйте те же сочетания клавиш, что и выше.
Чтобы восстановить масштаб до 100 %:
- Убедитесь, что основное внимание уделяется нужной части браузера— devTools или отрисовке страницы.
- Нажмите Ctrl + 0 (Windows Linux) или Command + 0 (macOS).
Чтобы увеличить масштаб Параметры:
Чтобы увеличить масштаб средств разработки с помощью меню команд, выполните следующие действия.
Функции главной панели инструментов
DevTools предоставляет множество функций для проверки, отладки и изменения веб-сайта, отображаемого в браузере. Большинство средств отображают изменения в динамическом режиме. Динамические изменения делают средства очень удобными при настройке внешнего вида и навигации или функциональности веб-продукта без необходимости его обновления или сборки.
Панели инструментов с вкладками, содержащие вкладки и страницы
Кроме нескольких инструментов значков (средство проверки **** и эмуляция устройств), средства devTools делятся на набор средств с вкладками, таких как инструмент " Элементы", средство консоли и **** средство "Источники". В меню команд средства называются панелями. Вкладка средства содержит панель, содержащую пользовательский интерфейс средства.
Вкладки более высокого уровня:
Инструменты организованы в набор вкладок на главной панели инструментов и на панели инструментов панели инструментов. Большинство средств также называются панелями. Панель — это внутренний пользовательский интерфейс средства. Средство имеет вкладку, которая может присутствовать на главной панели инструментов и панели инструментов панели инструментов.
Вкладки нижнего уровня:
На панели некоторых инструментов есть один или несколько наборов вкладок (панелей вкладок). Например, инструмент Elements содержит набор вкладок, включающих стили , прослушиватели событий и вкладки специальных возможностей. **** Для других средств на панели средства есть страницы, перечисленные слева.
Главная панель инструментов и панель инструментов "Панель"
Есть две панели инструментов: главная панель инструментов в верхней части devTools и панель в нижней части при **** нажатии. Esc
Главная панель инструментов содержит следующие функции:
- Средство приветствия .
- Средство "Элементы ". Постоянного.
- Консольное средство. Постоянного.
- Средство "Источники ". Постоянного.
- Сетевое средство.
- Средство производительности .
- Средство " Память".
- Средство приложения .
- Средство безопасности .
- Средство Lighthouse .
- Средство обзора CSS .
Ниже описаны функции панели инструментов.
Средство "Проверка"
При нажатии кнопки "Проверить средство "Проверка" ( значок средства проверки) можно выбрать элемент на текущей веб-странице. Пока средство **** проверки активно, можно навести указатель мыши на разные части веб-страницы, чтобы получить подробные сведения об элементах страницы, а также много цветное наложение, показывающее размеры макета, заполнение и поле элемента страницы.
Эмуляция устройства
Средство Welcome
Включает сведения о новых функциях средств разработчика, способ связи с командой и предоставляет информацию о некоторых функциях.
Средство "Элементы"
Позволяет проверять, изменять и отлаживать HTML и CSS. Изменения можно изменить в средстве при отображении изменений в браузере.
Инструмент Elements всегда присутствует на главной панели инструментов.
Средство "Консоль"
В средстве консоли можно:
Средство консоли всегда присутствует на главной панели инструментов и панели инструментов панели инструментов.
Средство "Источники"
Средство "Источники " — это редактор кода и отладчик JavaScript. Вы можете редактировать проекты, поддерживать фрагменты кода и выполнять отладку текущего проекта.
Средство "Источники " всегда присутствует на главной панели инструментов.
Средство "Сеть"
Средство " Сеть" позволяет отслеживать и проверять запросы или ответы из кэша сети и браузера. Вы можете фильтровать запросы и ответы в соответствии со своими потребностями и имитировать различные сетевые условия.
Недавно на базе Владимирского Института информационных технологий и радиоэлектроники прошла очередная встреча VLADIMIR TECH TALKS. Технологический митап, организованный международным IT-разработчиком Altenar в формате открытого и доверительного разговора про насущные проблемы в области разработки ПО, собрал немало участников из числа начинающих и продвинутых программистов. Делимся содержанием наиболее интересных докладов.
Наиболее заметным стало выступление независимого WEB-разработчика Антона Грибанова. Он поделился своим опытом использования DevTools. На самом деле, обзорных статей по заявленной тематике для профессионалов немало. С ними легко можно ознакомиться на профильных ресурсах (тык, тык, тык, тык).
Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу. Поэтому, если вы матерый разработчик, вас вряд ли заинтересует дальнейшее повествование. Хотя, вы можете поделиться своим богатым жизненным опытом в комментариях к публикации.
Говорим по понятиям
Инструменты разработчика (от англ. «development tools» или сокращённо «DevTools») ─ это программы, позволяющие создавать, тестировать и отлаживать (debug) программное обеспечение.
Современные браузеры, Safari, Firefox, Microsoft Edge, Chrome, Яндекс и другие, имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. Отдельно устанавливать их не требуется. С их помощью можно просматривать и отлаживать HTML сайта, его CSS и Javascript. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.
В правом углу размещенной выше иллюстрации можно увидеть структуру web-страницы и стили, примененные к текущему элементу.
Типичная веб-страница представляет собой текстовый файл в формате HTML, который определяет структуру и контент страницы, а также может содержать ссылки на файлы в других форматах (текст, графические изображения, видео, аудио, базы данных и др.), а также гиперссылки для быстрого перехода на другие веб-страницы или доступа к ссылочным файлам.
Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, образуют — веб-сайт. При этом образующие веб-сайт страницы могут находиться на одном или нескольких веб-серверах, которые могут располагаться в одном дата-центре или удаленно друг от друга, зачастую в разных странах.
HTML (англ. HyperText Markup Language) ─ это скелет веб-страницы. Для того, чтобы вся эта история начала двигаться и нужен Javascript (календарики, выпадающее меню, всплывающие окна, анимация и прочее, делается с помощью JS). Для придания странице божеского вида вам понадобится CSS (каскадные таблицы стилей).
Представим HTML-документ в простейшей форме:
Фактически HTML-документ состоит из элементов (строка с открывающим и закрывающим тегом и, собственно, само содержимое).
Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров применяются атрибуты тегов, они содержат информацию, которую вы не хотите показывать в фактическом контенте.
Атрибут — используется для определения характеристик html-элемента и помещается внутри открывающего тега элемента. Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения. Смотрите на пример ниже, в нем используется атрибут disabled, у которого явно не задано значение.
Если внутри какого-либо тега используется еще один или даже несколько других — это называется вложенность тегов html.
Вот тут еще можно подсмотреть описание HTML. Там доступно и наглядно все показано.
Используем DevTools на практике
Потрогать изначально скрытые браузером DevTools можно весьма просто, использовав сочетание клавиш или перейдя в раздел «Дополнительные инструменты / Инструменты Разработчика». Также можно ткнуть курсором в любое место страницы, нажать на правую клавишу мыши и выбрать «Просмотреть код».
Рассмотрим несколько вкладок из DevTools. И первый — режим эмуляции из мобильных устройств. Несмотря на десктопный браузер, страница у вас будет отображаться так, если бы вы на нее зашли с мобильного устройства. Вторая вкладка — Elements. Она демонстрирует структуру html страницы. С ее помощью браузер видит web-страницу после всего того, что с ней сделал Javascript. И Network — это сетевые запросы страницы (список web-ресурсов, загружаемых страницей для отображения демонстрируемого контента).
В панели Elements располагается дерево элементов. Здесь можно открывать теги, смотреть их содержимое, при этом в документе будет подсвечиваться текущий выбранный тег. Также можно посмотреть различные атрибуты, например, «Класс» или «Размер».
Загружаем картинки в Instagram с компьютера
С десктопа вы абсолютно спокойно можете посмотреть свою ленту в Instagram, полайкать посты, написать комментарии. Но вот загрузить фото или видео браузер вам не даст. Вот тут-то на помощь к вам и приходит режим эмуляции мобильных устройств.
Выбираем во вкладке наиболее понравившуюся вам модель телефона и вуаля (только не забудьте обновить страницу). Заблудиться в аскетичном интерфейсе Instagram сложно. Что делать тоже интуитивно понятно.
Скачиваем видео из Instagram Stories
С помощью DevTools задача скачать видео из сторис Instagram утрачивает свою сакральность. Все до безобразия элементарно. Переходим на вкладку Network. Для удобства выбираем фильтр Media. Он покажет аудио- и видеофайлы, которые запрашивает страница. А дальше запускаем понравившееся нам видеоизображение, с прямой ссылкой на место его хранения. Ну, а далее открываем его в новом табе и выбираем место его нового хранения (например, на вашем диске).
Скачиваем аудио с музыкальных сайтов
С помощью DevTools можно также прикоснуться и к музыкальным файлам. Механика аналогичная той, что описана выше.
Скачиваем фото из Instagram
В принципе ничего не мешает в случае понравившегося изображения сделать скриншот или попытаться «Сохранить изображение как», но качество и результативность этих упражнений устроит далеко не всех. Для пытливых умов опять-таки на помощь приходит инструментарий DevTools. Выбираем «Просмотреть код», находим ссылку на изображение в атрибуте src.
Второй способ через вкладку Network. Переходим по вкладке, ставим фильтр Img и обновляем страницу. Кстати, изображения можно отсортировать по размеру, контентные картинки, как правило, на странице самые большие по размеру. Точно также, правой клавишей кликаем на файл и «Сохранить как» в наиболее удобном для вас месте.
Удаление блокираторов контента
Бывает так, что хочется посмотреть какой-либо контент, но без регистрации сайт этого сделать не дает. И снова, здравствуйте DevTools. Обычно контент закрывается плашкой или прозрачным слоем. Открываем инструменты разработчика, определяем в коде блок-элемент закрывающий нужный нам участок контента и нажимаем Delete element.
Разблокировка форм ввода
Нередко всевозможные государственные структуры, разрабатывая на Javascript различные свои электронные формы для заполнения, препятствуют нашему любимому Copy/Paste (вставка и выделение текста). В этом случае снова приходится прибегать к помощи DevTools.
В инструментах разработчика идем в Настройки. Прокручиваем до поля Debugger и нажимаем галочку Disable JavaScript. Теперь можно вставлять текст.
Второй путь ─ открываем инструменты разработчика, нажимаем заветное сочетание клавиш и выбираем поиск по командам. Там выбираем JavaScript и одним из пунктов будет выключить JavaScript. Выключаем и радуемся жизни. Кстати, после вашего Copy/Paste JavaScript не помешало бы включить обратно, поскольку некоторые формы без него могут и не работать.
Версия для печати web-страниц
Надо признать, что сайтов, требующих использования описываемых дальше костылей, становится все меньше и меньше, но они по-прежнему периодически встречаются. Тем не менее, выбираем нужный нам сайт, удаляем во вкладке Elements через инструмент разработчика с помощью Delete elements ненужные элементы и части кода (реклама, контакты, ссылки и прочее). Далее отправляем все на печать и радуемся жизни.
Узнаем сохраненный пароль
Как узнать сохраненный пароль, если браузер автоматически его подставил в закрытом режиме? Можно через настройки залезть в пароли и отыскать все концы. Но мы не ищем легких путем. Снова на связи DevTools. Выделяем правой клавишей поле с вводом пароля, далее просмотреть код, после чего появляется достаточно типичная картина.
После этого находим атрибут type, кликаем дважды на значение Password и просто удаляем его. Далее поле ввода становится по умолчанию текстовым, и мы видим сохраненным пароль.
Скачиваем видео из вКонтакте
Предлагаемый ниже рецепт несколько хитрее, чем был в случае с Instagram stories ранее, но тоже вполне земной. Заходим на мобильную версию ресурса (по сути это два разных в сравнении с десктопной версией сайта). Открываем инструмент разработчика, заходим во вкладку Сеть, в фильтрах выбираем Прочее и включаем воспроизведение видео. Далее в списке появится ссылка на проигрываемое видео, ну а дальше по накатанной: правая клавиша мыши, открываем в новой вкладке и сохраняем в любимое место на компьютере.
Давайте чаще встречаться!
Следующий митап уже 23 апреля, можно прийти лично, если вы во Владимире, или посмотреть прямую трансляцию (все минувшие видео собраны тут). Кстати, в гостях у нас будет замечательный Никита Соболев.
Today’s web developers face more challenges than ever before. New frameworks spring up left and right. The number of devices capable of running the web multiply by the day. And we strive as creators to enable an inclusive and trustworthy world where fundamentals like accessibility, privacy, performance, and security are key to success.
These challenges are an opportunity for builders and consumers of devtools, requiring our solutions to enable innovation and scale. We need to provide web developers and tool vendors targeting Microsoft Edge, including other Microsoft teams, flexibility in solving these tough problems.
With the Windows 10 April 2018 Update, we’re taking the first major step on our journey by introducing the Microsoft Edge DevTools Protocol, a set of REST and JSON-RPC/WebSocket APIs, which enable clients to diagnose and debug Microsoft Edge tabs. In addition, we’ve worked with our teammates from Visual Studio, Visual Studio Code, and the Microsoft Edge DevTools to integrate with, and validate the interoperability of, these new capabilities within those apps.
In this post, we’ll elaborate on why we’ve taken this approach and the exciting progress we’ve made so far. We’ll provide resources throughout to help you get started using these new technologies. At the end, we’ll look at our next steps and share the many ways you can provide feedback to help us shape the future of the Microsoft Edge DevTools Protocol.
Get started with the new local and remote debugging scenarios with the new documentation from aka.ms/edp-docs. Requries the Windows 10 April 2018 Update or the Microsoft Edge DevTools Preview app.
Rebooting the Microsoft Edge DevTools platform
A year ago, we set out to re-architect the Microsoft Edge DevTools platform with two general customer scenarios in mind: growing the number of devtools that work with Microsoft Edge, and expanding support for debugging Microsoft Edge on new device form factors.
Expanding opportunities in local and remote scenarios is a key motivator for the new architecture. More details on the components in the diagram above are provided below.
To tackle the realities described above and achieve both local and remote support, we came up with a short but impactful list of guiding principles:
- Decouple the platform and client components and release the client separately to allow for faster UX improvements and innovations
- Build the platform interfaces on standard technologies to foster a larger ecosystem of devtools with support for Microsoft Edge
- Build the platform in a way which allows devtools running locally to target instances of Microsoft Edge on remote Windows devices
- Align with other browser vendors to support ecosystem portability and efficiency
This work will span multiple releases, but we’ve already made some exciting progress. Let’s dive in.
Decoupling the Microsoft Edge DevTools platform and client
To enable us to deliver customer value more rapidly, we first looked to take the Microsoft Edge DevTools app and ship it separately from the Windows OS as a Store application.
But to ship via the Microsoft Store, we needed to build only on APIs which are publicly available to others. This lead to the creation of the new Edge DevTools Protocol (EDP). The protocol is comprised of two sets of APIs: REST and JSON-RPC via WebSocket. Through EDP, devtools can build experiences around invoking methods and subscribing to diagnostics and debugger events.
The REST APIs are primarily used to discover information about EDP such as the version, available targets, and the supported API surface. All response values are formatted as JSON objects.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
[ |
"id":"00000206-87EE-4D55-0091-C4C08A1F30C8", |
"title":"Bing", |
"type":"Page", |
"url":"https://www.bing.com/", |
"webSocketDebuggerUrl":"ws://localhost:9222/target/00000206-87EE-4D55-0091-C4C08A1F30C8" |
>, . ] |
The WebSocket APIs are used to issue debugger and diagnostics commands and subscribe to correlated events. The APIs are broken down into Domains, which further break down into Methods, Events, and Types. A simple example would be the Debugger.setBreakpointByUrl API. A client would issue a JSON-RPC command looking something like this to set a breakpoint based on a JS file URL and location:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
"id" : 209 , |
"method" : " Debugger.setBreakpointByURL " , |
"params" : |
"lineNumber" : 15 , |
"url" : " https://www.foo.com/content.js " , |
"columnNumber" : 30 , |
"condition" : " " |
> |
> |
By switching to this publicly documented APIs, we’ve begun the process of shipping a new Microsoft Edge DevTools Preview app which runs in part on EDP. You can read more about the new DevTools Preview app here.
Fostering an ecosystem of Microsoft Edge DevTools
In addition to calling APIs, from within those tools developers will need a way to launch the Microsoft Edge DevTools Server. We’re excited to announce that in the April 2018 update, we’ve introduced a new command line parameter and Edge UX for doing that. Check out the capture below for a preview of that experience:
The animated gif above shows the new Microsoft Edge DevTools server command-line launching functionality added in the Windows 10 April 2018 update.
To prove the viability of this approach, we on the Web Platform team partnered with the Visual Studio and Visual Studio Code teams to support F5 debugging of JavaScript running in a Microsoft Edge tab. We look forward to sharing more on that front soon!
Supporting remote debugging
In addition to wanting to foster a community of devtools which target Microsoft Edge, we want to enable those tools to target Microsoft Edge running on a remote Windows device. Though this specific scenario is not yet supported, it shows our long-term thinking:
Imagine you’re a HoloLens developer working with WebVR. Trying to debug your web app in Microsoft Edge on the HoloLens would likely be a time-consuming activity. Without a mouse and keyboard, navigating of devtools would be a cumbersome experience. Much better would be to run devtools on your local dev machine and remotely target Microsoft Edge instances running directly on the HoloLens.
To accomplish that, we built a plugin for the Windows Device Portal (WDP) which hosts the same Microsoft Edge DevTools Server that runs locally when launched via the command-line utility explained above. When you enable WDP in the Windows For developer settings, this will automatically install and activate the EDP plugin.
Using the Remote tab in the new Microsoft Edge DevTools preview app, you can connect to a remote device, view its targets, and connect to and debug them. You can read more about that here and here.
Note: At this point we support remote devices (and virtual machines) running the Windows 10 April 2018 Update or higher on PCs.
Aligning with the devtools protocol community
When we set out to build the devtools protocol for Microsoft Edge, we had a choice: build something which aligns with industry precedents or create our own approach tailored for our browser. The choice was obvious to us so we opted to align with the Chrome DevTools Protocol (CDP).
In the early winter of 2017, we met with fellow web experts from Google, Mozilla, Apple, VS Code, and others to discuss how better to align our work around devtools protocols. The result of that discussion is the DevTools Protocol Web Platform Incubator Community Group (WICG). Through this new group, we hope to publicly explore what alignment looks like and how best we as devtools protocol vendors can benefit the community.
Separate from the WICG, we’ve worked hard as we’ve implemented EDP to validate that our API surface and method/event semantics mirror CDP. By releasing version 0.1 with support for three clients (Visual Studio Code, Visual Studio, and Edge DevTools preview app), we’ve achieved a high degree of interoperability. Where needed due to platform differences, we’ve introduced Microsoft Edge-specific methods and properties, all prefixed with ms and safely ignorable by any client not requiring them.
Lastly, though we’ve committed to testable interoperability, we know there will be bugs, and we hope you will help us find them! We look forward to your feedback as you build great devtools using EDP.
Next steps
This release is the first major step on a multi-milestone journey. We’re passionately committed to building the best Microsoft Edge developer tools and platform APIs to enable our customers to be more efficient and to fix bugs in Microsoft Edge. In terms of what’s next for EDP, here’s a quick look:
- More devtools: we have more features to migrate to EDP within the Microsoft Edge DevTools, and are actively migrating the most-used tools to the new APIs. In parallel, we’re investigating how tools like Sonarwhal and WebDriver can integrate, as well.
- More devices: the first release supports Windows Desktop SKU devices (including VMs of that flavor), and we plan to expand the Windows SKUs and devices supported for remote debugging.
- Interop improvements: as more devtools on-board and we grow our API surface, we’ll continue to invest in ensuring we’re working with the larger DevTools Protocol community to align our efforts.
That’s a rough and quick run through our thoughts about the future. We’ll continue to evolve these priorities as we interact with our developer communities to build new platform capabilities together.
Providing feedback
If you’d like to provide feedback, we’d love to hear it and recommend several channels:
- Feedback Hub: You can file feedback using the Microsoft Edge category and the Developer tools sub-category in the Feedback Hub app on Windows 10—just press Win+F to get started. Whether it’s a bug or suggestion, this is the easiest way for us to receive, track, and communicate around issues you bring to our attention. : We monitor and use requests as an important signal informing what we do, and to help prioritize the order in which we implement new features. Please add requests or upvote your favorites.
Thanks for taking the time to learn about the new Microsoft Edge DevTools Protocol and our vision for a rich ecosystem of Microsoft Edge devtools. We hope you’re as excited as we are. Happy coding!
Читайте также: