Отладка надстроек с помощью средств разработчика в Microsoft Edge

В этой статье показано, как выполнить отладку клиентского кода (JavaScript или TypeScript) надстройки за пределами текущей интегрированной среды разработки.

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

Примечание.

Если в надстройке есть команда надстройки , которая выполняет функцию, функция выполняется в скрытом процессе выполнения браузера, из которого невозможно запустить средства разработчика Microsoft Edge, поэтому метод, описанный в этой статье, не может использоваться для отладки кода в функции.

  1. Загрузите неопубликованное приложение и запустите надстройку.

    Примечание.

    Сведения о загрузке неопубликованных надстроек в Outlook см. в статье Загрузка неопубликованных надстроек Outlook для тестирования.

  2. Запустите средства разработчика Microsoft Edge одним из следующих способов:

    • Убедитесь, что область задач надстройки имеет фокус и нажмите клавиши CTRL+SHIFT+I.
    • Щелкните правой кнопкой мыши (или выберите и удерживайте) область задач, чтобы открыть контекстное меню и выбрать пункт Проверить, или откройте меню личных данных и выберите Подключить отладчик. (Меню личных данных не поддерживается в Outlook.)

    Примечание.

    Новый классический клиент Outlook для Windows не поддерживает контекстное меню или сочетание клавиш для доступа к средствам разработчика Microsoft Edge. Вместо этого необходимо запустить olk.exe --devtools из командной строки. Дополнительные сведения см. в разделе "Отладка надстройки" статьи Разработка надстроек Outlook для нового Outlook в Windows.

  3. Откройте вкладку Источники .

  4. Откройте файл, который требуется отладить, выполнив следующие действия.

    1. В правой части верхней строки меню средства нажмите кнопку ... , а затем выберите Поиск.
    2. Введите строку кода из файла, который требуется отладить, в поле поиска. Это должно быть то, что, скорее всего, не будет в любом другом файле.
    3. Нажмите кнопку обновить.
    4. В результатах поиска выберите строку, чтобы открыть файл кода в области над результатами поиска.

    Вкладка

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

  6. Выполните функции в надстройке, необходимые для срабатывания точки останова.

Совет

Дополнительные сведения об использовании инструментов см. в статье Обзор средств разработчика Microsoft Edge.

Отладка диалогового окна в надстройке

Если надстройка использует API Office Dialog, диалоговое окно запускается в отдельном процессе от области задач (если таковой имеется), и средство должно быть запущено из этого отдельного процесса. Выполните указанные ниже действия.

  1. Запустите надстройку.

  2. Откройте диалоговое окно и убедитесь, что в нем есть фокус.

  3. Откройте средства разработчика Microsoft Edge одним из следующих способов:

    • Нажмите клавиши CTRL+SHIFT+I или F12.
    • Щелкните правой кнопкой мыши (или выберите и удерживайте) диалоговое окно, чтобы открыть контекстное меню и выбрать пункт Проверить.
  4. Используйте средство так же, как и для кода в области задач. См . статью Отладка надстройки области задач с помощью средств разработчика Microsoft Edge ранее в этой статье.

Автоматическое открытие средств разработчика Microsoft Edge для отладки инициализации

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

  1. Закройте приложение Office, в котором планируется выполнить отладку надстройки.
  2. Задайте переменную WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS среды, чтобы включить значение --auto-open-devtools-for-tabs.
  3. Откройте приложение Office.
  4. Запустите надстройку.
  5. Средства разработчика Microsoft Edge должны открыться автоматически. Используйте средство так же, как и при отладке области задач, как указано в разделе Отладка надстройки области задач с помощью средств разработчика Microsoft Edge.

Примечание.

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