Элементы расширений Microsoft EDGE и кода

С помощью элементов для расширения кода Microsoft Edge VS используйте инструмент "элементы" браузера Microsoft EDGE в коде Visual Studio. Как при запуске, так и при присоединении средство "элементы" подключается к экземпляру Microsoft EDGE, отображает структуру HTML среды выполнения и позволяет изменить макет или проблемы со стилизацией.

Элементы для расширения кода EDGE на работе

Элементы для расширения кода EDGE на работе

Запуск Microsoft Edge из расширения Elements

Перейдите к элементам на панели действий. Рядом с надписью элементы для Microsoft Edge: targets — знак "плюс", который открывает браузер для вашего приложения. Если вы выбрали параметр about: Blank , вы должны перейти в браузере, чтобы он отображался на панели элементов в коде vs.

Запуск Microsoft Edge из представления отладки

Если вы привыкли использовать представление отладку в коде Visual Studio, вы можете получить доступ к элементам из этого инструмента. Перейдите в представление Отладка \ ( Ctrl + Shift + D в Windows или Command + Shift + D на macOS ).

Если у вас нет каких бы то ни было конфигураций в коде VS, нажмите клавишу F5 Windows или macOS или нажмите зеленую кнопку воспроизведения . Выберите ребро в раскрывающемся списке. Вы увидите launch.json файл со следующей конфигурацией.

{
    "version": "0.2.0",
    "configurations": [
        {
            
            "name": "Launch Microsoft Edge and open the Elements tool",
            "request": "launch",
            "type": "vscode-edge-devtools.debug",
            "url": "http://localhost:3000"
        
        }
    ]
}

После того как вы загрузили правильную конфигурацию, нажмите клавишу F5 Windows или macOS или нажмите зеленую кнопку воспроизведения . С помощью инструмента "элементы", который знаком вам, из браузера Microsoft Edge запускается в коде VS, что позволяет получать доступ к ролика браузера и просматривать компоненты страницы.

Присоединение к Microsoft Edge

Чтобы прикрепить код VS к экземпляру Microsoft Edge \ (Chromium ), необходимо запустить браузер, выполнив следующую команду на экране терминала.

start msedge --remote-debugging-port=9222

После запуска приложения добавьте указанную ниже конфигурацию в файл Launch. JSON .

{
    "type": "vscode-edge-devtools.debug",
    "request": "attach",
    "name": "Attach to Microsoft Edge and open the Elements tool",
    "url": "http://localhost:3000/",
    "webRoot": "${workspaceFolder}/out",
    "port": 9222
}

Выберите команду присоединиться к Microsoft EDGE и откройте средство элементы из раскрывающегося меню отладчик. Затем либо нажмите F5 на Windows, либо macOS либо нажмите зеленую кнопку воспроизведения . Код VS запускает инструмент элементы, позволяя получить доступ к экранной роли браузера, проверить модель DOM и стиль компонентов на странице.

Связь с элементами для группы расширения кода Microsoft Edge VS

Отправьте отзыв, выполнив архивацию в репозитории GitHub в расширении.

Если вы хотите лучше сделать элементы для расширения кода Microsoft EDGE и более, ваши публикации будут рады! Найдите все, что нужно, чтобы начать работу в репозитории GitHub на расширение.