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

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

  • Статья

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

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

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

Совет

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

Примечание.

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

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

Windows 10 и 11 включают средство веб-разработки под названием F12, так как оно было первоначально запущено при нажатии клавиши F12 в Internet Explorer. F12 теперь является независимым приложением, используемым для отладки надстройки, когда она выполняется в элементе управления webview Internet Explorer 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. Отображаются только процессы, выполняемые в Internet Explorer или Trident. Средство не может подключаться к процессам, выполняемым в других браузерах или веб-представлениях, включая Microsoft Edge.

    Экран IEChooser с несколькими процессами Internet Explorer и Trident. Один из них называется Home.html.

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

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

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

    Верхний левый угол вкладки отладчика с открытой папкой и списком файлов.

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

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

    Отладчик с точкой останова в home.js файле.

  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 использовать элемент управления веб-представления 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, использующего Internet Explorer

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

См. также