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

  • Статья

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

  • Вы не можете или не хотите выполнять отладку с помощью средств, встроенных в интегрированную среду разработки; или возникает проблема, которая возникает только при запуске надстройки за пределами интегрированной среды разработки.
  • На вашем компьютере используется сочетание версий Windows и Office, которые используют исходный элемент управления Веб-представление EdgeHTML.

Совет

Сведения об отладке с помощью устаревшей версии Edge в Visual Studio Code см. в разделе Расширение отладчика надстройки Microsoft Office для Visual Studio Code.

Чтобы определить, какой браузер или веб-представление вы используете, см. статью Браузеры и элементы управления webview, используемые надстройками Office.

Совет

В последних версиях Office одним из способов определить элемент управления webview, который использует Office, является меню личных данных в любой надстройке, где он доступен. (Меню личных данных не поддерживается в Outlook.) Откройте меню и выберите Сведения для безопасности. В диалоговом окне Сведения о безопасности в Windows среда выполнения сообщает о Microsoft Edge, устаревшая версия Microsoft Edge или Интернет-Обозреватель. Среда выполнения не включена в диалоговое окно в более ранних версиях Office.

Примечание.

Чтобы установить версию Office, которая использует устаревшее веб-представление Edge, или принудительно использовать устаревшую версию Microsoft Edge, см. статью Переключение на устаревшее веб-представление Edge.

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

  1. Установите предварительную версию средств разработки Microsoft Edge. (Слово "Предварительная версия" указано в названии по историческим причинам. Не существует более поздней версии.)

    Примечание.

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

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

  3. Запустите Microsoft Edge DevTools.

  4. Перейдите на вкладку Локальные. Имя вашей надстройки будет указано в списке. (На вкладке отображаются только те процессы, которые выполняются в EdgeHTML. Средство не может подключаться к процессам, выполняемым в других браузерах или веб-представлениях, включая Microsoft Edge (WebView2) и Интернет-Обозреватель (Trident).)

    Edge DevTools показывает процесс с именем legacy-edge-debugging.

  5. Выберите имя надстройки, чтобы открыть ее в средствах.

  6. Перейдите на вкладку Отладчик.

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

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

    Вкладка отладки Edge DevTools с 4 частями с метками от A до D.

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

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

Совет

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

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

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

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

  2. Откройте диалоговое окно и нажмите кнопку Обновить в средствах. Отображается процесс диалога. Его имя происходит от <title> элемента в HTML-файле, открытом в диалоговом окне.

  3. Выберите процесс, чтобы открыть его и выполнить отладку, как описано в разделе Отладка надстройки области задач с помощью предварительной версии Инструментов разработки Microsoft Edge.

    Edge DevTools показывает процесс с именем My Dialog.

Переключение на устаревшее веб-представление Edge

Переключить устаревшее веб-представление Edge можно двумя способами. Можно выполнить простую команду в командной строке или установить версию Office, которая по умолчанию использует устаревшую версию Edge. Мы рекомендуем использовать первый метод. Но второй следует использовать в следующих сценариях.

  • Проект был разработан с помощью Visual Studio и IIS. Это не Node.js.
  • Вы хотите быть абсолютно надежным в тестировании.
  • Если по какой-либо причине программа командной строки не работает.

Переключение с помощью командной строки

Если проект основан на Node.js (т. е. не разработан с помощью Visual Studio и IIS), вы можете заставить Office в Windows использовать элемент управления webview EdgeHTML, предоставляемый устаревшей версией Edge, или элемент управления Trident webview, предоставляемый Интернетом Обозреватель для запуска надстроек, даже если у вас есть сочетание версий Windows и Office, в которых обычно используется более новое веб-представление. Дополнительные сведения о том, какие браузеры и веб-представления используются различными сочетаниями версий Windows и Office, см. в разделе Браузеры и элементы управления webview, используемые надстройками Office.

Примечание.

Средство, используемое для принудительного изменения в webview, поддерживается только в канале подписки на бета-версию Microsoft 365. Присоединитесь к программе предварительной оценки Microsoft 365 и выберите параметр Канал бета-версии , чтобы получить доступ к сборкам Office Beta. См. также сведения об Office: какую версию Office я использую?.

Строго, это переключатель webview этого средства (см. шаг 2), который требует канала бета-версии. Средство имеет другие переключатели, для которых нет этого требования.

  1. Если проект не был создан с помощью генератора Yeoman для надстроек Office , необходимо установить средство office-addin-dev-settings. Выполните следующую команду в командной строке.

    npm install office-addin-dev-settings --save-dev

    Важно!

    Средство office-addin-dev-settings не поддерживается на Mac.

  2. Укажите веб-представление, которое office будет использовать с помощью следующей команды, в командной строке в корневой части проекта. Замените <path-to-manifest> относительным путем, который является только именем файла манифеста, если он находится в корне проекта. Замените <webview> на или edge-legacyie . Обратите внимание, что параметры называются в честь браузеров, в которых были созданы веб-представления. Параметр ie означает "Trident", edge-legacy а параметр означает "EdgeHTML".

    npx office-addin-dev-settings webview <path-to-manifest> <webview>

    Ниже приведен пример.

    npx office-addin-dev-settings webview manifest.xml ie

    В командной строке должно появиться сообщение о том, что для типа webview теперь задано значение IE (или Устаревшая версия Edge).

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

    npx office-addin-dev-settings webview <path-to-manifest> default

Установка версии Office, которая использует устаревшую версию Edge

Используйте следующую процедуру, чтобы установить версию Office (скачаемую из подписки На Microsoft 365), которая использует устаревшая версия Microsoft Edge webview (EdgeHTML) для запуска надстроек, или версию, которая использует интернет-Обозреватель (Trident).

  1. В любом приложении Office откройте вкладку Файл на ленте, а затем выберите Учетная запись Office или Учетная запись. Нажмите кнопку Сведения об имени узла (например, О Word).

  2. В открывшемся диалоговом окне найдите полный номер сборки xx.x.xxxxx и создайте его копию.

  3. Скачайте средство развертывания Office.

  4. Запустите скачанный файл, чтобы извлечь средство. Вам будет предложено выбрать, где установить средство.

  5. В папке, в которой установлено средство (где setup.exe находится файл), создайте текстовый файл с именем config.xml и добавьте следующее содержимое.

    <Configuration>
  <Add OfficeClientEdition="64" Channel="SemiAnnual" Version="16.0.xxxxx.xxxxx">
    <Product ID="O365ProPlusRetail">
      <Language ID="en-us" />
    </Product>
  </Add>
</Configuration>

  6. Измените Version значение.

    • Чтобы установить версию, которая использует EdgeHTML, измените ее на 16.0.11929.20946.
    • Чтобы установить версию, которая использует Trident, измените ее на 16.0.10730.20348.

  7. При необходимости измените значение OfficeClientEdition"32" на , чтобы установить 32-разрядную версию Office, и при необходимости измените Language ID значение для установки Office на другом языке.

  8. Откройте командную строку от имени администратора.

  9. Перейдите в папку с файлами setup.exe и config.xml .

  10. Выполните следующую команду.

    setup.exe /configure config.xml

    Эта команда устанавливает Office. Установка может занять несколько минут.

  11. Очистите кэш Office.

Важно!

После установки убедитесь, что вы отключили автоматическое обновление Office, чтобы office не обновлялся до версии, которая не использует webview, с которой вы хотите работать, прежде чем завершить его использование. Это может произойти в течение нескольких минут после установки. Выполните указанные ниже действия.

  1. Запустите любое приложение Office и откройте новый документ.
  2. Откройте вкладку Файл на ленте и выберите Учетная запись Office или Учетная запись.
  3. В столбце Сведения о продукте выберите Параметры обновления, а затем — Отключить Обновления. Если этот параметр недоступен, office уже настроен на автоматическое обновление.

Когда вы закончите использовать старую версию Office, переустановите новую версию, изменив config.xml файл и изменив Version номер сборки, скопированный ранее. Затем повторите setup.exe /configure config.xml команду в командной строке администратора. При необходимости повторно включите автоматическое обновление.