Надстройка Microsoft Office "Расширение отладчика для Visual Studio Code"

  • Статья

Надстройки Office, работающие в Windows, могут использовать расширение отладчика надстройки Office в Visual Studio Code для отладки устаревшая версия Microsoft Edge с помощью исходной среды выполнения WebView (EdgeHTML).

Важно!

Эта статья применяется только в том случае, если Office запускает надстройки в исходной среде выполнения WebView (EdgeHTML), как описано в разделе Браузеры и элементы управления webview, используемые надстройками Office. Инструкции по отладке в Visual Studio code для Microsoft Edge WebView2 (на основе Chromium) см. в разделе Расширение отладчика надстройки Microsoft Office для Visual Studio Code.

Совет

Если вы не можете или не хотите выполнять отладку с помощью средств, встроенных в Visual Studio Code, или вы сталкиваетесь с проблемой, которая возникает только при запуске надстройки за пределами Visual Studio Code, вы можете выполнить отладку среды выполнения Edge Legacy (EdgeHTML) с помощью средств разработчика устаревшей версии Edge, как описано в статье Отладка надстроек с помощью средств разработчика в устаревшая версия Microsoft Edge.

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

Расширение отладчика надстроек Office отлаживает раздел надстроек Excel.

Предварительные требования

Установка и использование отладчика

В этих инструкциях предполагается, что у вас есть опыт работы с командной строкой, основные сведения о JavaScript и создание проекта надстройки Office перед использованием генератора Yeoman для надстроек Office. Если вы еще не сделали этого, рассмотрите возможность ознакомиться с одним из наших учебников, например с этим руководством по надстройке Office для Excel.

  1. Первый шаг зависит от проекта и от порядка его создания.

    • Если вы хотите создать проект для экспериментов с отладкой в Visual Studio Code, используйте генератор Yeoman для надстроек Office. Для этого воспользуйтесь одним из наших кратких руководств по началу работы, например кратким руководством по началу работы над надстройкой Outlook.
    • Если нужно отладить существующий проект, созданный с помощью Yo Office, перейдите к следующем шагу.
    • Если вы хотите отладить существующий проект, который не был создан с помощью Yo Office, выполните процедуру, описанную в приложении , и вернитесь к следующему шагу этой процедуры.

  2. Откройте VS Code, откройте проект в этом решении.

  3. Находясь в коде VS, нажмите клавиши CTRL+SHIFT+X, чтобы открыть меню расширений. Найдите расширение "Отладчик надстроек Microsoft Office" и установите его.

  4. Выберите Вид>Выполнить или введите CTRL+SHIFT+D , чтобы переключиться в режим отладки.

  5. В параметрах ЗАПУСК И ОТЛАДКА выберите параметр Устаревшая версия Edge для ведущего приложения, например Классический компьютер Outlook (устаревшая версия Edge). Нажмите клавишу F5 или выберите Запустить>отладку в меню, чтобы начать отладку. Это действие автоматически запускает локальный сервер в окне Node для размещения вашей надстройки, а затем автоматически открывает ведущее приложение, например Excel или Word. Это может занять несколько секунд.

  6. Теперь надстройка готова к использованию в ведущем приложении. Нажмите кнопку Показать область задач или выполнить другие дополнительные команды надстройки. Появится диалоговое окно, похожее на следующее:

    WebView Stop On Load. Чтобы отладить WebView, присоедините VS Code к экземпляру WebView с помощью расширения Microsoft Debugger для Edge и нажмите кнопку ОК , чтобы продолжить. Чтобы предотвратить появление этого диалогового окна в будущем, нажмите кнопку Отмена.

    Нажмите кнопку ОК.

    Примечание.

    После нажатия кнопки Отменадиалоговое окно не будет отображаться в процессе работы с этим экземпляром надстройки. Однако при перезапуске надстройки диалоговое окно снова появится.

  7. Задайте точку останова в файле области задач проекта. Чтобы установить точки останова в Visual Studio Code, наведите указатель мыши на строку кода выберите появившийся красный кружок.

    Кружок на строке кода в Visual Studio Code.

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

    Примечание.

    Точки останова в вызовах Office.initialize или Office.onReady игнорируются. Дополнительные сведения об этих методах см. в статье Инициализация надстройки Office.

Важно!

Лучший способ остановить сеанс отладки — выбрать shift+F5 или запустить>остановить отладку в меню. Это действие должно закрыть окно сервера Node и попытаться закрыть ведущее приложение, но в ведущем приложении появится запрос о необходимости сохранения документа. Сделайте соответствующий выбор и позвольте закрыть ведущее приложение. Избегайте закрытия окна Node или ведущего приложения вручную. Это может привести к ошибкам, особенно при многократной остановке и запуске сеансов отладки.

Если отладка перестает работать (например, если игнорируются точки останова), остановите отладку. Затем при необходимости закройте все окна ведущего приложения и окно Node. Наконец, закройте Visual Studio Code и снова откройте его.

Приложение

Если проект не был создан с помощью Yo Office, необходимо создать конфигурацию отладки для Visual Studio Code.

  1. Создайте файл с именем launch.json в папке проекта \.vscode, если такого файла там нет.

  2. Убедитесь, что в файле есть массив configurations. Ниже приведен простой пример launch.json.

    {
  // Other properties may be here.

  "configurations": [

    // Configuration objects may be here.

  ]

  // Other properties may be here.
}

  3. Добавьте следующий объект в массив configurations.

    {
  "name": "HOST Desktop (Edge Legacy)",
  "type": "office-addin",
  "request": "attach",
  "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0",
  "port": 9222,
  "timeout": 600000,
  "webRoot": "${workspaceRoot}",
  "preLaunchTask": "Debug: HOST Desktop",
  "postDebugTask": "Stop Debug"
}

  4. Замените заполнитель HOST во всех трех местах именем приложения Office, в котором выполняется надстройка, например или OutlookWord.

  5. Сохраните и закройте файл.

См. также