Поделиться через


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

В этой статье показано, как выполнить отладку клиентского кода (JavaScript или TypeScript) надстройки, если на компьютере используется сочетание версий Windows и Office, использующих исходный элемент управления веб-представления EdgeHTML.

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

Совет

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

Примечание.

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

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

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

    Примечание.

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

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

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

  4. Перейдите на вкладку Локальные. Имя вашей надстройки будет указано в списке. (На вкладке отображаются только те процессы, которые выполняются в EdgeHTML. Средство не может подключаться к процессам, выполняемым в других браузерах или веб-представлениях, включая Microsoft Edge (WebView2) и Internet Explorer (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 использовать элемент управления веб-представления EdgeHTML, предоставляемый Edge Legacy, или элемент управления Webview Trident, предоставляемый Internet Explorer для запуска надстроек, даже если у вас есть сочетание версий 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
    
    npx office-addin-dev-settings webview manifest.json edge-legacy
    

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

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

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

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

Используйте следующую процедуру, чтобы установить версию Office (загруженную из подписки На Microsoft 365), которая использует устаревшее веб-представление Microsoft Edge (EdgeHTML) для запуска надстроек, или версию, которая использует Internet Explorer (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 команду в командной строке администратора. При необходимости повторно включите автоматическое обновление.