Отладка решений SharePoint Framework в Visual Studio Code

Visual Studio Code — это популярный редактор кода, часто используемый для создания решений SharePoint Framework. Настроив отладку решения SharePoint Framework в Visual Studio Code, вы можете эффективнее пошагово выполнять код и исправлять ошибки.

Вы также можете увидеть необходимые действия для включения отладки в Visual Studio Code в этом видео на канале Microsoft 365 Platform Community (PnP) YouTube:

Необходимые компоненты

Самый простой способ настроить Visual Studio Code (VS Code) для отладки SharePoint Framework решений — использовать отладчик JavaScript, включенный в VS Code, для отладки Chrome & Edge.

Вам также необходим браузер Google Chrome или Microsoft Edge.

Конфигурации отладки

Конфигурация отладки находится в файле ./vscode/launch.json в папке рабочей области Visual Studio Code:

Настройка точки останова

1. В Visual Studio Code откройте основной исходный файл веб-части и добавьте точку останова в первой строке метода render(). Для этого выберите поле слева от номера строки или выделите строку кода в редакторе и нажмите клавишу F9.

   

2. В Visual Studio Code откройте меню Вид и выберите параметр Интегрированный терминал или нажмите клавиши CTRL+`.

3. В терминале выполните следующую команду:

   gulp serve --nobrowser
   

   При этом будет выполнена сборка решения SharePoint Framework и запустится локальный веб-сервер для предоставления выходных файлов. Так как отладчик запускает собственный экземпляр браузера, мы используем аргумент --nobrowser, чтобы задача serve не открывала окно браузера.

   

Начало отладки с помощью Visual Studio Code

Когда задача gulp будет выполнена, переместите курсор в область кода Visual Studio Code и нажмите клавишу F5 (или выберите в меню Отладка параметр Запустить отладку).

Будет запущен режим отладки Visual Studio Code: цвет строки состояния изменится на оранжевый, а также откроется новое окно Google Chrome с рабочей областью SharePoint.

Примечание.

В этот момент точка останова отключена, так как код веб-части еще не загружен. SharePoint Framework загружает веб-части по запросу только после их добавления на страницу.

Добавление веб-части на холст

Чтобы убедиться, что отладка работает, добавьте веб-часть на холст в рабочей области.

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

Если теперь обновить страницу, в Visual Studio Code будет достигнута точка останова, и вы сможете проверить все свойства и пошагово выполнить код.

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

Чтобы проверить взаимодействие решения с SharePoint, можно использовать размещенную версию рабочей области SharePoint, доступную в каждом клиенте Microsoft 365 по адресу https://yourtenant.sharepoint.com/_layouts/workbench.aspx.

При создании решений SharePoint Framework вы будете регулярно выполнять такие проверки, поэтому рекомендуем создать отдельную конфигурацию отладки для размещенной версии рабочей области SharePoint.

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

1. Откройте файл .vscode/launch.json и измените свойство url в конфигурации размещенной рабочей области на URL-адрес вашего сайта SharePoint.

   "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
   

2. В Visual Studio Code откройте панель Отладка и в списке Конфигурации выберите новую конфигурацию Размещенная рабочая область.

   

3. Запустите отладку, нажав клавишу F5 или выбрав в меню Отладка параметр Запустить отладку. Visual Studio Code переключится в режим отладки (это будет видно по оранжевой строке состояния), а расширение Debugger for Chrome откроет новое окно Google Chrome со страницей входа в Microsoft 365.

   

4. После входа добавьте веб-часть на холст и обновите рабочую область. В Visual Studio Code будет достигнута точка останова, а вы сможете проверить переменные и пошагово выполнить код.

   

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

Отладка расширения в размещенной рабочей области похожа на шаги для веб-части с несколькими ключевыми отличиями.

1. Откройте файл .vscode/launch.json и измените свойство url в конфигурации размещенной рабочей области на URL-адрес вашего сайта SharePoint.

   "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
   

2. В Visual Studio Code откройте панель Отладка и в списке Конфигурации выберите новую конфигурацию Размещенная рабочая область.

   

3. После запуска gulp serve в терминале начните отладку, нажав клавишу F5 или выбрав в меню Отладка параметр Запустить отладку. Visual Studio Code переключится в режим отладки (это будет видно по оранжевой строке состояния), а расширение Debugger for Chrome откроет новое окно Google Chrome со страницей входа в Microsoft 365.

   

4. На вкладке рабочей области, открытой в вашем браузере, перейдите на страницу SharePoint Online, в которой вы хотите протестировать расширение.

5. Добавьте в URL-адрес приведенные ниже параметры строки запроса. Обратите внимание, что идентификатор необходимо обновить в соответствии с идентификатором вашего расширения. Он указан в файле HelloWorldApplicationCustomizer.manifest.json.

   Осторожностью

   Отступы разрывов & строк добавлены в следующий фрагмент кода для удобства чтения. Следующий текст должен находиться в одной строке без пробелов.

   ?loadSPFX=true
   &debugManifestsFile=https://localhost:4321/temp/manifests.js
   &customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
       "location":"ClientSideExtension.ApplicationCustomizer",
       "properties":{
         "testMessage":"Hello as property!"
       }
   }}
   

   Дополнительные сведения о параметрах URL-адресов:

   • loadSPFX=true: обеспечивает загрузку SharePoint Framework на странице. Для загрузки платформы должно быть зарегистрировано по крайней мере одно расширение. Так как компоненты еще не зарегистрированы, платформу нужно загрузить вручную.
   • debugManifestsFile: указывает, что нужно загрузить компоненты SPFx, сохраненные локально. Загрузчик ищет компоненты только в каталоге приложений (для развернутого решения) и на сервере манифестов SharePoint (для системных библиотек).
   • customActions: имитирует дополнительное действие. При развертывании и регистрации этого компонента на сайте вы создадите объект CustomAction и опишете все свойства, которые можно задать для него.
     • Key: используйте GUID расширения в качестве ключа, связываемого с дополнительным действием. Он должен соответствовать идентификатору расширения, указанному в файле manifest.json.
     • Location: тип дополнительного действия. Используйте ClientSideExtension.ApplicationCustomizer для расширения "Настройщик приложений".
     • Properties: необязательный объект JSON, содержащий свойства, доступные посредством элемента this.properties. В этом примере HelloWorld он определяет свойство testMessage.

   Полный URL-адрес должен выглядеть примерно так:

   Осторожностью

   Отступы разрывов & строк добавлены в следующий фрагмент кода для удобства чтения. Следующий текст должен находиться в одной строке без пробелов.

   https://contoso.sharepoint.com/Lists/Contoso/AllItems.aspx
       ?loadSPFX=true
       &debugManifestsFile=https://localhost:4321/temp/manifests.js
       &customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{
           "location":"ClientSideExtension.ApplicationCustomizer",
           "properties":{
             "testMessage":"Hello as property!"
           }
       }}
   

6. Выберите Загрузить скрипты отладки, чтобы продолжить загрузку скриптов с домена localhost.

   

   Теперь при загрузке страницы вы увидите на ней расширение (в данном случае расширение команды представления списка):

   

   Кроме того, можно переключать точки останова и выполнять код пошагово:

   

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

Если вы используете более раннюю версию генератора Yeoman для SharePoint Framework или хотите выполнить отладку с помощью Microsoft Edge, следуйте инструкциям ниже, чтобы создать файл launch.json вручную.

Примечание.

Чтобы выполнить отладку с помощью Microsoft Edge, необходимо установить обновление Windows 10 за апрель 2018 г., которое включает в себя протокол Microsoft Edge DevTools.

Создание конфигурации отладки для размещенной рабочей области

1. В Visual Studio Code откройте файл .vscode/launch.json.

2. Для браузера Microsoft Edge скопируйте имеющуюся конфигурацию отладки и укажите URL-адрес размещенной рабочей области:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Hosted workbench",
         "type": "msedge",
         "request": "launch",
         "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
         "webRoot": "${workspaceRoot}",
         "sourceMaps": true,
         "sourceMapPathOverrides": {
           "webpack:///.././src/*": "${webRoot}/src/*",
           "webpack:///../../../src/*": "${webRoot}/src/*",
           "webpack:///../../../../src/*": "${webRoot}/src/*",
           "webpack:///../../../../../src/*": "${webRoot}/src/*"
         }
       }
     ]
   }
   

3. Для браузера Chrome скопируйте имеющуюся конфигурацию отладки и укажите URL-адрес размещенной рабочей области:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Hosted workbench",
         "type": "pwa-chrome",
         "request": "launch",
         "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx",
         "webRoot": "${workspaceRoot}",
         "sourceMaps": true,
         "sourceMapPathOverrides": {
           "webpack:///.././src/*": "${webRoot}/src/*",
           "webpack:///../../../src/*": "${webRoot}/src/*",
           "webpack:///../../../../src/*": "${webRoot}/src/*",
           "webpack:///../../../../../src/*": "${webRoot}/src/*"
         },
         "runtimeArgs": [
           "--remote-debugging-port=9222",
           "-incognito"
         ]
       }
     ]
   }
   

См. также

• Отладка веб-части SharePoint Framework (Элио Струйф)
• Отладка веб-части SPFx React с помощью Visual Studio Code (Велин Георгиев)
• Генератор Yeoman для SharePoint Framework
• Обзор SharePoint Framework