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

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

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

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

Совет

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

Примечание.

Сведения об установке версии Office, в котором используется Trident, или о принудительном использовании текущей версии Trident см. в статье Переключение на веб-представление Trident.

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

Windows 10 и 11 включают в себя средство веб-разработки F12, так как оно было первоначально запущено путем нажатия клавиши F12 в Интернете Обозреватель. F12 теперь является независимым приложением, используемым для отладки надстройки, когда она работает в Интернете Обозреватель элементе управления webview Trident. Приложение недоступно в более ранних версиях Windows.

Примечание.

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

Ниже приведены инструкции по отладке надстройки. Если вы просто хотите протестировать сами средства F12, см. пример надстройки для тестирования средств F12.

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

2. Запустите средства разработки F12, соответствующие вашей версии Office.

   • Путь к файлу для 32-разрядной версии Office — C:\Windows\System32\F12\IEChooser.exe
   • Путь к файлу для 64-разрядной версии Office — C:\Windows\SysWOW64\F12\IEChooser.exe

   Откроется окно IEChooser с именем Выберите целевой объект для отладки. Надстройка появится в окне с именем файла домашней страницы надстройки. На следующем снимке экрана это Home.html. Отображаются только процессы, выполняемые в Обозреватель Интернета или Trident. Средство не может подключаться к процессам, выполняемым в других браузерах или веб-представлениях, включая Microsoft Edge.

   

3. Выберите процесс надстройки; то есть имя файла домашней страницы. Это действие подключит средства F12 к процессу и откроет пользовательский интерфейс main F12.

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

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

   

6. Выберите файл, который требуется отладить, и он откроется в области скрипта (слева) вкладки Отладчик . Если вы используете транспилер, упаковщик или минификатор, который изменяет имя файла, он будет иметь окончательное имя, которое фактически загружено, а не исходное имя исходного файла.

7. Прокрутите страницу до строки, в которой нужно задать точку останова, и щелкните поле слева от номера строки. Вы увидите красную точку слева от линии, а соответствующая строка появится на вкладке Точки останова нижней правой области. Ниже показан снимок экрана с примером.

   

8. Выполните функции в надстройке, необходимые для срабатывания точки останова. При попадании в точку останова на красной точке точки останова появляется стрелка вправо. Ниже показан снимок экрана с примером.

   

Совет

Дополнительные сведения об использовании средств F12 см. в статье Проверка выполнения JavaScript с помощью отладчика.

Пример надстройки для тестирования средств F12

В этом примере используются Word и бесплатная надстройка из AppSource.

1. Откройте Word и выберите пустой документ.
2. Выберите Главная>надстройки, а затем выберите Получить надстройки.
3. В диалоговом окне Надстройки Office выберите вкладку STORE .
4. Выберите надстройку QR4Office . Он открывается в области задач.
5. Запустите средства разработки F12, соответствующие вашей версии Office, как описано в предыдущем разделе.
6. В окне F12 выберите Home.html.
7. На вкладке Отладчик откройте файл Home.js , как описано в предыдущем разделе.
8. Установите точки останова на строках 310 и 312.
9. В надстройке нажмите кнопку Вставить . Достигнута одна или другая точка останова.

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

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

1. Запустите надстройку и средства.
2. Откройте диалоговое окно и нажмите кнопку Обновить в средствах. Отображается процесс диалога. Его имя — это имя файла, открытого в диалоговом окне.
3. Выберите процесс, чтобы открыть его и выполнить отладку, как описано в разделе Отладка надстройки области задач с помощью средств F12.

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

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

• Проект был разработан с помощью 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, которая использует интернет-Обозреватель

Используйте следующую процедуру, чтобы установить версию 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 команду в командной строке администратора. При необходимости повторно включите автоматическое обновление.

См. также

• Проверка выполнения кода JavaScript с помощью отладчика
• Использование средств разработчика F12