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

Для помощи в отладке надстроек в Windows 10 доступны инструменты для разработчиков, не входящие в интегрированные среды разработки. Эти инструменты полезны, если нужно изучить проблемы при запуске надстройки вне интегрированной среды разработки.

Используемый инструмент зависит от того, где работает надстройка: в Microsoft Edge или в Internet Explorer. Это, в свою очередь, зависит от версий Windows 10 и Office, установленных на компьютере. Сведения об определении браузера, используемого на компьютере разработки, см. в статье Браузеры, используемые надстройками Office.

Примечание

Инструкции, представленные в этой статье, нельзя применять для отладки надстройки Outlook, использующей функции Execute. Для отладки надстройки Outlook, использующей функции Execute, рекомендуется прикрепить ее к Visual Studio в режиме сценария или к другому отладчику сценариев.

Если надстройка работает в Microsoft Edge

Если надстройка работает в Microsoft Edge, код без пользовательского интерфейса не сможет по умолчанию подключаться к отладчику. Код без пользовательского интерфейса — это любой код, выполняющийся, когда область задач не отображается, например команды надстройки. Чтобы включить отладку, требуется выполнить следующую команду Windows PowerShell:

  1. Выполните следующую команду, чтобы получить сведения о пакете приложения Microsoft.Win32WebViewHost.

    Get-AppxPackage Microsoft.Win32WebViewHost
    

    Эта команда перечисляет сведения о пакете приложения аналогично следующему результату.

    Name              : Microsoft.Win32WebViewHost
    Publisher         : CN=Microsoft Windows, O=Microsoft Corporation, L=Redmond, S=Washington, C=US
    Architecture      : Neutral
    ResourceId        : neutral
    Version           : 10.0.18362.449
    PackageFullName   : Microsoft.Win32WebViewHost_10.0.18362.449_neutral_neutral_cw5n1h2txyewy
    InstallLocation   : C:\Windows\SystemApps\Microsoft.Win32WebViewHost_cw5n1h2txyewy
    IsFramework       : False
    PackageFamilyName : Microsoft.Win32WebViewHost_cw5n1h2txyewy
    PublisherId       : cw5n1h2txyewy
    IsResourcePackage : False
    IsBundle          : False
    IsDevelopmentMode : False
    NonRemovable      : True
    IsPartiallyStaged : False
    SignatureKind     : System
    Status            : Ok
    
  2. Чтобы включить отладку, выполните следующую команду. Используйте значение для PackageFullName, полученное в списке от предыдущей команды.

    setx JS_DEBUG <PackageFullName>
    
  3. Если Office уже запущен, закройте и перезапустите его, чтобы учесть изменения отладки.

Отладка с помощью Microsoft Edge DevTools

Если надстройка работает в Microsoft Edge, можно использовать Microsoft Edge DevTools.

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

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

  3. Перейдите на вкладку Локальные. Имя вашей надстройки будет указано в списке.

  4. Щелкните имя надстройки, чтобы открыть ее.

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

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

  7. Чтобы задать точку останова, выберите строку. Появится красная точка слева от строки и соответствующая строка в области стека вызовов (в правом нижнем углу).

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

Если надстройка работает в Internet Explorer

Если надстройка работает в браузере Internet Explorer, для ее тестирования можно использовать отладчик в составе средств разработчика F12 в Windows 10. Средства разработчика F12 можно запустить после запуска надстройки. Средства F12 отображаются в отдельном окне и не используют Visual Studio.

Примечание

Отладчик входит в состав средств разработчика F12 в Internet Explorer и Windows 10, но не включен в предыдущие версии Windows.

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

  1. Откройте Word и выберите пустой документ.

  2. На вкладке Вставка, в группе "Надстройки" нажмите Магазин и выберите надстройку QR4Office. (Вы можете загрузить любую надстройку из Магазина Microsoft Store или каталога надстроек).

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

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

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

    Когда вы запустите IEChooser, в отдельном окне "Выбрать цель для отладки" отобразятся приложения, которые, возможно, нужно отладить. Выберите необходимое приложение. Если вы создаете собственную надстройку, выберите веб-сайт, на котором она развернута. Это может быть URL-адрес localhost.

    Например, выберите home.html.

    Экран IEChooser, указывающий на надстройку пузырьков.

  4. В окне F12 выберите файл, который требуется отладить.

    Чтобы выбрать файл в окне F12, нажмите значок папки над областью сценариев (слева). В списке доступных файлов, представленных в раскрывающемся списке, выберите Home.js.

  5. Задайте точку останова.

    Чтобы задать точку останова в файле Home.js, выберите строку 144 (код функции textChanged). Появятся красная точка слева от строки и соответствующая строка в области стека вызовов и точек останова (справа внизу). Другие способы задания точки останова см. в статье Проверка выполнения кода JavaScript при помощи отладчика.

    Отладка с брейк-пойнтом в home.js файле.

  6. Запустите надстройку, чтобы активировать точку останова.

    В Word выберите текстовое поле URL-адреса в верхней части области QR4Office и попробуйте ввести какой-либо текст. В области стека вызовов и точек останова в отладчике вы увидите, что точка останова активирована и показывает различные сведения. Чтобы увидеть результаты, может потребоваться обновить отладчик.

    Отладка результатов с срабатывуемой точкой разрыва.

См. также