Отладка с помощью WebView2

Цель элемента управления Microsoft Edge WebView2 — объединение лучшей из функций разработки веб-приложений и собственного приложения, а также средств разработчика. На следующей странице описаны различные инструменты для разработки с помощью элементов управления WebView2.

Microsoft Edge DevTools

Используйте средства разработчика Microsoft EDGE (Chromium) для отладки веб-содержимого, отображаемого в элементах управления WebView2, таким же образом, как и при использовании Microsoft Edge. Чтобы открыть DevTools, установите фокус в окне WebView, а затем выполните одно из указанных ниже действий.

  • Выберите F12 .
  • Выберите Ctrl + Shift + I .
  • Откройте контекстное меню \ (щелкните правой кнопкой мыши, > выбрать Inspect .

Microsoft Edge DevTools

Примечание

При отладке приложения в Visual Studio с прикрепленным отладчиком машинного кода F12 вместо средств разработчика может возникнуть нажатие клавиш отладчика машинного кода. Ctrl + Shift + I Чтобы избежать такой ситуации, нажмите или используйте контекстное меню (щелкните правой кнопкой мыши).

Примечание

Вы можете использовать --auto-open-devtools-for-tabs аргумент командной строки, чтобы открыть новое окно DevTools при первом создании WebView.

VisualStudio

Используйте отладчик сценариев в Visual Studio 2019 версии 16,4 Preview 2 и более поздних версий для отладки сценария в Visual Studio. Убедитесь, что компонент диагностики JavaScript установлен на рабочем столе с рабочей нагрузкой C++.

Диагностика JavaScript в Visual Studio

Диагностика JavaScript в Visual Studio

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

  • На вкладке Свойства конфигурациивыберите пункт Отладка.
  • В свойстве Type Debugger (тип отладчика ) выберите JavaScript (WebView2) в списке параметров.

Отладчик JavaScript для Visual Studio

Отладчик JavaScript для Visual Studio

Все настроено и готово к отладке.

Чтобы выполнить отладку, выполните указанные ниже действия.

  1. Установка точек останова

    • Откройте файл сценария и установите точку останова в нужном месте. 

      Примечание

      Адаптеры отладки JS/TS не выполняют сопоставление исходного пути.Вы должны открыть именно тот же путь, связанный с вашим WebView2. 

  2. Выполнение кода

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

    • Вы запускаете приложение, и отладчик подключается после создания первого webview2.На экране появятся все ожидающие результаты отладки. 

      Примечание

      Этот метод отладки в настоящее время ограничен приложениями Win32 и надстройками Office.

Visual Studio Code

Код Visual Studio можно использовать для отладки сценариев, которые выполняются в элементах управления WebView2. Дополнительные сведения можно найти в разделе приложения Microsoft EDGE (Chromium) WebView.

Знакомство с командой Microsoft Edge WebView

Поделитесь своим мнением, чтобы помочь вам в создании более WebView2ных возможностей. Чтобы отправить запросы функций или ошибки или найти известные проблемы, ознакомьтесь с репозиторием отзывов и предложений Microsoft Edge WebView .