Клиенты Microsoft Edge DevTools Protocol версии 0,2 (EdgeHTML)

Примечание

Версия 0,2 протокола Microsoft Edge DevTools работает только на обновлениях для Windows 10 октября 2018 и более поздних сборок для предварительной оценки Windows .

Протокол DevTools 0,2 поддерживает указанные ниже клиентские средства.

 Microsoft Edge DevTools предварительный просмотр  кода Visual Studio  Microsoft Visual Studio 15,8

Предварительный просмотр средств разработчика в Microsoft Edge

Вы можете использовать автономное приложение Microsoft Edge DevTools Preview из Microsoft Store для удаленной отладки основного устройства под управлением Microsoft EDGE (EdgeHTML 17 или более поздней версии).

Версия 0,2 протокола DevTools предоставляет новые домены для отладки стилей и макетов и API консоли в дополнение к функциональным возможностям отладки скриптов, представленным в версии 0,1. В пользовательском интерфейсе DevTools это преобразуется в функциональные возможности, доступные на панелях элементы, консоль и отладчик . В настоящее время удаленная отладка Microsoft Edge ограничена для настольных компьютеров, и поддержка других устройств с Windows 10, которые поступают в будущих выпусках.

Вот как можно настроить удаленную отладку с помощью предварительной версии приложения Microsoft Edge DevTools. Протокол DevTools версии 0,2 требует установки Windows 10 октября 2018 или более поздней сборки предварительной оценки для Windows на компьютере Host (отлаживаемого). Приложение DevTools Preview (используется на компьютере отладчика) будет работать в Windows 10 версии 16299 (обновление для Windows 10 для дизайнеров, 10/2017) или более позднюю версию.

На компьютере с ведущим (отлаживаемого) компьютером...

  1. Если вы находитесь в сети Wi-Fi, убедитесь, что сеть помечена как domain или Private. Чтобы проверить это, откройте приложение Центр безопасности защитника Windows , щелкните брандмауэр & защиту сети и проверьте, указана ли сеть в качестве доменной сети или частной сети.

    Если в списке общедоступный, перейдите в раздел Параметры > & сети > Wi-Fi, щелкните свою сеть и переключитесь на кнопку Network Profile ( Частная).

  2. Откройте панель управления " для разработчиков " в разделе " Параметры Windows" (Найдите для разработчика и щелкните " Использование функций разработчика"), а также:

    а. Включить или выключить режим разработчика. При этом будет установлен пакет режима разработчика , позволяющий удаленное средство для рабочего стола.

    б. Включите портал устройств (включите удаленную диагностику через локальную сеть) и обнаружение устройств (Сделайте устройство видимым для USB-подключений и локальной сети).

    в. Включите проверку подлинности и введите имя пользователя и пароль.

    г. Обратите внимание на экран IP-адрес компьютера и порт подключения (50443).

  3. Откройте в Microsoft Edge вкладки, которые вы хотите отладить на клиентском компьютере.

На клиентском компьютере (отладчике)...

  1. Установите и запустите автономное приложение Microsoft Edge DevTools Preview из Microsoft Store.

  2. Откройте удаленную панель и введите сетевое расположение (URL-адрес и порт) хост-компьютера и нажмите кнопку подключить.

  3. Установите сертификат хост-компьютера в появившемся диалоговом окне недоверенный сертификат .

  4. Укажите имя пользователя и пароль, которые вы определили для проверки подлинности портала устройства.

  5. Удаленная панель загрузит список целевых объектов страниц, которые могут быть отлажены, на хост-компьютере. Выберите один из них, чтобы запустить отладку.

  6. Используйте кнопку " Обновить " для обновления и повторной загрузки списка целевых объектов удаленной страницы на хост-компьютере. Нажмите кнопку " Отключить ", чтобы вернуться к экрану Подключение к удаленному устройству и присоединиться к другому узлу.

Visual Studio Code

С помощью отладчика для расширения кода EDGE Вы можете отлаживать сценарий, который выполняется в Microsoft EDGE, прямо в коде Visual Studio. Расширение требует обслуживания веб-приложения с localhost, которое можно начать из командной строки или задачи.

Для начала сделайте следующее:

  1. Установите отладчик для расширения кода Edge.

  2. Перезапустите программу VS, откройте папку, содержащую проект, для которого вы хотите выполнить отладку, и установите точки останова в коде.

  3. Настройте задачу запуска localhost, чтобы открыть нужную страницу проекта: Отладка > добавления конфигурации.... Например:

    {
        "version": "0.2.0",
        "configurations": [
    
            {
                "name": "Launch localhost",
                "type": "edge",
                "request": "launch",
                "url": "http://localhost/mypage.html",
                "webRoot": "${workspaceFolder}/wwwroot"
            }
        ]
    }
    

    С помощью отладчика больше не заданные параметры настройки запуска.

  4. Запустите сервер на локальном компьютере и нажмите кнопку " запустить отладку (воспроизвести)" или F5 Запустите Microsoft Edge. При попадании в точку останова вы будете прерываться на код VS и проанализировать код от него.

Дополнительные сведения можно найти в руководстве по отладке кода VS для Microsoft Edge .

Microsoft Visual Studio

Если вы используете последнюю версию Visual Studio (visual Studio 15,8 или более поздней версии), которая выполняется в Windows 10 октября 2018г., вы можете запускать и отлаживать Microsoft Edge из интегрированной среды разработки для любого проекта ASP.NET или .NET.

Вот как можно настроить отладку Microsoft Edge с помощью Visual Studio:

  1. Установите и запустите последнюю версию Visual Studio (visual Studio 15,8 или более поздней версии).

  2. Открытие существующего основного проекта ASP.NET или .NET или Создание нового проекта... использование одного из шаблонов Visual C# .NET.

  3. В обозревателе решенийпроекта откройте файлы JavaScript, которые вы хотите отладить, и установите точки останова в интерфейсе IDE так же, как и в случае с кодом на стороне сервера.

  4. Нажмите F5 , чтобы запустить Microsoft EDGE, на котором запущен сервер DevTools. При попадании в точку останова вы перейдете в Visual Studio и сможете проанализировать код и прокрутить его.